@public-ui/sample-react 2.2.9 → 2.2.10-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/1266.js +1 -1
- package/dist/1537.js +2 -0
- package/dist/1601.js +1 -1
- package/dist/1786.js +1 -1
- package/dist/1797.js +1 -1
- package/dist/1832.js +1 -1
- package/dist/2265.js +2 -0
- package/dist/2441.js +1 -1
- package/dist/2462.js +1 -1
- package/dist/2605.js +1 -1
- package/dist/2728.js +1 -1
- package/dist/2960.js +1 -1
- package/dist/3440.js +1 -1
- package/dist/3460.js +1 -1
- package/dist/3492.js +1 -1
- package/dist/3503.js +1 -1
- package/dist/3845.js +1 -1
- package/dist/3882.js +1 -1
- package/dist/3965.js +1 -1
- package/dist/4181.js +1 -1
- package/dist/4294.js +1 -1
- package/dist/4604.js +1 -1
- package/dist/4714.js +1 -1
- package/dist/4737.js +1 -1
- package/dist/4804.js +1 -1
- package/dist/4972.js +1 -1
- package/dist/5076.js +1 -1
- package/dist/5204.js +1 -1
- package/dist/5399.js +1 -1
- package/dist/5431.js +1 -1
- package/dist/5514.js +1 -1
- package/dist/5522.js +1 -1
- package/dist/5677.js +1 -1
- package/dist/5781.js +1 -1
- package/dist/5813.js +1 -1
- package/dist/5829.js +1 -1
- package/dist/6199.js +1 -1
- package/dist/6320.js +1 -1
- package/dist/6473.js +1 -1
- package/dist/6567.js +1 -1
- package/dist/6649.js +1 -1
- package/dist/6705.js +1 -1
- package/dist/6717.js +1 -1
- package/dist/6731.js +1 -1
- package/dist/6974.js +1 -1
- package/dist/7157.js +1 -1
- package/dist/7162.js +1 -1
- package/dist/7163.js +1 -1
- package/dist/7183.js +1 -1
- package/dist/7310.js +1 -1
- package/dist/7391.js +1 -1
- package/dist/7461.js +1 -1
- package/dist/7560.js +1 -1
- package/dist/7582.js +1 -1
- package/dist/7609.js +1 -1
- package/dist/8100.js +1 -1
- package/dist/8116.js +1 -1
- package/dist/8126.js +1 -1
- package/dist/8191.js +1 -1
- package/dist/8210.js +1 -1
- package/dist/8286.js +1 -1
- package/dist/8471.js +1 -1
- package/dist/85.js +1 -1
- package/dist/8799.js +1 -1
- package/dist/8902.js +1 -1
- package/dist/8956.js +1 -1
- package/dist/92.js +1 -1
- package/dist/9558.js +1 -1
- package/dist/9768.js +1 -1
- package/dist/9818.js +1 -1
- package/dist/989.js +1 -1
- package/dist/9980.js +1 -1
- package/dist/main.js +1 -1
- package/package.json +4 -4
- package/dist/4330.js +0 -2
- package/dist/5447.js +0 -2
- /package/dist/{4330.js.LICENSE.txt → 1537.js.LICENSE.txt} +0 -0
- /package/dist/{5447.js.LICENSE.txt → 2265.js.LICENSE.txt} +0 -0
package/dist/8956.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see 8956.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8956],{407:(n,e,t)=>{t.d(e,{v:()=>i});var o=t(2741);const i=(n,e)=>{(0,o.b)(n,"_hasCloser",e)}},1285:(n,e,t)=>{t.d(e,{w:()=>a});var o=t(9027),i=t(2741);const a=(n,e)=>{(0,i.w)(n,"_level",(n=>"number"==typeof n&&o.h.includes(n)),new Set([`Number {${o.h.join(", ")}`]),e,{defaultValue:1,required:!0})}},5374:(n,e,t)=>{t.d(e,{t:()=>a});var o=t(6607),i=t(7177);let a=(n,e)=>{var t;return(null!==(t=(0,o.g)())&&void 0!==t?t:(0,o.i)("de")).translate(n,e)};"test"===i.p&&(a=n=>n)},7177:(n,e,t)=>{t.d(e,{b:()=>l,h:()=>i,p:()=>o,s:()=>a});let o="development";try{o="production"}catch(n){o="production"}const i=(n,e,t)=>{if(n&&e&&"string"==typeof t){const o=n.querySelector(`[slot="${t}"]`);o&&e.appendChild(o)}},a=n=>""===n,l=(n,e)=>n||e||""},8956:(n,e,t)=>{t.r(e),t.d(e,{kol_card:()=>c});var o=t(
|
|
2
|
+
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8956],{407:(n,e,t)=>{t.d(e,{v:()=>i});var o=t(2741);const i=(n,e)=>{(0,o.b)(n,"_hasCloser",e)}},1285:(n,e,t)=>{t.d(e,{w:()=>a});var o=t(9027),i=t(2741);const a=(n,e)=>{(0,i.w)(n,"_level",(n=>"number"==typeof n&&o.h.includes(n)),new Set([`Number {${o.h.join(", ")}`]),e,{defaultValue:1,required:!0})}},5374:(n,e,t)=>{t.d(e,{t:()=>a});var o=t(6607),i=t(7177);let a=(n,e)=>{var t;return(null!==(t=(0,o.g)())&&void 0!==t?t:(0,o.i)("de")).translate(n,e)};"test"===i.p&&(a=n=>n)},7177:(n,e,t)=>{t.d(e,{b:()=>l,h:()=>i,p:()=>o,s:()=>a});let o="development";try{o="production"}catch(n){o="production"}const i=(n,e,t)=>{if(n&&e&&"string"==typeof t){const o=n.querySelector(`[slot="${t}"]`);o&&e.appendChild(o)}},a=n=>""===n,l=(n,e)=>n||e||""},8956:(n,e,t)=>{t.r(e),t.d(e,{kol_card:()=>c});var o=t(6630),i=t(5374),a=t(1285),l=t(8133),s=t(407),r=t(2741),d=t(9027);const c=class{constructor(n){(0,o.r)(this,n),this.close=()=>{var n;void 0!==(null===(n=this._on)||void 0===n?void 0:n.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=n=>"object"==typeof n&&null!==n&&"function"==typeof n.onClose,this._on=void 0,this._hasCloser=!1,this._label=void 0,this._level=1,this.state={_label:""}}render(){return(0,o.h)(o.H,{key:"cf5cadd3bb2bb46786b22cbff2b6f6e544f20f8c",class:"kol-card"},(0,o.h)("div",{key:"d6390cb83917a256e5f17ae14b2eef60798b078d",class:"card"},(0,o.h)("div",{key:"93ac16033ac74c6f28721ab9ea2d1bf584bb2bcd",class:"header"},(0,o.h)(l.b,{key:"9d10872bd4fff8db6b8a300ad4d054722ee43202",_label:this.state._label,_level:this.state._level})),(0,o.h)("div",{key:"9ef07081531e751a51adcd7a9519ef47a03c1193",class:"content"},(0,o.h)("slot",{key:"88d177557969b9afb7f0676c5da1bd3b973db86e"})),this.state._hasCloser&&(0,o.h)(l.c,{key:"97c8e626f182c16b71d76165589409035f83d3bf",class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,i.t)("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(n){this.validateOnValue(n)&&(0,r.s)(this,"_on",{onClose:n.onClose})}validateHasCloser(n){(0,s.v)(this,n)}validateLabel(n){(0,d.v)(this,n,{required:!0})}validateLevel(n){(0,a.w)(this,n)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}};c.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\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 * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\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 .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host > div.card {\n height: 100%;\n position: relative;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .close {\n position: absolute;\n top: 0;\n right: 0;\n }\n}"}},9027:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>i,v:()=>c});var o=t(2741);const i=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),c=(n,e,t={})=>{(0,o.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,i,a)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,i,a)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,o.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,o.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},h=c}}]);
|
package/dist/92.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see 92.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[92],{92:(n,e,t)=>{t.r(e),t.d(e,{kol_button_group:()=>a});var i=t(
|
|
2
|
+
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[92],{92:(n,e,t)=>{t.r(e),t.d(e,{kol_button_group:()=>a});var i=t(6630),o=t(8133);const a=class{constructor(n){(0,i.r)(this,n)}render(){return(0,i.h)(i.H,{key:"5d9e4a2275cb34811dabead3a0fc42feaded6fad",class:"kol-button-group"},(0,i.h)(o.i,{key:"b87c020718ba902dc4c4ef4aa9dc0ca3eff65021"},(0,i.h)("slot",{key:"e1d613b3027f4fcbe054d5f751c73eddd68cfcdf"})))}};a.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\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 * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\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 .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n }\n}"}}}]);
|
package/dist/9558.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see 9558.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9558],{4045:(t,e,i)=>{i.d(e,{v:()=>o});var s=i(2741);const o=(t,e)=>{(0,s.i)(t,"_badgeText",e)}},9027:(t,e,i)=>{i.d(e,{a:()=>c,b:()=>a,c:()=>h,h:()=>o,v:()=>d});var s=i(2741);const o=[0,1,2,3,4,5,6],n=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function a(t,e=1){return function(t){var e;return"string"==typeof t&&(null===(e=t.match(n))||void 0===e?void 0:e.length)||0}(t)>=e}function h(t){return l.test(t)}const r=new Set(["string"]),d=(t,e,i={})=>{(0,s.w)(t,"_label",(t=>"string"==typeof t),r,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,i,o,n)=>{var l,r;"function"==typeof(null===(l=t.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(r=t.hooks)||void 0===r||r.afterPatch(e,i,o,n)),"string"==typeof e&&!1===a(e,3)&&!1===h(e)&&(0,s.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,s.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}})}(i))},c=d},9558:(t,e,i)=>{i.r(e),i.d(e,{kol_tooltip_wc:()=>u});var s=i(
|
|
2
|
+
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9558],{4045:(t,e,i)=>{i.d(e,{v:()=>o});var s=i(2741);const o=(t,e)=>{(0,s.i)(t,"_badgeText",e)}},9027:(t,e,i)=>{i.d(e,{a:()=>c,b:()=>a,c:()=>h,h:()=>o,v:()=>d});var s=i(2741);const o=[0,1,2,3,4,5,6],n=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function a(t,e=1){return function(t){var e;return"string"==typeof t&&(null===(e=t.match(n))||void 0===e?void 0:e.length)||0}(t)>=e}function h(t){return l.test(t)}const r=new Set(["string"]),d=(t,e,i={})=>{(0,s.w)(t,"_label",(t=>"string"==typeof t),r,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,i,o,n)=>{var l,r;"function"==typeof(null===(l=t.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(r=t.hooks)||void 0===r||r.afterPatch(e,i,o,n)),"string"==typeof e&&!1===a(e,3)&&!1===h(e)&&(0,s.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,s.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}})}(i))},c=d},9558:(t,e,i)=>{i.r(e),i.d(e,{kol_tooltip_wc:()=>u});var s=i(6630),o=i(3910),n=i(8133),l=i(2741),a=i(5838),h=i(4045),r=i(9357),d=i(9027);const c=new Set,u=class{constructor(t){(0,s.r)(this,t),this.hasFocusIn=!1,this.hasMouseIn=!1,this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){t=this.tooltipElement,c.forEach((t=>{t.style.setProperty("z-index","999")})),c.add(t),t.style.setProperty("z-index","1000"),this.tooltipElement.style.setProperty("display","block"),(0,a.g)().addEventListener("keyup",this.hideTooltipByEscape);const e=this.previousSibling,i=this.tooltipElement;this.cleanupAutoPositioning=(0,o.b)(e,i,(()=>{this.alignTooltip()}))}var t},this.hideTooltip=()=>{this.tooltipElement&&(function(t){if(c.delete(t),c.size>0){const t=Array.from(c).pop();t&&t.style.setProperty("z-index","1000")}}(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),(0,a.g)().removeEventListener("keyup",this.hideTooltipByEscape)},this.hideTooltipByEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addListeners=t=>{t.addEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.addEventListener("mouseleave",this.handleMouseleave.bind(this)),t.addEventListener("focusin",this.handleFocusIn.bind(this)),t.addEventListener("focusout",this.handleFocusout.bind(this))},this.removeListeners=t=>{t.removeEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.removeEventListener("mouseleave",this.handleMouseleave.bind(this)),t.removeEventListener("focusin",this.handleFocusIn.bind(this)),t.removeEventListener("focusout",this.handleFocusout.bind(this))},this.resyncListeners=(t,e,i=!1)=>{t&&this.removeListeners(t),e&&(i&&(this.previousSibling=e),this.addListeners(e))},this.catchTooltipElement=t=>{this.tooltipElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{this.hasMouseIn||this.hasFocusIn?this.showTooltip():this.hideTooltip()}),300)},this._badgeText=void 0,this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_label:""}}alignTooltip(){return t=this,e=function*(){this.tooltipElement&&this.previousSibling&&(yield(0,o.a)({align:this._align,referenceElement:this.previousSibling,arrowElement:this.arrowElement,floatingElement:this.tooltipElement}))},new Promise(((i,s)=>{var o=t=>{try{l(e.next(t))}catch(t){s(t)}},n=t=>{try{l(e.throw(t))}catch(t){s(t)}},l=t=>t.done?i(t.value):Promise.resolve(t.value).then(o,n);l((e=e.apply(t,null)).next())}));var t,e}handleMouseEnter(){this.hasMouseIn=!0,this.showOrHideTooltip()}handleMouseleave(){this.hasMouseIn=!1,this.showOrHideTooltip()}handleFocusIn(){this.hasFocusIn=!0,this.showOrHideTooltip()}handleFocusout(){this.hasFocusIn=!1,this.showOrHideTooltip()}render(){return(0,s.h)(s.H,{key:"1c451d0dd4961d747400c009d047fee03ff0ec59",class:"kol-tooltip-wc"},""!==this.state._label&&(0,s.h)("div",{key:"6879df2a08610759e1cfadf6421d4eba1e8c9e5a",class:"tooltip-floating",ref:this.catchTooltipElement},(0,s.h)("div",{key:"ea902b518257361bd6dffe53806177097383707c",class:"tooltip-area tooltip-arrow",ref:this.catchArrowElement}),(0,s.h)(n.f,{key:"a54da5c444f87328dc15acce24d429412c405595",class:"tooltip-area tooltip-content",id:this.state._id,_badgeText:this._badgeText,_label:this.state._label})))}validateBadgeText(t){(0,h.v)(this,t)}validateAlign(t){(0,r.a)(this,t)}validateId(t){((t,e)=>{(0,l.i)(t,"_id",e)})(this,t)}validateLabel(t){(0,d.v)(this,t,{required:!0})}componentWillLoad(){this.validateBadgeText(this._badgeText),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var t;this.resyncListeners(this.previousSibling,null===(t=this.host)||void 0===t?void 0:t.previousElementSibling,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var t;this.previousSibling=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling}componentDidRender(){this.handleEventListeners()}disconnectedCallback(){this.previousSibling&&(this.removeListeners(this.previousSibling),this.previousSibling=void 0),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}get host(){return(0,s.g)(this)}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}}}}]);
|
package/dist/9768.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see 9768.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9768],{1847:(e,n,t)=>{t.d(n,{c:()=>s,h:()=>m,v:()=>f});var r=t(5838),a=t(2741),o={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]},l={red:0,orange:60,yellow:120,green:180,blue:240,purple:300},i=function(e){var n,t,r=[],a=1;if("string"==typeof e)if(e=e.toLowerCase(),o[e])r=o[e].slice(),t="rgb";else if("transparent"===e)a=0,t="rgb",r=[0,0,0];else if(/^#[A-Fa-f0-9]+$/.test(e)){var i=e.slice(1);a=1,(c=i.length)<=4?(r=[parseInt(i[0]+i[0],16),parseInt(i[1]+i[1],16),parseInt(i[2]+i[2],16)],4===c&&(a=parseInt(i[3]+i[3],16)/255)):(r=[parseInt(i[0]+i[1],16),parseInt(i[2]+i[3],16),parseInt(i[4]+i[5],16)],8===c&&(a=parseInt(i[6]+i[7],16)/255)),r[0]||(r[0]=0),r[1]||(r[1]=0),r[2]||(r[2]=0),t="rgb"}else if(n=/^((?:rgb|hs[lvb]|hwb|cmyk?|xy[zy]|gray|lab|lchu?v?|[ly]uv|lms)a?)\s*\(([^\)]*)\)/.exec(e)){var s=n[1],d="rgb"===s;t=i=s.replace(/a$/,"");var c="cmyk"===i?4:"gray"===i?1:3;r=n[2].trim().split(/\s*[,\/]\s*|\s+/).map((function(e,n){if(/%$/.test(e))return n===c?parseFloat(e)/100:"rgb"===i?255*parseFloat(e)/100:parseFloat(e);if("h"===i[n]){if(/deg$/.test(e))return parseFloat(e);if(void 0!==l[e])return l[e]}return parseFloat(e)})),s===i&&r.push(1),a=d||void 0===r[c]?1:r[c],r=r.slice(0,c)}else e.length>10&&/[0-9](?:\s|\/)/.test(e)&&(r=e.match(/([0-9]+)/g).map((function(e){return parseFloat(e)})),t=e.match(/([a-z])/gi).join("").toLowerCase());else isNaN(e)?Array.isArray(e)||e.length?(r=[e[0],e[1],e[2]],t="rgb",a=4===e.length?e[3]:1):e instanceof Object&&(null!=e.r||null!=e.red||null!=e.R?(t="rgb",r=[e.r||e.red||e.R||0,e.g||e.green||e.G||0,e.b||e.blue||e.B||0]):(t="hsl",r=[e.h||e.hue||e.H||0,e.s||e.saturation||e.S||0,e.l||e.lightness||e.L||e.b||e.brightness]),a=e.a||e.alpha||e.opacity||1,null!=e.opacity&&(a/=100)):(t="rgb",r=[e>>>16,(65280&e)>>>8,255&e]);return{space:t,values:r,alpha:a}};const s=function(e){var n;Array.isArray(e)&&e.raw&&(e=String.raw.apply(null,arguments));var t=i(e);if(!t.space)return[];var r=[0,0,0],a="h"===t.space[0]?[360,100,100]:[255,255,255];return(n=Array(3))[0]=Math.min(Math.max(t.values[0],r[0]),a[0]),n[1]=Math.min(Math.max(t.values[1],r[1]),a[1]),n[2]=Math.min(Math.max(t.values[2],r[2]),a[2]),"h"===t.space[0]&&(n=function(e){var n,t,r,a,o,l=e[0]/360,i=e[1]/100,s=e[2]/100,d=0;if(0===i)return[o=255*s,o,o];for(n=2*s-(t=s<.5?s*(1+i):s+i-s*i),a=[0,0,0];d<3;)(r=l+1/3*-(d-1))<0?r++:r>1&&r--,o=6*r<1?n+6*(t-n)*r:2*r<1?t:3*r<2?n+(t-n)*(2/3-r)*6:n,a[d++]=255*o;return a}(n)),n.push(Math.min(Math.max(t.alpha,0),1)),n},d=(e,n,t,r=1)=>{const o=[Math.max(Math.min(Math.round(n[0]+r*Math.max(1,n[0]/100)),255),0),Math.max(Math.min(Math.round(n[1]+r*Math.max(1,n[1]/100)),255),0),Math.max(Math.min(Math.round(n[2]+r*Math.max(1,n[2]/100)),255),0)],l=(0,a.d)(a.r.hex(`rgba(${e.join(",")},1)`),a.r.hex(`rgba(${o.join(",")},1)`)),i=o[0]+o[1]+o[2];return 0===i||765===i||l>t?{background:e,foreground:o,contrast:l}:d(e,o,t,r)},c=new Map,u=(e,n=7)=>{let t=[0,0,0,1],r=[255,255,255,1];"string"==typeof e?(t=s(e),r=t):"object"==typeof e&&null!==e&&"string"==typeof e.background&&"string"==typeof e.foreground&&(t=s(e.background),r="string"==typeof e.foreground?s(e.foreground):t);const o=(299*t[0]+587*t[1]+114*t[2])/1e3>=128?-1:1;const l=((e,n,t,r=1)=>{if(c.has(e))return c.get(e);const a=d(e,n,t,r);return c.set(e,a),a})([t[0],t[1],t[2]],[r[0],r[1],r[2]],n,o);return r=[...l.foreground,1],{background:a.r.hex(`rgba(${t.join(",")})`),foreground:a.r.hex(`rgba(${r.join(",")})`),contrast:l.contrast}},h=/^#((\d|[a-f]){8}|(\d|[a-f]){6}|(\d|[a-f]){3,4})$/i;function g(e){if(e)if("string"==typeof e){if(function(e){return h.test(e)}(e))return{type:"string",valid:!0,value:e};{const n=function(e){if(e.startsWith("{"))try{const n=JSON.parse(e);if(b(n))return{type:"ColorPair",value:n}}catch(e){return{type:null,value:null}}return{type:null,value:null}}(e);if(n.value)return{type:n.type,valid:!0,value:n.value}}}else{const n=e;if(b(n))return{type:"ColorPair",valid:!0,value:n}}return{type:null,valid:!1,value:""}}function b(e){return!("object"!=typeof e||!e||"string"!=typeof e.backgroundColor||!("string"==typeof e.foregroundColor||e.foregroundColor&&"string"==typeof e.foregroundColor.primary&&"string"==typeof e.foregroundColor.secondary&&"string"==typeof e.foregroundColor.neutral))}function p(e){const n=g(e);switch(n.type){case null:return!1;case"string":case"ColorPair":return n.valid}}const f=(e,n,t)=>{(0,a.w)(e,"_color",p,new Set(["rgb in hex","ColorPair"]),n,t)},m=e=>{var n;let t;const o=g(e);switch(o.type){case"string":t=u(o.value);break;case"ColorPair":{const e=o.value;let r="";"string"==typeof e.foregroundColor?r=e.foregroundColor:(null===(n=e.foregroundColor)||void 0===n?void 0:n.primary)&&(r=e.foregroundColor.primary),r&&"string"==typeof r||(r="#fff"),t=u({background:e.backgroundColor,foreground:r});break}case null:r.L.warn(`_color was empty or invalid (${JSON.stringify(e)})`,{forceLog:!0}),t=u({background:"#000",foreground:"#000"})}return t.contrast<7&&(0,a.a)(`[KolBadge] The contrast of ${t.contrast} (≥7, AAA) is to low, between the color pair ${t.background} and ${t.foreground}.`),{backgroundColor:t.background,foregroundColor:t.foreground}}},5374:(e,n,t)=>{t.d(n,{t:()=>o});var r=t(6607),a=t(7177);let o=(e,n)=>{var t;return(null!==(t=(0,r.g)())&&void 0!==t?t:(0,r.i)("de")).translate(e,n)};"test"===a.p&&(o=e=>e)},7177:(e,n,t)=>{t.d(n,{b:()=>l,h:()=>a,p:()=>r,s:()=>o});let r="development";try{r="production"}catch(e){r="production"}const a=(e,n,t)=>{if(e&&n&&"string"==typeof t){const r=e.querySelector(`[slot="${t}"]`);r&&n.appendChild(r)}},o=e=>""===e,l=(e,n)=>e||n||""},9768:(e,n,t)=>{t.r(n),t.d(n,{kol_kolibri:()=>i});var r=t(7664),a=t(1847),o=t(5374),l=t(2741);const i=class{constructor(e){(0,r.r)(this,e),this.handleColorChange=(e,n)=>{if("string"==typeof e){const t=(0,a.c)(e);n.set("_color",{red:t[0],green:t[1],blue:t[2]})}else(0,l.j)("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._color="#003c78",this._labeled=!0,this.state={_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const e=`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return(0,r.h)(r.H,{key:"44c7547a3ab268dee95ed8008ab99a39716781d9",class:"kol-kolibri"},(0,r.h)("svg",{key:"a145606f95c961c36c8fe27b25231b3458960293",role:"img","aria-label":(0,o.t)("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:e},(0,r.h)("path",{key:"730ed71a8afe95b95a651ad97c9545e4f995e552",d:"M353 322L213 304V434L353 322Z"}),(0,r.h)("path",{key:"98f8daab560e8b82a0f8b8e0cc3752bd59e49082",d:"M209 564V304L149 434L209 564Z"}),(0,r.h)("path",{key:"1e88adbf107ed979730950ab2dd4389578f8fabd",d:"M357 316L417 250L361 210L275 244L357 316Z"}),(0,r.h)("path",{key:"8d6631800b256961d0d2e05c0cfee508e01b3cea",d:"M329 218L237 92L250 222L272 241L329 218Z"}),(0,r.h)("path",{key:"ed4c69b401c8ce1cdee7e109b491a00d6bdafb6b",d:"M353 318L35 36L213 300L353 318Z"}),(0,r.h)("path",{key:"e4c892a3db75a4200bfa004826f94fa1cefd352e",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&(0,r.h)("text",{key:"967c204add206cc23d667cf264294ff415469136",x:"250",y:"525",fill:e},"KoliBri")))}validateColor(e){(0,a.v)(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){(0,l.b)(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:["validateColor"],_labeled:["validateLabeled"]}}};i.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\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 * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\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 :host {\n display: inline-block;\n }\n text {\n font-size: calc(90rem / var(--kolibri-root-font-size, 16));\n letter-spacing: normal;\n word-spacing: normal;\n }\n svg {\n max-height: 100%;\n }\n}"}}}]);
|
|
2
|
+
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9768],{1847:(e,n,t)=>{t.d(n,{c:()=>s,h:()=>m,v:()=>f});var r=t(5838),a=t(2741),o={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]},l={red:0,orange:60,yellow:120,green:180,blue:240,purple:300},i=function(e){var n,t,r=[],a=1;if("string"==typeof e)if(e=e.toLowerCase(),o[e])r=o[e].slice(),t="rgb";else if("transparent"===e)a=0,t="rgb",r=[0,0,0];else if(/^#[A-Fa-f0-9]+$/.test(e)){var i=e.slice(1);a=1,(c=i.length)<=4?(r=[parseInt(i[0]+i[0],16),parseInt(i[1]+i[1],16),parseInt(i[2]+i[2],16)],4===c&&(a=parseInt(i[3]+i[3],16)/255)):(r=[parseInt(i[0]+i[1],16),parseInt(i[2]+i[3],16),parseInt(i[4]+i[5],16)],8===c&&(a=parseInt(i[6]+i[7],16)/255)),r[0]||(r[0]=0),r[1]||(r[1]=0),r[2]||(r[2]=0),t="rgb"}else if(n=/^((?:rgb|hs[lvb]|hwb|cmyk?|xy[zy]|gray|lab|lchu?v?|[ly]uv|lms)a?)\s*\(([^\)]*)\)/.exec(e)){var s=n[1],d="rgb"===s;t=i=s.replace(/a$/,"");var c="cmyk"===i?4:"gray"===i?1:3;r=n[2].trim().split(/\s*[,\/]\s*|\s+/).map((function(e,n){if(/%$/.test(e))return n===c?parseFloat(e)/100:"rgb"===i?255*parseFloat(e)/100:parseFloat(e);if("h"===i[n]){if(/deg$/.test(e))return parseFloat(e);if(void 0!==l[e])return l[e]}return parseFloat(e)})),s===i&&r.push(1),a=d||void 0===r[c]?1:r[c],r=r.slice(0,c)}else e.length>10&&/[0-9](?:\s|\/)/.test(e)&&(r=e.match(/([0-9]+)/g).map((function(e){return parseFloat(e)})),t=e.match(/([a-z])/gi).join("").toLowerCase());else isNaN(e)?Array.isArray(e)||e.length?(r=[e[0],e[1],e[2]],t="rgb",a=4===e.length?e[3]:1):e instanceof Object&&(null!=e.r||null!=e.red||null!=e.R?(t="rgb",r=[e.r||e.red||e.R||0,e.g||e.green||e.G||0,e.b||e.blue||e.B||0]):(t="hsl",r=[e.h||e.hue||e.H||0,e.s||e.saturation||e.S||0,e.l||e.lightness||e.L||e.b||e.brightness]),a=e.a||e.alpha||e.opacity||1,null!=e.opacity&&(a/=100)):(t="rgb",r=[e>>>16,(65280&e)>>>8,255&e]);return{space:t,values:r,alpha:a}};const s=function(e){var n;Array.isArray(e)&&e.raw&&(e=String.raw.apply(null,arguments));var t=i(e);if(!t.space)return[];var r=[0,0,0],a="h"===t.space[0]?[360,100,100]:[255,255,255];return(n=Array(3))[0]=Math.min(Math.max(t.values[0],r[0]),a[0]),n[1]=Math.min(Math.max(t.values[1],r[1]),a[1]),n[2]=Math.min(Math.max(t.values[2],r[2]),a[2]),"h"===t.space[0]&&(n=function(e){var n,t,r,a,o,l=e[0]/360,i=e[1]/100,s=e[2]/100,d=0;if(0===i)return[o=255*s,o,o];for(n=2*s-(t=s<.5?s*(1+i):s+i-s*i),a=[0,0,0];d<3;)(r=l+1/3*-(d-1))<0?r++:r>1&&r--,o=6*r<1?n+6*(t-n)*r:2*r<1?t:3*r<2?n+(t-n)*(2/3-r)*6:n,a[d++]=255*o;return a}(n)),n.push(Math.min(Math.max(t.alpha,0),1)),n},d=(e,n,t,r=1)=>{const o=[Math.max(Math.min(Math.round(n[0]+r*Math.max(1,n[0]/100)),255),0),Math.max(Math.min(Math.round(n[1]+r*Math.max(1,n[1]/100)),255),0),Math.max(Math.min(Math.round(n[2]+r*Math.max(1,n[2]/100)),255),0)],l=(0,a.d)(a.r.hex(`rgba(${e.join(",")},1)`),a.r.hex(`rgba(${o.join(",")},1)`)),i=o[0]+o[1]+o[2];return 0===i||765===i||l>t?{background:e,foreground:o,contrast:l}:d(e,o,t,r)},c=new Map,u=(e,n=7)=>{let t=[0,0,0,1],r=[255,255,255,1];"string"==typeof e?(t=s(e),r=t):"object"==typeof e&&null!==e&&"string"==typeof e.background&&"string"==typeof e.foreground&&(t=s(e.background),r="string"==typeof e.foreground?s(e.foreground):t);const o=(299*t[0]+587*t[1]+114*t[2])/1e3>=128?-1:1;const l=((e,n,t,r=1)=>{if(c.has(e))return c.get(e);const a=d(e,n,t,r);return c.set(e,a),a})([t[0],t[1],t[2]],[r[0],r[1],r[2]],n,o);return r=[...l.foreground,1],{background:a.r.hex(`rgba(${t.join(",")})`),foreground:a.r.hex(`rgba(${r.join(",")})`),contrast:l.contrast}},h=/^#((\d|[a-f]){8}|(\d|[a-f]){6}|(\d|[a-f]){3,4})$/i;function g(e){if(e)if("string"==typeof e){if(function(e){return h.test(e)}(e))return{type:"string",valid:!0,value:e};{const n=function(e){if(e.startsWith("{"))try{const n=JSON.parse(e);if(b(n))return{type:"ColorPair",value:n}}catch(e){return{type:null,value:null}}return{type:null,value:null}}(e);if(n.value)return{type:n.type,valid:!0,value:n.value}}}else{const n=e;if(b(n))return{type:"ColorPair",valid:!0,value:n}}return{type:null,valid:!1,value:""}}function b(e){return!("object"!=typeof e||!e||"string"!=typeof e.backgroundColor||!("string"==typeof e.foregroundColor||e.foregroundColor&&"string"==typeof e.foregroundColor.primary&&"string"==typeof e.foregroundColor.secondary&&"string"==typeof e.foregroundColor.neutral))}function p(e){const n=g(e);switch(n.type){case null:return!1;case"string":case"ColorPair":return n.valid}}const f=(e,n,t)=>{(0,a.w)(e,"_color",p,new Set(["rgb in hex","ColorPair"]),n,t)},m=e=>{var n;let t;const o=g(e);switch(o.type){case"string":t=u(o.value);break;case"ColorPair":{const e=o.value;let r="";"string"==typeof e.foregroundColor?r=e.foregroundColor:(null===(n=e.foregroundColor)||void 0===n?void 0:n.primary)&&(r=e.foregroundColor.primary),r&&"string"==typeof r||(r="#fff"),t=u({background:e.backgroundColor,foreground:r});break}case null:r.L.warn(`_color was empty or invalid (${JSON.stringify(e)})`,{forceLog:!0}),t=u({background:"#000",foreground:"#000"})}return t.contrast<7&&(0,a.a)(`[KolBadge] The contrast of ${t.contrast} (≥7, AAA) is to low, between the color pair ${t.background} and ${t.foreground}.`),{backgroundColor:t.background,foregroundColor:t.foreground}}},5374:(e,n,t)=>{t.d(n,{t:()=>o});var r=t(6607),a=t(7177);let o=(e,n)=>{var t;return(null!==(t=(0,r.g)())&&void 0!==t?t:(0,r.i)("de")).translate(e,n)};"test"===a.p&&(o=e=>e)},7177:(e,n,t)=>{t.d(n,{b:()=>l,h:()=>a,p:()=>r,s:()=>o});let r="development";try{r="production"}catch(e){r="production"}const a=(e,n,t)=>{if(e&&n&&"string"==typeof t){const r=e.querySelector(`[slot="${t}"]`);r&&n.appendChild(r)}},o=e=>""===e,l=(e,n)=>e||n||""},9768:(e,n,t)=>{t.r(n),t.d(n,{kol_kolibri:()=>i});var r=t(6630),a=t(1847),o=t(5374),l=t(2741);const i=class{constructor(e){(0,r.r)(this,e),this.handleColorChange=(e,n)=>{if("string"==typeof e){const t=(0,a.c)(e);n.set("_color",{red:t[0],green:t[1],blue:t[2]})}else(0,l.j)("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._color="#003c78",this._labeled=!0,this.state={_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const e=`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return(0,r.h)(r.H,{key:"44c7547a3ab268dee95ed8008ab99a39716781d9",class:"kol-kolibri"},(0,r.h)("svg",{key:"a145606f95c961c36c8fe27b25231b3458960293",role:"img","aria-label":(0,o.t)("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:e},(0,r.h)("path",{key:"730ed71a8afe95b95a651ad97c9545e4f995e552",d:"M353 322L213 304V434L353 322Z"}),(0,r.h)("path",{key:"98f8daab560e8b82a0f8b8e0cc3752bd59e49082",d:"M209 564V304L149 434L209 564Z"}),(0,r.h)("path",{key:"1e88adbf107ed979730950ab2dd4389578f8fabd",d:"M357 316L417 250L361 210L275 244L357 316Z"}),(0,r.h)("path",{key:"8d6631800b256961d0d2e05c0cfee508e01b3cea",d:"M329 218L237 92L250 222L272 241L329 218Z"}),(0,r.h)("path",{key:"ed4c69b401c8ce1cdee7e109b491a00d6bdafb6b",d:"M353 318L35 36L213 300L353 318Z"}),(0,r.h)("path",{key:"e4c892a3db75a4200bfa004826f94fa1cefd352e",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&(0,r.h)("text",{key:"967c204add206cc23d667cf264294ff415469136",x:"250",y:"525",fill:e},"KoliBri")))}validateColor(e){(0,a.v)(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){(0,l.b)(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:["validateColor"],_labeled:["validateLabeled"]}}};i.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\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 * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\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 .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n text {\n font-size: calc(90rem / var(--kolibri-root-font-size, 16));\n letter-spacing: normal;\n word-spacing: normal;\n }\n svg {\n max-height: 100%;\n }\n}"}}}]);
|
package/dist/9818.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see 9818.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9818],{1285:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(9027),o=t(2741);const a=(n,e)=>{(0,o.w)(n,"_level",(n=>"number"==typeof n&&i.h.includes(n)),new Set([`Number {${i.h.join(", ")}`]),e,{defaultValue:1,required:!0})}},5592:(n,e,t)=>{t.d(e,{K:()=>s});var i=t(9659),o=t(7664),a=t(7058),l=t(8133);const s=(n,e)=>{const{id:t,class:s,label:r,level:d=1,disabled:c,open:h,onClick:p,HeadingProps:u={},HeadingButtonProps:b={},ContentProps:f={}}=n,v=(0,i._)(n,["id","class","label","level","disabled","open","onClick","HeadingProps","HeadingButtonProps","ContentProps"]),m=h?"remove":"add";return(0,o.h)("div",Object.assign({id:t,class:(0,a.c)("collapsible",{disabled:!0===c,open:!0===h},s)},v),(0,o.h)(l.b,{ref:null==u?void 0:u.ref,_label:"",_level:d,class:(0,a.c)("collapsible__heading",null==u?void 0:u.class)},(0,o.h)(l.c,{class:(0,a.c)("collapsible__heading-button",null==b?void 0:b.class),ref:null==b?void 0:b.ref,slot:"expert",_ariaControls:`${t}-control`,_ariaExpanded:h,_disabled:c,_icons:(null==b?void 0:b._icons)||`codicon codicon-${m}`,_label:r,_on:{onClick:p}})),(0,o.h)("div",{class:(0,a.c)("collapsible__wrapper",null==f?void 0:f.wrapperClass)},(0,o.h)("div",{class:(0,a.c)("collapsible__wrapper-animation",null==f?void 0:f.animationClass)},(0,o.h)("div",{"aria-hidden":!1===h?"true":void 0,class:(0,a.c)("collapsible__content",null==f?void 0:f.class),id:`${t}-control`},e))))}},6178:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(2741);const o=(n,e,t)=>{(0,i.b)(n,"_open",e,t)}},7058:(n,e,t)=>{function i(n){var e,t,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(e=0;e<a;e++)n[e]&&(t=i(n[e]))&&(o&&(o+=" "),o+=t)}else for(t in n)n[t]&&(o&&(o+=" "),o+=t);return o}function o(){for(var n,e,t=0,o="",a=arguments.length;t<a;t++)(n=arguments[t])&&(e=i(n))&&(o&&(o+=" "),o+=e);return o}t.d(e,{c:()=>o})},7177:(n,e,t)=>{t.d(e,{b:()=>l,h:()=>o,p:()=>i,s:()=>a});let i="development";try{i="production"}catch(n){i="production"}const o=(n,e,t)=>{if(n&&e&&"string"==typeof t){const i=n.querySelector(`[slot="${t}"]`);i&&e.appendChild(i)}},a=n=>""===n,l=(n,e)=>n||e||""},8445:(n,e,t)=>{function i(n){n.stopImmediatePropagation(),n.stopPropagation()}function o(n,e,t){e&&function(n,e,t){const i=n.dispatchEvent(function(n,e){return new CustomEvent(`kol-${n}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,t))}(e,n,t)}function a(n){n.preventDefault(),i(n)}t.d(e,{p:()=>a,s:()=>i,t:()=>o})},9021:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(2741);const o=(n,e)=>{(0,i.b)(n,"_disabled",e,{hooks:{afterPatch:n=>{!0===n&&(0,i.c)()}}})}},9027:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>o,v:()=>c});var i=t(2741);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),c=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,o,a)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,o,a)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},h=c},9659:(n,e,t)=>{function i(n,e){var t={};for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&e.indexOf(i)<0&&(t[i]=n[i]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(n);o<i.length;o++)e.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(n,i[o])&&(t[i[o]]=n[i[o]])}return t}t.d(e,{_:()=>i}),"function"==typeof SuppressedError&&SuppressedError},9805:(n,e,t)=>{t.d(e,{i:()=>s,n:()=>d,r:()=>r});var i=t(7664),o=t(7177),a=t(5838);const l=()=>{let n=(0,a.d)().KoliBri;return void 0===n&&(n={},Object.defineProperty((0,a.d)(),"KoliBri",{value:n,writable:!1})),n},s=()=>{(()=>{const n=(0,a.g)().querySelector('meta[name="kolibri"]');if(n&&n.hasAttribute("content")){const e=n.getAttribute("content");"string"==typeof e&&((0,a.s)(e.includes("dev-mode=true")),(0,a.b)(e.includes("experimental-mode=true")),(0,a.c)(e.includes("color-contrast-analysis=true")))}})(),a.L.debug(`\n,--. ,--. ,--. ,--. ,-----. ,--.\n| .' / ,---. | | \`--' | |) /_ ,--.--. \`--'\n| . ' | .-. | | | ,--. | .-. \\ | .--' ,--.\n| |\\ \\ | '-' | | | | | | '--' / | | | |\n\`--' \`--´ \`---´ \`--' \`--' \`------´ \`--' \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${i.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==l().adviceShown&&(Object.defineProperty(l(),"adviceShown",{get:function(){return!0}}),a.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let d=()=>Math.floor(16777215*Math.random()).toString(16);"test"===o.p&&(d=()=>"nonce")},9818:(n,e,t)=>{t.r(e),t.d(e,{kol_details:()=>u});var i=t(7664),o=t(9805),a=t(1285),l=t(8445),s=t(5592),r=t(2741),d=t(9021),c=t(9027),h=t(6178),p=(n,e,t)=>new Promise(((i,o)=>{var a=n=>{try{s(t.next(n))}catch(n){o(n)}},l=n=>{try{s(t.throw(n))}catch(n){o(n)}},s=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,l);s((t=t.apply(n,e)).next())}));const u=class{constructor(n){(0,i.r)(this,n),this.nonce=(0,o.n)(),this.catchRef=n=>{this.buttonWcRef=n},this.handleOnClick=n=>{this._open=!this._open,clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var e,t;(0,l.t)("toggle",this.host,this._open),null===(t=null===(e=this.state._on)||void 0===e?void 0:e.onToggle)||void 0===t||t.call(e,n,Boolean(this._open))}),25)},this._disabled=!1,this._label=void 0,this._level=0,this._on=void 0,this._open=!1,this.state={_label:"",_level:0,_on:{}}}focus(){return p(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return p(this,null,(function*(){var n;yield null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus()}))}render(){const{_open:n,_label:e,_disabled:t,_level:o}=this.state,a="details",l={id:this.nonce,label:e,open:n,disabled:t,level:o,onClick:this.handleOnClick,class:a,HeadingProps:{class:`${a}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${a}__heading-button`,_icons:"codicon codicon-chevron-right"},ContentProps:{class:`${a}__content indented-text`,wrapperClass:`${a}__wrapper`,animationClass:`${a}__wrapper-animation`}};return(0,i.h)(i.H,{key:"bbee06cb38ac7686f2691ab901581bfa01852dd0",class:"kol-details"},(0,i.h)(s.K,Object.assign({key:"86b697b27310457a33f53e27a6a62f5f23527569"},l),(0,i.h)("slot",{key:"ad5028638f68dc91834490cadb9e5072f4f660e9"})))}validateDisabled(n){(0,d.v)(this,n)}validateLabel(n){(0,c.v)(this,n,{required:!0})}validateLevel(n){(0,a.w)(this,n)}validateOn(n){var e;e=n,(0,r.w)(this,"_on",(n=>"object"==typeof n&&null!==n),new Set(["DetailsCallbacksPropType {Events.onToggle}"]),e)}validateOpen(n){(0,h.v)(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}get host(){return(0,i.g)(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};u.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\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 * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\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 :host {\n display: block;\n }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n }\n .collapsible__wrapper {\n display: grid;\n grid-template-rows: 0fr;\n overflow: hidden;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n min-height: 0;\n transition: visibility 0.3s;\n /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n visibility: hidden;\n }\n .open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .open .collapsible__wrapper-animation {\n visibility: visible;\n }\n @media (prefers-reduced-motion) {\n .collapsible__wrapper-animation, .collapsible__wrapper {\n transition-duration: 0s;\n }\n }\n @media print {\n :not(.open) .collapsible__wrapper-animation {\n display: none;\n }\n }\n .collapsible__heading-button button .kol-span-wc {\n justify-items: start;\n }\n}\n@layer kol-component {\n .details__heading-button {\n display: flex;\n }\n .details__heading-button button {\n min-height: auto;\n }\n .details__heading-button button .kol-span-wc .span-label {\n border-bottom-color: grey;\n border-bottom-style: solid;\n }\n .open .details__heading-button .kol-icon::part(icon) {\n transform: rotate(90deg);\n }\n}"}}}]);
|
|
2
|
+
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9818],{654:(n,e,t)=>{t.d(e,{i:()=>s,n:()=>d,r:()=>r});var i=t(6630),o=t(7177),a=t(5838);const l=()=>{let n=(0,a.d)().KoliBri;return void 0===n&&(n={},Object.defineProperty((0,a.d)(),"KoliBri",{value:n,writable:!1})),n},s=()=>{(()=>{const n=(0,a.g)().querySelector('meta[name="kolibri"]');if(n&&n.hasAttribute("content")){const e=n.getAttribute("content");"string"==typeof e&&((0,a.s)(e.includes("dev-mode=true")),(0,a.b)(e.includes("experimental-mode=true")),(0,a.c)(e.includes("color-contrast-analysis=true")))}})(),a.L.debug(`\n,--. ,--. ,--. ,--. ,-----. ,--.\n| .' / ,---. | | \`--' | |) /_ ,--.--. \`--'\n| . ' | .-. | | | ,--. | .-. \\ | .--' ,--.\n| |\\ \\ | '-' | | | | | | '--' / | | | |\n\`--' \`--´ \`---´ \`--' \`--' \`------´ \`--' \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${i.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!0!==l().adviceShown&&(Object.defineProperty(l(),"adviceShown",{get:function(){return!0}}),a.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let d=()=>Math.floor(16777215*Math.random()).toString(16);"test"===o.p&&(d=()=>"nonce")},1285:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(9027),o=t(2741);const a=(n,e)=>{(0,o.w)(n,"_level",(n=>"number"==typeof n&&i.h.includes(n)),new Set([`Number {${i.h.join(", ")}`]),e,{defaultValue:1,required:!0})}},6178:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(2741);const o=(n,e,t)=>{(0,i.b)(n,"_open",e,t)}},6292:(n,e,t)=>{t.d(e,{K:()=>s});var i=t(9659),o=t(6630),a=t(7058),l=t(8133);const s=(n,e)=>{const{id:t,class:s,label:r,level:d=1,disabled:c,open:h,onClick:p,HeadingProps:u={},HeadingButtonProps:b={},ContentProps:f={}}=n,v=(0,i._)(n,["id","class","label","level","disabled","open","onClick","HeadingProps","HeadingButtonProps","ContentProps"]),m=h?"remove":"add";return(0,o.h)("div",Object.assign({id:t,class:(0,a.c)("collapsible",{disabled:!0===c,open:!0===h},s)},v),(0,o.h)(l.b,{ref:null==u?void 0:u.ref,_label:"",_level:d,class:(0,a.c)("collapsible__heading",null==u?void 0:u.class)},(0,o.h)(l.c,{class:(0,a.c)("collapsible__heading-button",null==b?void 0:b.class),ref:null==b?void 0:b.ref,slot:"expert",_ariaControls:`${t}-control`,_ariaExpanded:h,_disabled:c,_icons:(null==b?void 0:b._icons)||`codicon codicon-${m}`,_label:r,_on:{onClick:p}})),(0,o.h)("div",{class:(0,a.c)("collapsible__wrapper",null==f?void 0:f.wrapperClass)},(0,o.h)("div",{class:(0,a.c)("collapsible__wrapper-animation",null==f?void 0:f.animationClass)},(0,o.h)("div",{"aria-hidden":!1===h?"true":void 0,class:(0,a.c)("collapsible__content",null==f?void 0:f.class),id:`${t}-control`},e))))}},7058:(n,e,t)=>{function i(n){var e,t,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(e=0;e<a;e++)n[e]&&(t=i(n[e]))&&(o&&(o+=" "),o+=t)}else for(t in n)n[t]&&(o&&(o+=" "),o+=t);return o}function o(){for(var n,e,t=0,o="",a=arguments.length;t<a;t++)(n=arguments[t])&&(e=i(n))&&(o&&(o+=" "),o+=e);return o}t.d(e,{c:()=>o})},7177:(n,e,t)=>{t.d(e,{b:()=>l,h:()=>o,p:()=>i,s:()=>a});let i="development";try{i="production"}catch(n){i="production"}const o=(n,e,t)=>{if(n&&e&&"string"==typeof t){const i=n.querySelector(`[slot="${t}"]`);i&&e.appendChild(i)}},a=n=>""===n,l=(n,e)=>n||e||""},8445:(n,e,t)=>{function i(n){n.stopImmediatePropagation(),n.stopPropagation()}function o(n,e,t){e&&function(n,e,t){const i=n.dispatchEvent(function(n,e){return new CustomEvent(`kol-${n}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,t))}(e,n,t)}function a(n){n.preventDefault(),i(n)}t.d(e,{p:()=>a,s:()=>i,t:()=>o})},9021:(n,e,t)=>{t.d(e,{v:()=>o});var i=t(2741);const o=(n,e)=>{(0,i.b)(n,"_disabled",e,{hooks:{afterPatch:n=>{!0===n&&(0,i.c)()}}})}},9027:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>s,c:()=>r,h:()=>o,v:()=>c});var i=t(2741);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),c=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,o,a)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,o,a)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},h=c},9659:(n,e,t)=>{function i(n,e){var t={};for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&e.indexOf(i)<0&&(t[i]=n[i]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(n);o<i.length;o++)e.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(n,i[o])&&(t[i[o]]=n[i[o]])}return t}t.d(e,{_:()=>i}),"function"==typeof SuppressedError&&SuppressedError},9818:(n,e,t)=>{t.r(e),t.d(e,{kol_details:()=>u});var i=t(6630),o=t(654),a=t(1285),l=t(8445),s=t(6292),r=t(2741),d=t(9021),c=t(9027),h=t(6178),p=(n,e,t)=>new Promise(((i,o)=>{var a=n=>{try{s(t.next(n))}catch(n){o(n)}},l=n=>{try{s(t.throw(n))}catch(n){o(n)}},s=n=>n.done?i(n.value):Promise.resolve(n.value).then(a,l);s((t=t.apply(n,e)).next())}));const u=class{constructor(n){(0,i.r)(this,n),this.nonce=(0,o.n)(),this.catchRef=n=>{this.buttonWcRef=n},this.handleOnClick=n=>{this._open=!this._open,clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var e,t;(0,l.t)("toggle",this.host,this._open),null===(t=null===(e=this.state._on)||void 0===e?void 0:e.onToggle)||void 0===t||t.call(e,n,Boolean(this._open))}),25)},this._disabled=!1,this._label=void 0,this._level=0,this._on=void 0,this._open=!1,this.state={_label:"",_level:0,_on:{}}}focus(){return p(this,null,(function*(){yield this.kolFocus()}))}kolFocus(){return p(this,null,(function*(){var n;yield null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus()}))}render(){const{_open:n,_label:e,_disabled:t,_level:o}=this.state,a="details",l={id:this.nonce,label:e,open:n,disabled:t,level:o,onClick:this.handleOnClick,class:a,HeadingProps:{class:`${a}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${a}__heading-button`,_icons:"codicon codicon-chevron-right"},ContentProps:{class:`${a}__content indented-text`,wrapperClass:`${a}__wrapper`,animationClass:`${a}__wrapper-animation`}};return(0,i.h)(i.H,{key:"bbee06cb38ac7686f2691ab901581bfa01852dd0",class:"kol-details"},(0,i.h)(s.K,Object.assign({key:"86b697b27310457a33f53e27a6a62f5f23527569"},l),(0,i.h)("slot",{key:"ad5028638f68dc91834490cadb9e5072f4f660e9"})))}validateDisabled(n){(0,d.v)(this,n)}validateLabel(n){(0,c.v)(this,n,{required:!0})}validateLevel(n){(0,a.w)(this,n)}validateOn(n){var e;e=n,(0,r.w)(this,"_on",(n=>"object"==typeof n&&null!==n),new Set(["DetailsCallbacksPropType {Events.onToggle}"]),e)}validateOpen(n){(0,h.v)(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}get host(){return(0,i.g)(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};u.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\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 * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\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 .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n }\n .collapsible__wrapper {\n display: grid;\n grid-template-rows: 0fr;\n overflow: hidden;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n min-height: 0;\n transition: visibility 0.3s;\n /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n visibility: hidden;\n }\n .open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .open .collapsible__wrapper-animation {\n visibility: visible;\n }\n @media (prefers-reduced-motion) {\n .collapsible__wrapper-animation, .collapsible__wrapper {\n transition-duration: 0s;\n }\n }\n @media print {\n :not(.open) .collapsible__wrapper-animation {\n display: none;\n }\n }\n .collapsible__heading-button button .kol-span-wc {\n justify-items: start;\n }\n}\n@layer kol-component {\n .details__heading-button {\n display: flex;\n }\n .details__heading-button button {\n min-height: auto;\n }\n .details__heading-button button .kol-span-wc .span-label {\n border-bottom-color: grey;\n border-bottom-style: solid;\n }\n .open .details__heading-button .kol-icon::part(icon) {\n transform: rotate(90deg);\n }\n}"}}}]);
|
package/dist/989.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see 989.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[989],{78:(t,n,e)=>{e.d(n,{E:()=>d,a:()=>r,b:()=>h,c:()=>s,d:()=>a,v:()=>l});var i=e(2741),o=e(7257);const a=(t,n)=>{(0,i.w)(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["TableCallbacksPropType {Events.onSort, Events.onSelectionChange}"]),n)},s=(t,n)=>{(0,i.w)(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["TableStatefulCallbacksPropType {Events.onSelectionChange}"]),n)},l=(t,n,e)=>{(0,i.q)(n,(()=>{(0,i.o)(n,(()=>{void 0===n&&(n=[]);try{n=(0,i.p)(n)}catch(t){}Array.isArray(n)&&n.every((t=>"object"==typeof t&&null!==t))&&(0,i.s)(t,"_data",n,e)}))}))},r=(t,n,e)=>{(0,i.q)(n,(()=>{(0,i.o)(n,(()=>{void 0===n&&(n=[]);try{n=(0,i.p)(n)}catch(t){}Array.isArray(n)&&n.every((t=>"object"==typeof t&&null!==t))&&(0,i.s)(t,"_dataFoot",n,e)}))}))},h=(t,n)=>{var e;(e="string"==typeof n?(()=>{try{return(0,i.p)(n)}catch(t){return}})():n)&&(0,o.a)(e)&&"function"==typeof e.label&&(!e.selectedKeys||Array.isArray(e.selectedKeys))&&(0,i.s)(t,"_selection",n)};var d,c;(c=d||(d={})).onBlur="onBlur",c.onChange="onChange",c.onClick="onClick",c.onDblClick="onDblClick",c.onFocus="onFocus",c.onInput="onInput",c.onKeyDown="onKeyDown",c.onKeyPress="onKeyPress",c.onKeyUp="onKeyUp",c.onMouseDown="onMouseDown",c.onMouseMove="onMouseMove",c.onMouseOut="onMouseOut",c.onMouseOver="onMouseOver",c.onMouseUp="onMouseUp",c.onReset="onReset",c.onSelect="onSelect",c.onSort="onSort",c.onSelectionChange="onSelectionChange",c.onSubmit="onSubmit",c.onToggle="onToggle",c.onClose="onClose"},989:(t,n,e)=>{e.r(n),e.d(n,{kol_table_stateful:()=>u});var i=e(7664),o=e(5374),a=e(8133),s=e(8445),l=e(78),r=e(2741),h=e(9027);const d=["top","bottom","both"],c=[10,20,50,100],p=t=>!0===t||""===t||"object"==typeof t&&null!==t,u=class{constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortDirections=new Map,this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"},this.setSortDirection=(t,n)=>{this.sortDirections.clear(),this.sortDirections.set(t,n),this.sortFunction=t},this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),(0,r.s)(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),(0,r.s)(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),(0,r.s)(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),(0,r.s)(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=(t=this.sortedColumnHead)=>{if(this.disableSort)return void(0,r.s)(this,"_sortedData",this.state._data);let n=this.state._data;if(this.sortData.length>0)n=this.state._data.sort(((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],o=i.compareFn(t,n);if(0!==o)return"ASC"===i.direction?o:-o}return 0}));else if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"ASC":n=this.sortFunction([...this.state._data]),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"ASC"};break;case"DESC":n=this.sortFunction([...this.state._data]).reverse(),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"DESC"};break;default:n=[...this.state._data],this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"}}(0,r.s)(this,"_sortedData",n)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){(0,r.w)(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){(0,l.v)(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){(0,l.a)(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){((t,n)=>{(0,r.w)(t,"_paginationPosition",(t=>"string"==typeof t&&d.includes(t)),new Set([`PaginationPositionPropType {${d.join(", ")}`]),n,{defaultValue:"bottom"})})(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex((n=>n.key===t.key));if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData(t)}else if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData(t)}}validateHeaders(t){(0,r.q)(t,(()=>{(0,r.o)(t,(()=>{try{t=(0,r.p)(t)}catch(t){}(0,r.w)(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,o;const a=t=>{let n=!1;t.forEach((t=>{const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||("function"==typeof t.compareFn?((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0):"function"==typeof t.sort&&(this.setSortDirection(t.sort,i),setTimeout((()=>this.updateSortedData({key:e,label:t.label,sortDirection:i})))))})),n&&setTimeout((()=>this.updateSortedData()))},s=t;null===(n=s.horizontal)||void 0===n||n.forEach(a),null===(e=s.vertical)||void 0===e||e.forEach(a),s.horizontal&&s.vertical&&(null===(i=s.horizontal)||void 0===i?void 0:i.length)>0&&(null===(o=s.vertical)||void 0===o?void 0:o.length)>0&&(this.disableSort=!0,(0,r.j)("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){(0,h.v)(this,t,{required:!0})}validateMinWidth(t){(0,r.i)(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){(0,l.b)(this,t)}validateOn(t){(0,l.c)(this,t)}validatePagination(t){try{t=(0,r.p)(t)}catch(t){}this.showPagination=p(t),(0,r.w)(this,"_pagination",p,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener("kol-selection-change",this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener("kol-selection-change",this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateOn(this._on)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(){return(0,i.h)("div",{class:"pagination"},(0,i.h)("span",null,(0,o.t)("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),(0,i.h)("div",null,(0,i.h)(a.q,{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||c,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:(0,o.t)("kol-table-pagination-label",{placeholders:{label:this.state._label}})})))}getHeaderCellSortState(t){if(!this.disableSort&&("function"==typeof t.compareFn||"function"==typeof t.sort)){if(t.key===this.sortedColumnHead.key)return this.sortedColumnHead.sortDirection;if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",o=this.state._sortedData.filter((n=>t.includes(n[i])));if(!1===(null==e?void 0:e.multiple))return o[0];if(i)return o}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:"object"==typeof n?n:[n]})}));const o=this.getSelectedData(n);(0,s.t)("selection-change",this.host,o),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[l.E.onSelectionChange])&&this.state._on[l.E.onSelectionChange](t,o)}getSelection(){return t=this,n=function*(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)},new Promise(((e,i)=>{var o=t=>{try{s(n.next(t))}catch(t){i(t)}},a=t=>{try{s(n.throw(t))}catch(t){i(t)}},s=t=>t.done?e(t.value):Promise.resolve(t.value).then(o,a);s((n=n.apply(t,null)).next())}));var t,n}render(){var t,n,e,o;const s=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(n=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==n?n:10:this.state._sortedData.length,this.state._pagination._page||1),l="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,r="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,h={horizontal:null===(e=this.state._headers.horizontal)||void 0===e?void 0:e.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))),vertical:null===(o=this.state._headers.vertical)||void 0===o?void 0:o.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)})))))};return(0,i.h)(i.H,{key:"7c21134b8aab6db75f0f949a7c7b7459bed1a9a0",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&l,(0,i.h)(a.r,{key:"f7a5bdad22b63b5e0ba2881f1ccb64336588635a",ref:this.catchRef,_data:s,_headerCells:h,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection}),this.pageEndSlice>0&&this.showPagination&&r)}get host(){return(0,i.g)(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};u.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\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 * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\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 :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n div.pagination .kol-pagination {\n display: flex;\n flex-wrap: wrap;\n }\n div.pagination,\n div.pagination > div:last-child {\n display: grid;\n place-items: center;\n }\n @media (max-width: 1024px) {\n div.pagination .kol-pagination {\n flex-direction: column;\n }\n }\n @media (min-width: 1024px) {\n div.pagination,\n div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n div.pagination .kol-pagination {\n display: flex;\n }\n }\n}\n@layer kol-component {\n :host,\n .kol-table-stateless-wc {\n display: block;\n }\n .table {\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n }\n table {\n width: 100%;\n }\n caption {\n text-align: start;\n }\n .focus-element {\n font-size: 0;\n }\n .focus-element:focus {\n outline: 0 !important;\n }\n .table:has(.focus-element:focus) {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .table-sort-button .button {\n color: inherit;\n }\n tbody th,\n th.align-left {\n text-align: left;\n }\n tbody th .table-sort-button .button-inner,\n th.align-left .table-sort-button .button-inner {\n justify-items: start;\n }\n th.align-center {\n text-align: center;\n }\n th.align-center .table-sort-button .button-inner {\n justify-items: center;\n }\n th.align-right {\n text-align: right;\n }\n th.align-right .table-sort-button .button-inner {\n justify-items: end;\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: none;\n }\n .selection-header-cell {\n width: 0;\n }\n .selection-cell {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .input label {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .input .icon {\n display: block;\n inset: auto;\n position: absolute;\n z-index: 1;\n }\n .input input {\n appearance: none;\n border-style: solid;\n cursor: pointer;\n margin: 0;\n }\n .input input:before {\n content: \"\";\n }\n .input input[type=checkbox] {\n position: relative;\n display: flex;\n height: calc(var(--a11y-min-size) / 2);\n width: calc(var(--a11y-min-size) / 2);\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 255, 255);\n border-width: 2px;\n line-height: 1.5;\n transition: all 0.5s ease 0s;\n }\n .input input[type=radio] {\n display: flex;\n border-width: 2px;\n border-radius: 100%;\n height: 1.5em;\n min-height: 1.5em;\n min-width: 1.5em;\n padding: 0;\n width: 1.5em;\n }\n .input input[type=radio]:before {\n border-radius: 100%;\n margin: auto;\n height: 0.75em;\n width: 0.75em;\n }\n .input input[type=radio]:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .input input[type=radio]:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n}"}},5374:(t,n,e)=>{e.d(n,{t:()=>a});var i=e(6607),o=e(7177);let a=(t,n)=>{var e;return(null!==(e=(0,i.g)())&&void 0!==e?e:(0,i.i)("de")).translate(t,n)};"test"===o.p&&(a=t=>t)},7177:(t,n,e)=>{e.d(n,{b:()=>s,h:()=>o,p:()=>i,s:()=>a});let i="development";try{i="production"}catch(t){i="production"}const o=(t,n,e)=>{if(t&&n&&"string"==typeof e){const i=t.querySelector(`[slot="${e}"]`);i&&n.appendChild(i)}},a=t=>""===t,s=(t,n)=>t||n||""},7257:(t,n,e)=>{e.d(n,{S:()=>s,a:()=>i,b:()=>a,i:()=>o});const i=t=>"object"==typeof t&&null!==t,o=(t,n=0)=>"string"==typeof t&&t.length>=n,a=t=>{if("object"!=typeof t||null===t)return o(t,1);for(const n in t)if(!1===o(n,1))return!1;return!0},s=new Event("StateChange")},8445:(t,n,e)=>{function i(t){t.stopImmediatePropagation(),t.stopPropagation()}function o(t,n,e){n&&function(t,n,e){const i=t.dispatchEvent(function(t,n){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:n})}(n,e))}(n,t,e)}function a(t){t.preventDefault(),i(t)}e.d(n,{p:()=>a,s:()=>i,t:()=>o})},9027:(t,n,e)=>{e.d(n,{a:()=>c,b:()=>l,c:()=>r,h:()=>o,v:()=>d});var i=e(2741);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,s=/^\d+$/;function l(t,n=1){return function(t){var n;return"string"==typeof t&&(null===(n=t.match(a))||void 0===n?void 0:n.length)||0}(t)>=n}function r(t){return s.test(t)}const h=new Set(["string"]),d=(t,n,e={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),h,n,function(t){var n;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(n,e,o,a)=>{var s,h;"function"==typeof(null===(s=t.hooks)||void 0===s?void 0:s.afterPatch)&&(null===(h=t.hooks)||void 0===h||h.afterPatch(n,e,o,a)),"string"==typeof n&&!1===l(n,3)&&!1===r(n)&&(0,i.a)(`The heading or label ("${n}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof n&&n.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(n=t.hooks)||void 0===n?void 0:n.beforePatch}})}(e))},c=d}}]);
|
|
2
|
+
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[989],{78:(t,n,e)=>{e.d(n,{E:()=>d,a:()=>r,b:()=>h,c:()=>s,d:()=>a,v:()=>l});var i=e(2741),o=e(7257);const a=(t,n)=>{(0,i.w)(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["TableCallbacksPropType {Events.onSort, Events.onSelectionChange}"]),n)},s=(t,n)=>{(0,i.w)(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["TableStatefulCallbacksPropType {Events.onSelectionChange}"]),n)},l=(t,n,e)=>{(0,i.q)(n,(()=>{(0,i.o)(n,(()=>{void 0===n&&(n=[]);try{n=(0,i.p)(n)}catch(t){}Array.isArray(n)&&n.every((t=>"object"==typeof t&&null!==t))&&(0,i.s)(t,"_data",n,e)}))}))},r=(t,n,e)=>{(0,i.q)(n,(()=>{(0,i.o)(n,(()=>{void 0===n&&(n=[]);try{n=(0,i.p)(n)}catch(t){}Array.isArray(n)&&n.every((t=>"object"==typeof t&&null!==t))&&(0,i.s)(t,"_dataFoot",n,e)}))}))},h=(t,n)=>{var e;(e="string"==typeof n?(()=>{try{return(0,i.p)(n)}catch(t){return}})():n)&&(0,o.a)(e)&&"function"==typeof e.label&&(!e.selectedKeys||Array.isArray(e.selectedKeys))&&(0,i.s)(t,"_selection",n)};var d,c;(c=d||(d={})).onBlur="onBlur",c.onChange="onChange",c.onClick="onClick",c.onDblClick="onDblClick",c.onFocus="onFocus",c.onInput="onInput",c.onKeyDown="onKeyDown",c.onKeyPress="onKeyPress",c.onKeyUp="onKeyUp",c.onMouseDown="onMouseDown",c.onMouseMove="onMouseMove",c.onMouseOut="onMouseOut",c.onMouseOver="onMouseOver",c.onMouseUp="onMouseUp",c.onReset="onReset",c.onSelect="onSelect",c.onSort="onSort",c.onSelectionChange="onSelectionChange",c.onSubmit="onSubmit",c.onToggle="onToggle",c.onClose="onClose"},989:(t,n,e)=>{e.r(n),e.d(n,{kol_table_stateful:()=>u});var i=e(6630),o=e(5374),a=e(8133),s=e(8445),l=e(78),r=e(2741),h=e(9027);const d=["top","bottom","both"],c=[10,20,50,100],p=t=>!0===t||""===t||"object"==typeof t&&null!==t,u=class{constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortDirections=new Map,this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"},this.setSortDirection=(t,n)=>{this.sortDirections.clear(),this.sortDirections.set(t,n),this.sortFunction=t},this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),(0,r.s)(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),(0,r.s)(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),(0,r.s)(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),(0,r.s)(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=(t=this.sortedColumnHead)=>{if(this.disableSort)return void(0,r.s)(this,"_sortedData",this.state._data);let n=this.state._data;if(this.sortData.length>0)n=this.state._data.sort(((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],o=i.compareFn(t,n);if(0!==o)return"ASC"===i.direction?o:-o}return 0}));else if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"ASC":n=this.sortFunction([...this.state._data]),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"ASC"};break;case"DESC":n=this.sortFunction([...this.state._data]).reverse(),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"DESC"};break;default:n=[...this.state._data],this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"}}(0,r.s)(this,"_sortedData",n)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){(0,r.w)(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){(0,l.v)(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){(0,l.a)(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){((t,n)=>{(0,r.w)(t,"_paginationPosition",(t=>"string"==typeof t&&d.includes(t)),new Set([`PaginationPositionPropType {${d.join(", ")}`]),n,{defaultValue:"bottom"})})(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex((n=>n.key===t.key));if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData(t)}else if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData(t)}}validateHeaders(t){(0,r.q)(t,(()=>{(0,r.o)(t,(()=>{try{t=(0,r.p)(t)}catch(t){}(0,r.w)(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,o;const a=t=>{let n=!1;t.forEach((t=>{const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||("function"==typeof t.compareFn?((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0):"function"==typeof t.sort&&(this.setSortDirection(t.sort,i),setTimeout((()=>this.updateSortedData({key:e,label:t.label,sortDirection:i})))))})),n&&setTimeout((()=>this.updateSortedData()))},s=t;null===(n=s.horizontal)||void 0===n||n.forEach(a),null===(e=s.vertical)||void 0===e||e.forEach(a),s.horizontal&&s.vertical&&(null===(i=s.horizontal)||void 0===i?void 0:i.length)>0&&(null===(o=s.vertical)||void 0===o?void 0:o.length)>0&&(this.disableSort=!0,(0,r.j)("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){(0,h.v)(this,t,{required:!0})}validateMinWidth(t){(0,r.i)(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){(0,l.b)(this,t)}validateOn(t){(0,l.c)(this,t)}validatePagination(t){try{t=(0,r.p)(t)}catch(t){}this.showPagination=p(t),(0,r.w)(this,"_pagination",p,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener("kol-selection-change",this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener("kol-selection-change",this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateOn(this._on)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(){return(0,i.h)("div",{class:"pagination"},(0,i.h)("span",null,(0,o.t)("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),(0,i.h)("div",null,(0,i.h)(a.q,{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||c,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:(0,o.t)("kol-table-pagination-label",{placeholders:{label:this.state._label}})})))}getHeaderCellSortState(t){if(!this.disableSort&&("function"==typeof t.compareFn||"function"==typeof t.sort)){if(t.key===this.sortedColumnHead.key)return this.sortedColumnHead.sortDirection;if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",o=this.state._sortedData.filter((n=>t.includes(n[i])));if(!1===(null==e?void 0:e.multiple))return o[0];if(i)return o}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:"object"==typeof n?n:[n]})}));const o=this.getSelectedData(n);(0,s.t)("selection-change",this.host,o),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[l.E.onSelectionChange])&&this.state._on[l.E.onSelectionChange](t,o)}getSelection(){return t=this,n=function*(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)},new Promise(((e,i)=>{var o=t=>{try{s(n.next(t))}catch(t){i(t)}},a=t=>{try{s(n.throw(t))}catch(t){i(t)}},s=t=>t.done?e(t.value):Promise.resolve(t.value).then(o,a);s((n=n.apply(t,null)).next())}));var t,n}render(){var t,n,e,o;const s=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(n=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==n?n:10:this.state._sortedData.length,this.state._pagination._page||1),l="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,r="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,h={horizontal:null===(e=this.state._headers.horizontal)||void 0===e?void 0:e.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))),vertical:null===(o=this.state._headers.vertical)||void 0===o?void 0:o.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)})))))};return(0,i.h)(i.H,{key:"12bfa099fdaf127f59d5f1a255b2e6900ada95d2",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&l,(0,i.h)(a.r,{key:"319352d3179ca4eff5008f08a6460341a77f72bc",ref:this.catchRef,_data:s,_headerCells:h,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection}),this.pageEndSlice>0&&this.showPagination&&r)}get host(){return(0,i.g)(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};u.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\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 * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\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 .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n div.pagination .kol-pagination {\n display: flex;\n flex-wrap: wrap;\n }\n div.pagination,\n div.pagination > div:last-child {\n display: grid;\n place-items: center;\n }\n @media (max-width: 1024px) {\n div.pagination .kol-pagination {\n flex-direction: column;\n }\n }\n @media (min-width: 1024px) {\n div.pagination,\n div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n div.pagination .kol-pagination {\n display: flex;\n }\n }\n}\n@layer kol-component {\n :host,\n .kol-table-stateless-wc {\n display: block;\n }\n .table {\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n }\n table {\n width: 100%;\n }\n caption {\n text-align: start;\n }\n .focus-element {\n font-size: 0;\n }\n .focus-element:focus {\n outline: 0 !important;\n }\n .table:has(.focus-element:focus) {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .table-sort-button .button {\n color: inherit;\n }\n tbody th,\n th.align-left {\n text-align: left;\n }\n tbody th .table-sort-button .button-inner,\n th.align-left .table-sort-button .button-inner {\n justify-items: start;\n }\n th.align-center {\n text-align: center;\n }\n th.align-center .table-sort-button .button-inner {\n justify-items: center;\n }\n th.align-right {\n text-align: right;\n }\n th.align-right .table-sort-button .button-inner {\n justify-items: end;\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: none;\n }\n .selection-header-cell {\n width: 0;\n }\n .selection-cell {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .input label {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .input .icon {\n display: block;\n inset: auto;\n position: absolute;\n z-index: 1;\n }\n .input input {\n appearance: none;\n border-style: solid;\n cursor: pointer;\n margin: 0;\n }\n .input input:before {\n content: \"\";\n }\n .input input[type=checkbox] {\n position: relative;\n display: flex;\n height: calc(var(--a11y-min-size) / 2);\n width: calc(var(--a11y-min-size) / 2);\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 255, 255);\n border-width: 2px;\n line-height: 1.5;\n transition: all 0.5s ease 0s;\n }\n .input input[type=radio] {\n display: flex;\n border-width: 2px;\n border-radius: 100%;\n height: 1.5em;\n min-height: 1.5em;\n min-width: 1.5em;\n padding: 0;\n width: 1.5em;\n }\n .input input[type=radio]:before {\n border-radius: 100%;\n margin: auto;\n height: 0.75em;\n width: 0.75em;\n }\n .input input[type=radio]:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .input input[type=radio]:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n}"}},5374:(t,n,e)=>{e.d(n,{t:()=>a});var i=e(6607),o=e(7177);let a=(t,n)=>{var e;return(null!==(e=(0,i.g)())&&void 0!==e?e:(0,i.i)("de")).translate(t,n)};"test"===o.p&&(a=t=>t)},7177:(t,n,e)=>{e.d(n,{b:()=>s,h:()=>o,p:()=>i,s:()=>a});let i="development";try{i="production"}catch(t){i="production"}const o=(t,n,e)=>{if(t&&n&&"string"==typeof e){const i=t.querySelector(`[slot="${e}"]`);i&&n.appendChild(i)}},a=t=>""===t,s=(t,n)=>t||n||""},7257:(t,n,e)=>{e.d(n,{S:()=>s,a:()=>i,b:()=>a,i:()=>o});const i=t=>"object"==typeof t&&null!==t,o=(t,n=0)=>"string"==typeof t&&t.length>=n,a=t=>{if("object"!=typeof t||null===t)return o(t,1);for(const n in t)if(!1===o(n,1))return!1;return!0},s=new Event("StateChange")},8445:(t,n,e)=>{function i(t){t.stopImmediatePropagation(),t.stopPropagation()}function o(t,n,e){n&&function(t,n,e){const i=t.dispatchEvent(function(t,n){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:n})}(n,e))}(n,t,e)}function a(t){t.preventDefault(),i(t)}e.d(n,{p:()=>a,s:()=>i,t:()=>o})},9027:(t,n,e)=>{e.d(n,{a:()=>c,b:()=>l,c:()=>r,h:()=>o,v:()=>d});var i=e(2741);const o=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,s=/^\d+$/;function l(t,n=1){return function(t){var n;return"string"==typeof t&&(null===(n=t.match(a))||void 0===n?void 0:n.length)||0}(t)>=n}function r(t){return s.test(t)}const h=new Set(["string"]),d=(t,n,e={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),h,n,function(t){var n;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(n,e,o,a)=>{var s,h;"function"==typeof(null===(s=t.hooks)||void 0===s?void 0:s.afterPatch)&&(null===(h=t.hooks)||void 0===h||h.afterPatch(n,e,o,a)),"string"==typeof n&&!1===l(n,3)&&!1===r(n)&&(0,i.a)(`The heading or label ("${n}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof n&&n.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(n=t.hooks)||void 0===n?void 0:n.beforePatch}})}(e))},c=d}}]);
|
package/dist/9980.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see 9980.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9980],{3921:(e,t,s)=>{s.d(t,{v:()=>o});var i=s(2741);const o=(e,t,s)=>{(0,i.b)(e,"_show",t,s)}},9980:(e,t,s)=>{s.r(t),s.d(t,{kol_popover_wc:()=>a});var i=s(
|
|
2
|
+
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9980],{3921:(e,t,s)=>{s.d(t,{v:()=>o});var i=s(2741);const o=(e,t,s)=>{(0,i.b)(e,"_show",t,s)}},9980:(e,t,s)=>{s.r(t),s.d(t,{kol_popover_wc:()=>a});var i=s(6630),o=s(3910),r=s(2741),n=s(5838),h=s(9357),l=s(3921);const a=class{constructor(e){(0,i.r)(this,e),this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover(e)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this._on=void 0,this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}showPopover(){return e=this,t=function*(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(yield(0,o.a)({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))},new Promise(((s,i)=>{var o=e=>{try{n(t.next(e))}catch(e){i(e)}},r=e=>{try{n(t.throw(e))}catch(e){i(e)}},n=e=>e.done?s(e.value):Promise.resolve(e.value).then(o,r);n((t=t.apply(e,null)).next())}));var e,t}hidePopover(e){var t,s,i;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody(),null===(i=null===(s=this.state._on)||void 0===s?void 0:s.onClose)||void 0===i||i.call(s,e)}addListenersToBody(){var e;const t=(0,n.g)().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const t=(0,n.g)().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return(0,i.h)(i.H,{key:"bbde2554587c05790d6d369bea98302967e5a65e",ref:this.catchHostAndTriggerElement,class:"kol-popover"},(0,i.h)("div",{key:"a398217c3b11d0a5e7c5b5175b2107b85c61b7fc",class:{popover:!0,show:this.state._visible},ref:this.catchPopoverElement,hidden:!this.state._show},(0,i.h)("div",{key:"85e4736b72df4491f16b87e55e40cf1d88537eae",class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),(0,i.h)("slot",{key:"3af2ff3203688dbbb0421a6b87c6b3e471a00ee9"})))}validateAlign(e){(0,h.a)(this,e)}validateOn(e){((e,t)=>{(0,r.w)(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)})(this,e)}validateShow(e){(0,l.v)(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}}}}]);
|