npm - @public-ui/components - Versions diffs - 2.0.0-rc.7 → 2.0.0-rc.8 - Mend

@public-ui/components 2.0.0-rc.7 → 2.0.0-rc.8

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.

Files changed (449) hide show

package/dist/kolibri/kol-link.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e,g as i}from"./index-9c30809b.js";import{a as s}from"./reuse-b3566e4c.js";const o="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\t:is(a, button) {\n\t\talign-items: baseline;\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: left;\n\t\ttext-decoration-line: underline;\n\t}\n\n\t:is(a, button):is(:focus, :hover) {\n\t\ttext-decoration-thickness: 0.2em;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t.skip {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\t.skip:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tpadding: 1em;\n\t\tposition: unset;\n\t}\n\n\tkol-icon.external-link-icon {\n\t\tdisplay: inline-flex;\n\t}\n}\n\n",l=class{constructor(n){t(this,n),this.catchRef=t=>{this.ref=t,s(this.host,this.ref)},this._accessKey=void 0,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._listenAriaCurrent=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._targetDescription="Der Link wird in einem neuen Tab geöffnet.",this._tooltipAlign="right"}render(){return n(e,null,n("kol-link-wc",{ref:this.catchRef,_accessKey:this._accessKey,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_listenAriaCurrent:this._listenAriaCurrent,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_target:this._target,_targetDescription:this._targetDescription,_tooltipAlign:this._tooltipAlign},n("slot",{name:"expert",slot:"expert"})))}get host(){return i(this)}};l.style={default:o};export{l as kol_link};
+import{r as t,h as n,H as e,g as i}from"./index-9c30809b.js";import{a as s}from"./reuse-b3566e4c.js";const o="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\t:is(a, button) {\n\t\talign-items: baseline;\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: left;\n\t\ttext-decoration-line: underline;\n\t}\n\n\t:is(a, button):is(:focus, :hover) {\n\t\ttext-decoration-thickness: 0.2em;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t.skip {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\t.skip:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tpadding: 1em;\n\t\tposition: unset;\n\t}\n\n\tkol-icon.external-link-icon {\n\t\tdisplay: inline-flex;\n\t}\n}\n\n",l=class{constructor(n){t(this,n),this.catchRef=t=>{s(this.host,t)},this._accessKey=void 0,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._listenAriaCurrent=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._targetDescription="Der Link wird in einem neuen Tab geöffnet.",this._tooltipAlign="right"}render(){return n(e,null,n("kol-link-wc",{ref:this.catchRef,_accessKey:this._accessKey,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_listenAriaCurrent:this._listenAriaCurrent,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_target:this._target,_targetDescription:this._targetDescription,_tooltipAlign:this._tooltipAlign},n("slot",{name:"expert",slot:"expert"})))}get host(){return i(this)}};l.style={default:o};export{l as kol_link};

package/dist/kolibri/kol-link.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["defaultStyleCss","KolLink","this","catchRef","ref","propagateFocus","host","render","h","Host","_accessKey","_download","_hideLabel","_href","_icons","_label","_listenAriaCurrent","_on","_role","_tabIndex","_target","_targetDescription","_tooltipAlign","name","slot"],"sources":["src/components/link/style.css?tag=kol-link&mode=default&encapsulation=shadow","src/components/link/shadow.tsx"],"sourcesContent":["@import url(../link.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconsProp } from '../../types/icons';\nimport { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';\nimport { AriaCurrentPropType } from '../../types/props/aria-current';\nimport { DownloadPropType } from '../../types/props/download';\nimport { HrefPropType } from '../../types/props/href';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { LinkOnCallbacksPropType } from '../../types/props/link-on-callbacks';\nimport { LinkTargetPropType } from '../../types/props/link-target';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { propagateFocus } from '../../utils/reuse';\nimport { LinkProps } from './types';\nimport { AccessKeyPropType } from '../../types/props/access-key';\n\n@Component({\n\ttag: 'kol-link',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLink implements LinkProps {\n\t@Element() private readonly host?: HTMLKolLinkElement;\n\~~tprivate ref?: HTMLKolLinkWcElement;\~~n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\~~tthis.ref = ref;\n\t\~~tpropagateFocus(this.host, ~~this.~~ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-link-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_download={this._download}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_href={this._href}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_listenAriaCurrent={this._listenAriaCurrent}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_target={this._target}\n\t\t\t\t\t_targetDescription={this._targetDescription}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t>\n\t\t\t\t\t{/\n\t\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t/}\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-link-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/*\n\t Defines the elements access key.\n\t /\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/\n\t Tells the browser that the link contains a file. Optionally sets the filename.\n\t /\n\t@Prop() public _download?: DownloadPropType;\n\n\t/\n\t Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t Sets the target URI of the link or citation source.\n\t /\n\t@Prop() public _href!: HrefPropType;\n\n\t/\n\t Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t /\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/\n\t Listen on an aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value.\n\t /\n\t@Prop() public _listenAriaCurrent?: AriaCurrentPropType;\n\n\t/\n\t Defines the callback functions for links.\n\t /\n\t@Prop() public _on?: LinkOnCallbacksPropType;\n\n\t/\n\t Defines the role of the components primary element.\n\t /\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/\n\t Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t Defines where to open the link.\n\t /\n\t@Prop() public _target?: LinkTargetPropType;\n\n\t/\n\t Defines the description to use when the link is going to be opened in another application.\n\t /\n\t@Prop() public _targetDescription?: string = 'Der Link wird in einem neuen Tab geöffnet.';\n\n\t/\n\t Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'right';\n}\n"],"mappings":";;;qGAAA,MAAMA,EAAkB,imH,MCuBXC,EAAO,M,~~yBAIFC~~,KAAAC,SAAYC,~~IAC5BF~~,~~KAAKE,IAAMA,EACXC,~~EAAeH,KAAKI,~~KAAMJ~~,~~KAAKE~~,~~IAAI,~~E,mEA+CE,M,mNA6CO,6C,mBAKS,O,CA9F/C,MAAAG,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,eACCJ,IAAKF,KAAKC,SACVO,WAAYR,KAAKQ,WACjBC,UAAWT,KAAKS,UAChBC,WAAYV,KAAKU,WACjBC,MAAOX,KAAKW,MACZC,OAAQZ,KAAKY,OACbC,OAAQb,KAAKa,OACbC,mBAAoBd,KAAKc,mBACzBC,IAAKf,KAAKe,IACVC,MAAOhB,KAAKgB,MACZC,UAAWjB,KAAKiB,UAChBC,QAASlB,KAAKkB,QACdC,mBAAoBnB,KAAKmB,mBACzBC,cAAepB,KAAKoB,eAMpBd,EAAA,QAAMe,KAAK,SAASC,KAAK,Y"}
1	+ {"version":3,"names":["defaultStyleCss","KolLink","this","catchRef","ref","propagateFocus","host","render","h","Host","_accessKey","_download","_hideLabel","_href","_icons","_label","_listenAriaCurrent","_on","_role","_tabIndex","_target","_targetDescription","_tooltipAlign","name","slot"],"sources":["src/components/link/style.css?tag=kol-link&mode=default&encapsulation=shadow","src/components/link/shadow.tsx"],"sourcesContent":["@import url(../link.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconsProp } from '../../types/icons';\nimport { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';\nimport { AriaCurrentPropType } from '../../types/props/aria-current';\nimport { DownloadPropType } from '../../types/props/download';\nimport { HrefPropType } from '../../types/props/href';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { LinkOnCallbacksPropType } from '../../types/props/link-on-callbacks';\nimport { LinkTargetPropType } from '../../types/props/link-target';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { propagateFocus } from '../../utils/reuse';\nimport { LinkProps } from './types';\nimport { AccessKeyPropType } from '../../types/props/access-key';\n\n@Component({\n\ttag: 'kol-link',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLink implements LinkProps {\n\t@Element() private readonly host?: HTMLKolLinkElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-link-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_download={this._download}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_href={this._href}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_listenAriaCurrent={this._listenAriaCurrent}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_target={this._target}\n\t\t\t\t\t_targetDescription={this._targetDescription}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t>\n\t\t\t\t\t{/\n\t\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t/}\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-link-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/*\n\t Defines the elements access key.\n\t /\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/\n\t Tells the browser that the link contains a file. Optionally sets the filename.\n\t /\n\t@Prop() public _download?: DownloadPropType;\n\n\t/\n\t Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t Sets the target URI of the link or citation source.\n\t /\n\t@Prop() public _href!: HrefPropType;\n\n\t/\n\t Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t /\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/\n\t Listen on an aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value.\n\t /\n\t@Prop() public _listenAriaCurrent?: AriaCurrentPropType;\n\n\t/\n\t Defines the callback functions for links.\n\t /\n\t@Prop() public _on?: LinkOnCallbacksPropType;\n\n\t/\n\t Defines the role of the components primary element.\n\t /\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/\n\t Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t Defines where to open the link.\n\t /\n\t@Prop() public _target?: LinkTargetPropType;\n\n\t/\n\t Defines the description to use when the link is going to be opened in another application.\n\t /\n\t@Prop() public _targetDescription?: string = 'Der Link wird in einem neuen Tab geöffnet.';\n\n\t/\n\t Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'right';\n}\n"],"mappings":";;;qGAAA,MAAMA,EAAkB,imH,MCuBXC,EAAO,M,yBAGFC,KAAAC,SAAYC,IAC5BC,EAAeH,KAAKI,KAAMF,EAAI,E,mEA+CO,M,mNA6CO,6C,mBAKS,O,CA9F/C,MAAAG,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,eACCJ,IAAKF,KAAKC,SACVO,WAAYR,KAAKQ,WACjBC,UAAWT,KAAKS,UAChBC,WAAYV,KAAKU,WACjBC,MAAOX,KAAKW,MACZC,OAAQZ,KAAKY,OACbC,OAAQb,KAAKa,OACbC,mBAAoBd,KAAKc,mBACzBC,IAAKf,KAAKe,IACVC,MAAOhB,KAAKgB,MACZC,UAAWjB,KAAKiB,UAChBC,QAASlB,KAAKkB,QACdC,mBAAoBnB,KAAKmB,mBACzBC,cAAepB,KAAKoB,eAMpBd,EAAA,QAAMe,KAAK,SAASC,KAAK,Y"}

package/dist/kolibri/kol-logo.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n}from"./index-9c30809b.js";import{d as e,B as c,b as i,f as l}from"./bund-056aa89a.js";import{a as o}from"./i18n-08622fb5.js";import{d as s}from"./a11y.tipps-29a5e350.js";import{s as r}from"./prop.validators-9bbd95a9.js";import"./index-44a0c937.js";import"./dev.utils-365879e7.js";import"./reuse-b3566e4c.js";const a="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\ttext {\n\t\tfont-size: 16px;\n\t\tletter-spacing: normal;\n\t\tword-spacing: normal;\n\t}\n\n\tsvg {\n\t\tmax-height: 100%;\n\t}\n}\n";function h(t,n=new Map){return Object.entries(t).map((([t,e])=>{n.set(e,t)})),n}const d=h(i,h(e,h(c)));function p(t){return d.has(t)?d.get(t):""}const m=()=>n("path",{d:"M21.72,12.77c0.04-0.33,0.06-0.67,0.06-1c0-0.2,0-0.43,0-0.69c3.06,0,5.74-2.25,5.74-4.78\nc-0.09-1.07-0.56-2.08-1.32-2.84l0.32-0.07c1,0.89,1.61,2.14,1.7,3.48c0,3-3,5.85-6.5,5.92 M18.64,2.21\nc-0.05-0.33-0.19-0.64-0.39-0.91c0-0.31,0.14-0.61,0.64-0.36c-0.27,0.27-0.06,0.76-0.06,0.76s0.55-0.26,0.44-0.62\nC20.09,1.28,19.5,2.38,18.64,2.21 M17.93,3.77c-0.12-0.47-0.34-0.9-0.64-1.27c-0.3-0.42-0.77-0.69-1.29-0.73\nc-0.34,0.03-0.68,0.12-1,0.25c-0.16-0.28-0.27-0.58-0.32-0.9c0-0.22,0.38-0.44,1.1-0.44c1.58,0,2.52,0.71,2.52,1.91\nC18.26,3.01,18.14,3.41,17.93,3.77 M22,24.16c0.13,0,0.26,0.02,0.38,0.07c0.64,1.3,1.4,2.53,2.29,3.68l0,0l0,0\nc0.81-0.14,1.63-0.22,2.45-0.24l0,0c0.1-0.01,0.2,0.01,0.28,0.07c0.07,0.09,0.1,0.2,0.09,0.31c-0.01,0.28-0.08,0.55-0.21,0.79\nc-0.46-0.4-1.07-0.59-1.68-0.51c-0.24,0.01-0.48,0.05-0.71,0.12h-0.07h-0.07l0.48,0.49c0.77,0.83,1.44,1.43,1.44,1.83\nc-0.04,0.31-0.22,0.58-0.48,0.74c-0.22-0.98-0.8-1.84-1.62-2.42h-0.06v0.27c0,0.19,0,0.47,0,0.77c0,1.49-0.15,1.72-0.67,1.72\nc-0.09,0.01-0.19,0.01-0.28,0c0.33-0.49,0.48-1.08,0.41-1.67v-0.7c0-0.27,0.03-0.53,0.06-0.8v-0.11h-0.08\nc-0.33-0.05-0.67-0.09-1-0.1c-0.57-0.07-1.14,0.07-1.6,0.41c-0.24-0.18-0.41-0.44-0.48-0.73c0-0.32,0.19-0.34,0.45-0.34\nc0.14-0.01,0.27-0.01,0.41,0c0.59,0.09,1.18,0.13,1.78,0.12h0.06v-0.06c-0.5-1.13-1.18-2.17-2-3.09c0.1-0.35,0.2-0.59,0.54-0.59\nM12.64,27.87v0.06h0.06c0.55-0.01,1.1-0.06,1.64-0.16c0.14-0.01,0.27-0.01,0.41,0c0.26,0,0.45,0,0.45,0.34\nc-0.07,0.29-0.24,0.55-0.48,0.73c-0.46-0.34-1.03-0.49-1.6-0.41c-0.33,0.01-0.67,0.05-1,0.1H12v0.11\nc0.03,0.27,0.06,0.53,0.06,0.8v0.7c-0.05,0.58,0.1,1.15,0.42,1.63c-0.09,0.01-0.19,0.01-0.28,0c-0.52,0-0.67-0.23-0.67-1.72\nc0-0.3,0-0.58,0-0.77V29l-0.06,0.05c-0.82,0.58-1.39,1.44-1.61,2.42c-0.28-0.14-0.47-0.4-0.53-0.7c0-0.43,0.65-1.07,1.39-1.81\nl0.43-0.43v-0.06h-0.14c-0.23-0.07-0.47-0.11-0.71-0.12c-0.61-0.08-1.22,0.11-1.68,0.51c-0.13-0.24-0.2-0.51-0.21-0.79\nc0.01-0.11,0.06-0.22,0.14-0.3c0.08-0.06,0.18-0.08,0.28-0.07l0,0c0.82,0.02,1.64,0.1,2.45,0.24l0,0l0,0\nc0.88-1.15,1.64-2.38,2.28-3.68c0.12-0.05,0.25-0.07,0.38-0.07c0.35,0,0.44,0.24,0.54,0.59c-0.82,0.92-1.5,1.96-2,3.09\nM7.78,6.87c0.08-1.36,0.7-2.62,1.72-3.52l0.32,0.07C9.06,4.19,8.6,5.19,8.51,6.26c0,2.56,2.73,4.78,5.82,4.78\nc0,0.22,0,0.45,0,0.69c-0.01,0.35,0,0.69,0.03,1.04c-3.5,0-6.58-2.86-6.58-5.92 M31.25,12.23c1.57,2.49,2.8,2.45,4.66,2.45\nc-1.19-0.97-2.21-2.14-3-3.46L30,6.65c-0.29-1.44-1.03-2.75-2.12-3.73c0.31-0.1,0.6-0.24,0.87-0.42c-1.88,0-3.73-1-4.75-1\nc-0.55-0.05-1.03,0.36-1.08,0.91c0,0.58,0.63,1.16,1.73,1.16c0.31,0,0.62-0.04,0.92-0.09c0.65,0.74,1.03,1.67,1.08,2.65\nc0,2-2.41,3.58-4.83,3.58h-0.41c-0.5-0.67-0.84-1.45-1-2.28c0-1.6,1.05-2.9,1.05-4.48c0-0.68-0.24-1.33-0.67-1.85\nc0.29-0.23,0.53-0.52,0.7-0.85c-0.22,0.08-0.45,0.11-0.68,0.09c-1.16,0-2.11-0.3-3-0.3c-0.53,0-0.67,0.16-0.67,0.31\nc-0.01,0.05-0.01,0.1,0,0.15c-0.19-0.08-0.39-0.13-0.59-0.17c-0.29-0.05-0.58-0.08-0.88-0.08c-1.13,0-1.52,0.47-1.52,0.87\nc0.07,0.52,0.27,1.01,0.57,1.44c0.4-0.2,0.84-0.31,1.28-0.34c0.6,0,1.13,0.57,1.41,1.24c-0.29,0.05-0.59,0.07-0.88,0.07\nc-0.68-0.03-1.36-0.16-2-0.39l0,0c0,0,0.31,0.56,0.92,0.78c0.72,0.22,1.46,0.37,2.21,0.45c-0.08,0.21-0.23,0.38-0.43,0.49\nc-0.05,0.02-0.09,0.02-0.14,0c-0.74-0.14-1.45-0.35-2.14-0.65H14.9c0,0.42,1.09,1.35,2.07,1.71c-1.06,1.1-1.87,2.41-2.39,3.85\nh-0.41c-2.42,0-4.82-1.57-4.82-3.58c0.05-0.98,0.43-1.91,1.07-2.65c0.3,0.05,0.61,0.09,0.92,0.09c1.1,0,1.69-0.58,1.74-1.16\nc-0.04-0.55-0.52-0.96-1.07-0.92c0,0,0,0-0.01,0c-1,0-2.88,1-4.76,1C7.51,2.73,7.8,2.87,8.11,2.97C7.03,3.94,6.29,5.23,6,6.65\nl-2.87,4.59c-0.79,1.32-1.81,2.49-3,3.46c1.86,0,3.09,0,4.66-2.45L6.26,9.9c0.11,0.31,0.24,0.61,0.4,0.9l-2.97,4.67\nc-0.79,1.32-1.8,2.49-3,3.46c1.85,0,3.08,0,4.65-2.44l2.52-4c0.19,0.2,0.39,0.4,0.6,0.58l-3.59,5.7c-0.79,1.32-1.8,2.49-3,3.45\nc1.85,0,3.08,0.05,4.65-2.44L10,14.2c0.22,0.14,0.46,0.28,0.7,0.41l-4.27,6.77c-0.79,1.31-1.81,2.48-3,3.45\nc1.85,0,3.08,0,4.65-2.44l4.36-7c0.25,0.1,0.51,0.2,0.78,0.28l-4.95,7.9c-0.79,1.31-1.81,2.48-3,3.45c1.85,0,3.08,0.05,4.65-2.43\nl5.24-8.39h0.16c0.14,0.42,0.22,0.86,0.24,1.3c0,2.64-1.73,5-3.8,6.76c0.19,0.06,0.38,0.09,0.58,0.08c0.3,0.01,0.6-0.01,0.9-0.05\nc-0.57,1.13-1.24,2.21-2,3.23c-0.77-0.13-1.54-0.2-2.32-0.22c-0.67,0-0.75,0.4-0.75,0.75c-0.01,0.53,0.22,1.03,0.62,1.38\nc0.13-0.31,0.38-0.73,1.63-0.73h0.13C10.11,29.13,9,30.06,9,30.77c0.06,0.66,0.59,1.18,1.25,1.24c-0.02-0.14-0.02-0.28,0-0.42\nc0.13-0.69,0.48-1.33,1-1.8c-0.01,0.1-0.01,0.2,0,0.3c0,1.43,0.13,2.08,1,2.08c0.31-0.01,0.61-0.12,0.86-0.31\nc-0.5-0.44-0.73-1.11-0.62-1.77c0-0.21,0-0.41,0-0.69c0.02-0.2,0.02-0.41,0-0.61c0.24-0.02,0.47-0.02,0.71,0\nc0,0,1.29-0.1,1.6,0.57c0.35-0.32,0.86-0.78,0.86-1.27c0-0.33-0.16-0.71-0.83-0.71c-0.25,0-1,0.16-1.7,0.16\nc0.48-0.84,1.04-1.64,1.66-2.39c0.1,0.39,0.31,0.74,0.62,1c0.12-1.17,0.54-2.28,1.21-3.24c0.16,0.93,0.24,1.87,0.23,2.82\nc0,3.55-0.85,6.17-2.66,6.67c0.26,0.46,0.73,0.75,1.25,0.78c0.66,0,1-0.75,1.39-1.46c0.19,0.53,0.72,1.8,1.25,1.8\ns1.06-1.27,1.25-1.8c0.37,0.71,0.73,1.46,1.39,1.46c0.52-0.03,1-0.33,1.26-0.78c-1.82-0.5-2.67-3.12-2.67-6.67\nc-0.01-0.95,0.07-1.89,0.23-2.82c0.68,0.96,1.1,2.07,1.21,3.24c0.31-0.26,0.53-0.61,0.63-1c0.61,0.75,1.15,1.54,1.62,2.38\nc-0.66,0-1.45-0.16-1.7-0.16c-0.67,0-0.82,0.38-0.82,0.71c0,0.49,0.51,1,0.86,1.27c0.3-0.67,1.59-0.57,1.59-0.57\nc0.24-0.02,0.47-0.02,0.71,0c-0.02,0.2-0.02,0.41,0,0.61v0.69c0.11,0.66-0.12,1.33-0.62,1.77c0.25,0.19,0.55,0.3,0.86,0.31\nc0.91,0,1-0.65,1-2.08c0.01-0.1,0.01-0.2,0-0.3c0.52,0.47,0.87,1.11,1,1.8c0.02,0.14,0.02,0.28,0,0.42\nc0.61-0.11,1.06-0.62,1.12-1.23c0-0.74-1.15-1.67-1.52-2.08h0.13c1.25,0,1.5,0.42,1.63,0.73c0.4-0.35,0.63-0.85,0.62-1.38\nc0-0.35-0.07-0.75-0.75-0.75c-0.78,0.02-1.55,0.09-2.32,0.22c-0.76-1.02-1.43-2.1-2-3.23c0.3,0.04,0.6,0.06,0.9,0.05\nc0.19,0.01,0.39-0.02,0.57-0.08c-2.07-1.79-3.8-4.12-3.8-6.76c0.02-0.44,0.1-0.88,0.24-1.3h0.16l5.24,8.39\nc1.57,2.48,2.8,2.43,4.65,2.43c-1.19-0.97-2.21-2.14-3-3.45l-4.92-7.87c0.27-0.08,0.53-0.18,0.79-0.28l4.35,7\nc1.57,2.48,2.8,2.44,4.65,2.44c-1.19-0.97-2.21-2.14-3-3.45l-4.23-6.77c0.24-0.13,0.48-0.27,0.7-0.41l3.42,5.55\nc1.57,2.49,2.8,2.44,4.65,2.44c-1.19-0.97-2.21-2.13-3-3.45l-3.55-5.69c0.2-0.18,0.4-0.38,0.59-0.58l2.52,4\nc1.57,2.48,2.8,2.44,4.65,2.44c-1.2-0.97-2.21-2.14-3-3.46l-2.99-4.7c0.16-0.29,0.29-0.59,0.4-0.9L31.25,12.23z"}),f=class{constructor(n){t(this,n),this._org=void 0,this.state={_org:e["Informationstechnikzentrum Bund"]}}validateOrg(t){"string"==typeof t&&d.has(t)?r(this,"_org",t):s(`Die verwendete Abkürzung (${t}) ist nicht definiert!`)}componentWillLoad(){this.validateOrg(this._org)}render(){var t;return n("svg",{"aria-label":o("kol-logo-description",{placeholders:{orgShort:this.state._org,orgLong:p(this.state._org)}}),role:"img",viewBox:"0 0 225 100"},n("rect",{width:"100%",height:"100%",fill:"white"}),n("svg",{x:"0",y:"4",height:"75"},n(m,null)),n("svg",{x:"40.5",y:"3.5",height:"100"},n("rect",{width:"5",height:"30"}),n("rect",{y:"30",width:"5",height:"30",fill:"red"}),n("rect",{y:"60",width:"5",height:"30",fill:"#fc0"})),n("svg",{x:"50",y:"0"},n("text",{x:"0",y:"-0.05em","font-family":"BundesSans Web",style:{backgroundColor:"white",color:"black"}},l.has(this.state._org)?n("tspan",null,null===(t=l.get(this.state._org))||void 0===t?void 0:t.map(((t,e)=>n("tspan",{x:"0",dy:"1.1em",key:`kol-logo-text-${e}`},t)))):n("tspan",{fill:"red"},n("tspan",{x:"0",dy:"1.1em"},"Der Schlüsselwert"),n("tspan",{x:"0",dy:"1.1em","font-weight":"bold"},"'",this.state._org,"'"),n("tspan",{x:"0",dy:"1.1em"},"ist nicht definiert."),n("tspan",{x:"0",dy:"1.1em"},"oder freigegeben.")))))}static get watchers(){return{_org:["validateOrg"]}}};f.style={default:a};export{f as kol_logo};
+import{r as t,h as n}from"./index-9c30809b.js";import{d as e,B as c,b as i,f as l}from"./bund-056aa89a.js";import{a as o}from"./i18n-bb569ab8.js";import{d as a}from"./a11y.tipps-ce35f0ba.js";import{s}from"./prop.validators-b0d023a4.js";import"./index-7a38e9a3.js";import"./dev.utils-34544843.js";import"./reuse-b3566e4c.js";const r="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\ttext {\n\t\tfont-size: 16px;\n\t\tletter-spacing: normal;\n\t\tword-spacing: normal;\n\t}\n\n\tsvg {\n\t\tmax-height: 100%;\n\t}\n}\n";function h(t,n=new Map){return Object.entries(t).map((([t,e])=>{n.set(e,t)})),n}const d=h(i,h(e,h(c)));function p(t){return d.has(t)?d.get(t):""}const m=()=>n("path",{d:"M21.72,12.77c0.04-0.33,0.06-0.67,0.06-1c0-0.2,0-0.43,0-0.69c3.06,0,5.74-2.25,5.74-4.78\nc-0.09-1.07-0.56-2.08-1.32-2.84l0.32-0.07c1,0.89,1.61,2.14,1.7,3.48c0,3-3,5.85-6.5,5.92 M18.64,2.21\nc-0.05-0.33-0.19-0.64-0.39-0.91c0-0.31,0.14-0.61,0.64-0.36c-0.27,0.27-0.06,0.76-0.06,0.76s0.55-0.26,0.44-0.62\nC20.09,1.28,19.5,2.38,18.64,2.21 M17.93,3.77c-0.12-0.47-0.34-0.9-0.64-1.27c-0.3-0.42-0.77-0.69-1.29-0.73\nc-0.34,0.03-0.68,0.12-1,0.25c-0.16-0.28-0.27-0.58-0.32-0.9c0-0.22,0.38-0.44,1.1-0.44c1.58,0,2.52,0.71,2.52,1.91\nC18.26,3.01,18.14,3.41,17.93,3.77 M22,24.16c0.13,0,0.26,0.02,0.38,0.07c0.64,1.3,1.4,2.53,2.29,3.68l0,0l0,0\nc0.81-0.14,1.63-0.22,2.45-0.24l0,0c0.1-0.01,0.2,0.01,0.28,0.07c0.07,0.09,0.1,0.2,0.09,0.31c-0.01,0.28-0.08,0.55-0.21,0.79\nc-0.46-0.4-1.07-0.59-1.68-0.51c-0.24,0.01-0.48,0.05-0.71,0.12h-0.07h-0.07l0.48,0.49c0.77,0.83,1.44,1.43,1.44,1.83\nc-0.04,0.31-0.22,0.58-0.48,0.74c-0.22-0.98-0.8-1.84-1.62-2.42h-0.06v0.27c0,0.19,0,0.47,0,0.77c0,1.49-0.15,1.72-0.67,1.72\nc-0.09,0.01-0.19,0.01-0.28,0c0.33-0.49,0.48-1.08,0.41-1.67v-0.7c0-0.27,0.03-0.53,0.06-0.8v-0.11h-0.08\nc-0.33-0.05-0.67-0.09-1-0.1c-0.57-0.07-1.14,0.07-1.6,0.41c-0.24-0.18-0.41-0.44-0.48-0.73c0-0.32,0.19-0.34,0.45-0.34\nc0.14-0.01,0.27-0.01,0.41,0c0.59,0.09,1.18,0.13,1.78,0.12h0.06v-0.06c-0.5-1.13-1.18-2.17-2-3.09c0.1-0.35,0.2-0.59,0.54-0.59\nM12.64,27.87v0.06h0.06c0.55-0.01,1.1-0.06,1.64-0.16c0.14-0.01,0.27-0.01,0.41,0c0.26,0,0.45,0,0.45,0.34\nc-0.07,0.29-0.24,0.55-0.48,0.73c-0.46-0.34-1.03-0.49-1.6-0.41c-0.33,0.01-0.67,0.05-1,0.1H12v0.11\nc0.03,0.27,0.06,0.53,0.06,0.8v0.7c-0.05,0.58,0.1,1.15,0.42,1.63c-0.09,0.01-0.19,0.01-0.28,0c-0.52,0-0.67-0.23-0.67-1.72\nc0-0.3,0-0.58,0-0.77V29l-0.06,0.05c-0.82,0.58-1.39,1.44-1.61,2.42c-0.28-0.14-0.47-0.4-0.53-0.7c0-0.43,0.65-1.07,1.39-1.81\nl0.43-0.43v-0.06h-0.14c-0.23-0.07-0.47-0.11-0.71-0.12c-0.61-0.08-1.22,0.11-1.68,0.51c-0.13-0.24-0.2-0.51-0.21-0.79\nc0.01-0.11,0.06-0.22,0.14-0.3c0.08-0.06,0.18-0.08,0.28-0.07l0,0c0.82,0.02,1.64,0.1,2.45,0.24l0,0l0,0\nc0.88-1.15,1.64-2.38,2.28-3.68c0.12-0.05,0.25-0.07,0.38-0.07c0.35,0,0.44,0.24,0.54,0.59c-0.82,0.92-1.5,1.96-2,3.09\nM7.78,6.87c0.08-1.36,0.7-2.62,1.72-3.52l0.32,0.07C9.06,4.19,8.6,5.19,8.51,6.26c0,2.56,2.73,4.78,5.82,4.78\nc0,0.22,0,0.45,0,0.69c-0.01,0.35,0,0.69,0.03,1.04c-3.5,0-6.58-2.86-6.58-5.92 M31.25,12.23c1.57,2.49,2.8,2.45,4.66,2.45\nc-1.19-0.97-2.21-2.14-3-3.46L30,6.65c-0.29-1.44-1.03-2.75-2.12-3.73c0.31-0.1,0.6-0.24,0.87-0.42c-1.88,0-3.73-1-4.75-1\nc-0.55-0.05-1.03,0.36-1.08,0.91c0,0.58,0.63,1.16,1.73,1.16c0.31,0,0.62-0.04,0.92-0.09c0.65,0.74,1.03,1.67,1.08,2.65\nc0,2-2.41,3.58-4.83,3.58h-0.41c-0.5-0.67-0.84-1.45-1-2.28c0-1.6,1.05-2.9,1.05-4.48c0-0.68-0.24-1.33-0.67-1.85\nc0.29-0.23,0.53-0.52,0.7-0.85c-0.22,0.08-0.45,0.11-0.68,0.09c-1.16,0-2.11-0.3-3-0.3c-0.53,0-0.67,0.16-0.67,0.31\nc-0.01,0.05-0.01,0.1,0,0.15c-0.19-0.08-0.39-0.13-0.59-0.17c-0.29-0.05-0.58-0.08-0.88-0.08c-1.13,0-1.52,0.47-1.52,0.87\nc0.07,0.52,0.27,1.01,0.57,1.44c0.4-0.2,0.84-0.31,1.28-0.34c0.6,0,1.13,0.57,1.41,1.24c-0.29,0.05-0.59,0.07-0.88,0.07\nc-0.68-0.03-1.36-0.16-2-0.39l0,0c0,0,0.31,0.56,0.92,0.78c0.72,0.22,1.46,0.37,2.21,0.45c-0.08,0.21-0.23,0.38-0.43,0.49\nc-0.05,0.02-0.09,0.02-0.14,0c-0.74-0.14-1.45-0.35-2.14-0.65H14.9c0,0.42,1.09,1.35,2.07,1.71c-1.06,1.1-1.87,2.41-2.39,3.85\nh-0.41c-2.42,0-4.82-1.57-4.82-3.58c0.05-0.98,0.43-1.91,1.07-2.65c0.3,0.05,0.61,0.09,0.92,0.09c1.1,0,1.69-0.58,1.74-1.16\nc-0.04-0.55-0.52-0.96-1.07-0.92c0,0,0,0-0.01,0c-1,0-2.88,1-4.76,1C7.51,2.73,7.8,2.87,8.11,2.97C7.03,3.94,6.29,5.23,6,6.65\nl-2.87,4.59c-0.79,1.32-1.81,2.49-3,3.46c1.86,0,3.09,0,4.66-2.45L6.26,9.9c0.11,0.31,0.24,0.61,0.4,0.9l-2.97,4.67\nc-0.79,1.32-1.8,2.49-3,3.46c1.85,0,3.08,0,4.65-2.44l2.52-4c0.19,0.2,0.39,0.4,0.6,0.58l-3.59,5.7c-0.79,1.32-1.8,2.49-3,3.45\nc1.85,0,3.08,0.05,4.65-2.44L10,14.2c0.22,0.14,0.46,0.28,0.7,0.41l-4.27,6.77c-0.79,1.31-1.81,2.48-3,3.45\nc1.85,0,3.08,0,4.65-2.44l4.36-7c0.25,0.1,0.51,0.2,0.78,0.28l-4.95,7.9c-0.79,1.31-1.81,2.48-3,3.45c1.85,0,3.08,0.05,4.65-2.43\nl5.24-8.39h0.16c0.14,0.42,0.22,0.86,0.24,1.3c0,2.64-1.73,5-3.8,6.76c0.19,0.06,0.38,0.09,0.58,0.08c0.3,0.01,0.6-0.01,0.9-0.05\nc-0.57,1.13-1.24,2.21-2,3.23c-0.77-0.13-1.54-0.2-2.32-0.22c-0.67,0-0.75,0.4-0.75,0.75c-0.01,0.53,0.22,1.03,0.62,1.38\nc0.13-0.31,0.38-0.73,1.63-0.73h0.13C10.11,29.13,9,30.06,9,30.77c0.06,0.66,0.59,1.18,1.25,1.24c-0.02-0.14-0.02-0.28,0-0.42\nc0.13-0.69,0.48-1.33,1-1.8c-0.01,0.1-0.01,0.2,0,0.3c0,1.43,0.13,2.08,1,2.08c0.31-0.01,0.61-0.12,0.86-0.31\nc-0.5-0.44-0.73-1.11-0.62-1.77c0-0.21,0-0.41,0-0.69c0.02-0.2,0.02-0.41,0-0.61c0.24-0.02,0.47-0.02,0.71,0\nc0,0,1.29-0.1,1.6,0.57c0.35-0.32,0.86-0.78,0.86-1.27c0-0.33-0.16-0.71-0.83-0.71c-0.25,0-1,0.16-1.7,0.16\nc0.48-0.84,1.04-1.64,1.66-2.39c0.1,0.39,0.31,0.74,0.62,1c0.12-1.17,0.54-2.28,1.21-3.24c0.16,0.93,0.24,1.87,0.23,2.82\nc0,3.55-0.85,6.17-2.66,6.67c0.26,0.46,0.73,0.75,1.25,0.78c0.66,0,1-0.75,1.39-1.46c0.19,0.53,0.72,1.8,1.25,1.8\ns1.06-1.27,1.25-1.8c0.37,0.71,0.73,1.46,1.39,1.46c0.52-0.03,1-0.33,1.26-0.78c-1.82-0.5-2.67-3.12-2.67-6.67\nc-0.01-0.95,0.07-1.89,0.23-2.82c0.68,0.96,1.1,2.07,1.21,3.24c0.31-0.26,0.53-0.61,0.63-1c0.61,0.75,1.15,1.54,1.62,2.38\nc-0.66,0-1.45-0.16-1.7-0.16c-0.67,0-0.82,0.38-0.82,0.71c0,0.49,0.51,1,0.86,1.27c0.3-0.67,1.59-0.57,1.59-0.57\nc0.24-0.02,0.47-0.02,0.71,0c-0.02,0.2-0.02,0.41,0,0.61v0.69c0.11,0.66-0.12,1.33-0.62,1.77c0.25,0.19,0.55,0.3,0.86,0.31\nc0.91,0,1-0.65,1-2.08c0.01-0.1,0.01-0.2,0-0.3c0.52,0.47,0.87,1.11,1,1.8c0.02,0.14,0.02,0.28,0,0.42\nc0.61-0.11,1.06-0.62,1.12-1.23c0-0.74-1.15-1.67-1.52-2.08h0.13c1.25,0,1.5,0.42,1.63,0.73c0.4-0.35,0.63-0.85,0.62-1.38\nc0-0.35-0.07-0.75-0.75-0.75c-0.78,0.02-1.55,0.09-2.32,0.22c-0.76-1.02-1.43-2.1-2-3.23c0.3,0.04,0.6,0.06,0.9,0.05\nc0.19,0.01,0.39-0.02,0.57-0.08c-2.07-1.79-3.8-4.12-3.8-6.76c0.02-0.44,0.1-0.88,0.24-1.3h0.16l5.24,8.39\nc1.57,2.48,2.8,2.43,4.65,2.43c-1.19-0.97-2.21-2.14-3-3.45l-4.92-7.87c0.27-0.08,0.53-0.18,0.79-0.28l4.35,7\nc1.57,2.48,2.8,2.44,4.65,2.44c-1.19-0.97-2.21-2.14-3-3.45l-4.23-6.77c0.24-0.13,0.48-0.27,0.7-0.41l3.42,5.55\nc1.57,2.49,2.8,2.44,4.65,2.44c-1.19-0.97-2.21-2.13-3-3.45l-3.55-5.69c0.2-0.18,0.4-0.38,0.59-0.58l2.52,4\nc1.57,2.48,2.8,2.44,4.65,2.44c-1.2-0.97-2.21-2.14-3-3.46l-2.99-4.7c0.16-0.29,0.29-0.59,0.4-0.9L31.25,12.23z"}),f=class{constructor(n){t(this,n),this._org=void 0,this.state={_org:e["Informationstechnikzentrum Bund"]}}validateOrg(t){"string"==typeof t&&d.has(t)?s(this,"_org",t):a(`Die verwendete Abkürzung (${t}) ist nicht definiert!`)}componentWillLoad(){this.validateOrg(this._org)}render(){var t;return n("svg",{"aria-label":o("kol-logo-description",{placeholders:{orgShort:this.state._org,orgLong:p(this.state._org)}}),role:"img",viewBox:"0 0 225 100"},n("rect",{width:"100%",height:"100%",fill:"white"}),n("svg",{x:"0",y:"4",height:"75"},n(m,null)),n("svg",{x:"40.5",y:"3.5",height:"100"},n("rect",{width:"5",height:"30"}),n("rect",{y:"30",width:"5",height:"30",fill:"red"}),n("rect",{y:"60",width:"5",height:"30",fill:"#fc0"})),n("svg",{x:"50",y:"0"},n("text",{x:"0",y:"-0.05em","font-family":"BundesSans Web",style:{backgroundColor:"white",color:"black"}},l.has(this.state._org)?n("tspan",null,null===(t=l.get(this.state._org))||void 0===t?void 0:t.map(((t,e)=>n("tspan",{x:"0",dy:"1.1em",key:`kol-logo-text-${e}`},t)))):n("tspan",{fill:"red"},n("tspan",{x:"0",dy:"1.1em"},"Der Schlüsselwert"),n("tspan",{x:"0",dy:"1.1em","font-weight":"bold"},"'",this.state._org,"'"),n("tspan",{x:"0",dy:"1.1em"},"ist nicht definiert."),n("tspan",{x:"0",dy:"1.1em"},"oder freigegeben.")))))}static get watchers(){return{_org:["validateOrg"]}}};f.style={default:r};export{f as kol_logo};

package/dist/kolibri/kol-logo.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["defaultStyleCss","enumToArray","enumeration","enumAsMap","Map","Object","entries","map","key","value","set","ENUM_AS_MAP","Bundesamt","Bundesanstalt","Bundesministerium","getAriaLabel","organ","has","get","Adler","h","d","KolLogo","_org","validateOrg","setState","this","devHint","componentWillLoad","render","translate","placeholders","orgShort","state","orgLong","role","viewBox","width","height","fill","x","y","style","backgroundColor","color","BUND_LOGO_TEXT_MAP","_a","text","index","dy"],"sources":["src/components/logo/style.css?tag=kol-logo&mode=default&encapsulation=shadow","src/components/logo/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\ttext {\n\t\tfont-size: 16px;\n\t\tletter-spacing: normal;\n\t\tword-spacing: normal;\n\t}\n\n\tsvg {\n\t\tmax-height: 100%;\n\t}\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { BUND_LOGO_TEXT_MAP, Bundesamt, Bundesanstalt, Bundesministerium } from '../../enums/bund';\nimport { translate } from '../../i18n';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { setState } from '../../utils/prop.validators';\nimport { API, States } from './types';\n\nfunction enumToArray(enumeration: Record<string, string>, enumAsMap: Map<string, string> = new Map()): Map<string, string> {\n\tObject.entries(enumeration).map(([key, value]) => {\n\t\tenumAsMap.set(value, key);\n\t});\n\treturn enumAsMap;\n}\n\nconst ENUM_AS_MAP = enumToArray(Bundesamt, enumToArray(Bundesanstalt, enumToArray(Bundesministerium)));\n\nfunction getAriaLabel(organ: string): string {\n\tif (ENUM_AS_MAP.has(organ)) {\n\t\treturn ENUM_AS_MAP.get(organ) as string;\n\t} else {\n\t\treturn '';\n\t}\n}\n\nconst Adler = (): JSX.Element => (\n\t<path\n\t\td=\"M21.72,12.77c0.04-0.33,0.06-0.67,0.06-1c0-0.2,0-0.43,0-0.69c3.06,0,5.74-2.25,5.74-4.78\nc-0.09-1.07-0.56-2.08-1.32-2.84l0.32-0.07c1,0.89,1.61,2.14,1.7,3.48c0,3-3,5.85-6.5,5.92 M18.64,2.21\nc-0.05-0.33-0.19-0.64-0.39-0.91c0-0.31,0.14-0.61,0.64-0.36c-0.27,0.27-0.06,0.76-0.06,0.76s0.55-0.26,0.44-0.62\nC20.09,1.28,19.5,2.38,18.64,2.21 M17.93,3.77c-0.12-0.47-0.34-0.9-0.64-1.27c-0.3-0.42-0.77-0.69-1.29-0.73\nc-0.34,0.03-0.68,0.12-1,0.25c-0.16-0.28-0.27-0.58-0.32-0.9c0-0.22,0.38-0.44,1.1-0.44c1.58,0,2.52,0.71,2.52,1.91\nC18.26,3.01,18.14,3.41,17.93,3.77 M22,24.16c0.13,0,0.26,0.02,0.38,0.07c0.64,1.3,1.4,2.53,2.29,3.68l0,0l0,0\nc0.81-0.14,1.63-0.22,2.45-0.24l0,0c0.1-0.01,0.2,0.01,0.28,0.07c0.07,0.09,0.1,0.2,0.09,0.31c-0.01,0.28-0.08,0.55-0.21,0.79\nc-0.46-0.4-1.07-0.59-1.68-0.51c-0.24,0.01-0.48,0.05-0.71,0.12h-0.07h-0.07l0.48,0.49c0.77,0.83,1.44,1.43,1.44,1.83\nc-0.04,0.31-0.22,0.58-0.48,0.74c-0.22-0.98-0.8-1.84-1.62-2.42h-0.06v0.27c0,0.19,0,0.47,0,0.77c0,1.49-0.15,1.72-0.67,1.72\nc-0.09,0.01-0.19,0.01-0.28,0c0.33-0.49,0.48-1.08,0.41-1.67v-0.7c0-0.27,0.03-0.53,0.06-0.8v-0.11h-0.08\nc-0.33-0.05-0.67-0.09-1-0.1c-0.57-0.07-1.14,0.07-1.6,0.41c-0.24-0.18-0.41-0.44-0.48-0.73c0-0.32,0.19-0.34,0.45-0.34\nc0.14-0.01,0.27-0.01,0.41,0c0.59,0.09,1.18,0.13,1.78,0.12h0.06v-0.06c-0.5-1.13-1.18-2.17-2-3.09c0.1-0.35,0.2-0.59,0.54-0.59\nM12.64,27.87v0.06h0.06c0.55-0.01,1.1-0.06,1.64-0.16c0.14-0.01,0.27-0.01,0.41,0c0.26,0,0.45,0,0.45,0.34\nc-0.07,0.29-0.24,0.55-0.48,0.73c-0.46-0.34-1.03-0.49-1.6-0.41c-0.33,0.01-0.67,0.05-1,0.1H12v0.11\nc0.03,0.27,0.06,0.53,0.06,0.8v0.7c-0.05,0.58,0.1,1.15,0.42,1.63c-0.09,0.01-0.19,0.01-0.28,0c-0.52,0-0.67-0.23-0.67-1.72\nc0-0.3,0-0.58,0-0.77V29l-0.06,0.05c-0.82,0.58-1.39,1.44-1.61,2.42c-0.28-0.14-0.47-0.4-0.53-0.7c0-0.43,0.65-1.07,1.39-1.81\nl0.43-0.43v-0.06h-0.14c-0.23-0.07-0.47-0.11-0.71-0.12c-0.61-0.08-1.22,0.11-1.68,0.51c-0.13-0.24-0.2-0.51-0.21-0.79\nc0.01-0.11,0.06-0.22,0.14-0.3c0.08-0.06,0.18-0.08,0.28-0.07l0,0c0.82,0.02,1.64,0.1,2.45,0.24l0,0l0,0\nc0.88-1.15,1.64-2.38,2.28-3.68c0.12-0.05,0.25-0.07,0.38-0.07c0.35,0,0.44,0.24,0.54,0.59c-0.82,0.92-1.5,1.96-2,3.09\nM7.78,6.87c0.08-1.36,0.7-2.62,1.72-3.52l0.32,0.07C9.06,4.19,8.6,5.19,8.51,6.26c0,2.56,2.73,4.78,5.82,4.78\nc0,0.22,0,0.45,0,0.69c-0.01,0.35,0,0.69,0.03,1.04c-3.5,0-6.58-2.86-6.58-5.92 M31.25,12.23c1.57,2.49,2.8,2.45,4.66,2.45\nc-1.19-0.97-2.21-2.14-3-3.46L30,6.65c-0.29-1.44-1.03-2.75-2.12-3.73c0.31-0.1,0.6-0.24,0.87-0.42c-1.88,0-3.73-1-4.75-1\nc-0.55-0.05-1.03,0.36-1.08,0.91c0,0.58,0.63,1.16,1.73,1.16c0.31,0,0.62-0.04,0.92-0.09c0.65,0.74,1.03,1.67,1.08,2.65\nc0,2-2.41,3.58-4.83,3.58h-0.41c-0.5-0.67-0.84-1.45-1-2.28c0-1.6,1.05-2.9,1.05-4.48c0-0.68-0.24-1.33-0.67-1.85\nc0.29-0.23,0.53-0.52,0.7-0.85c-0.22,0.08-0.45,0.11-0.68,0.09c-1.16,0-2.11-0.3-3-0.3c-0.53,0-0.67,0.16-0.67,0.31\nc-0.01,0.05-0.01,0.1,0,0.15c-0.19-0.08-0.39-0.13-0.59-0.17c-0.29-0.05-0.58-0.08-0.88-0.08c-1.13,0-1.52,0.47-1.52,0.87\nc0.07,0.52,0.27,1.01,0.57,1.44c0.4-0.2,0.84-0.31,1.28-0.34c0.6,0,1.13,0.57,1.41,1.24c-0.29,0.05-0.59,0.07-0.88,0.07\nc-0.68-0.03-1.36-0.16-2-0.39l0,0c0,0,0.31,0.56,0.92,0.78c0.72,0.22,1.46,0.37,2.21,0.45c-0.08,0.21-0.23,0.38-0.43,0.49\nc-0.05,0.02-0.09,0.02-0.14,0c-0.74-0.14-1.45-0.35-2.14-0.65H14.9c0,0.42,1.09,1.35,2.07,1.71c-1.06,1.1-1.87,2.41-2.39,3.85\nh-0.41c-2.42,0-4.82-1.57-4.82-3.58c0.05-0.98,0.43-1.91,1.07-2.65c0.3,0.05,0.61,0.09,0.92,0.09c1.1,0,1.69-0.58,1.74-1.16\nc-0.04-0.55-0.52-0.96-1.07-0.92c0,0,0,0-0.01,0c-1,0-2.88,1-4.76,1C7.51,2.73,7.8,2.87,8.11,2.97C7.03,3.94,6.29,5.23,6,6.65\nl-2.87,4.59c-0.79,1.32-1.81,2.49-3,3.46c1.86,0,3.09,0,4.66-2.45L6.26,9.9c0.11,0.31,0.24,0.61,0.4,0.9l-2.97,4.67\nc-0.79,1.32-1.8,2.49-3,3.46c1.85,0,3.08,0,4.65-2.44l2.52-4c0.19,0.2,0.39,0.4,0.6,0.58l-3.59,5.7c-0.79,1.32-1.8,2.49-3,3.45\nc1.85,0,3.08,0.05,4.65-2.44L10,14.2c0.22,0.14,0.46,0.28,0.7,0.41l-4.27,6.77c-0.79,1.31-1.81,2.48-3,3.45\nc1.85,0,3.08,0,4.65-2.44l4.36-7c0.25,0.1,0.51,0.2,0.78,0.28l-4.95,7.9c-0.79,1.31-1.81,2.48-3,3.45c1.85,0,3.08,0.05,4.65-2.43\nl5.24-8.39h0.16c0.14,0.42,0.22,0.86,0.24,1.3c0,2.64-1.73,5-3.8,6.76c0.19,0.06,0.38,0.09,0.58,0.08c0.3,0.01,0.6-0.01,0.9-0.05\nc-0.57,1.13-1.24,2.21-2,3.23c-0.77-0.13-1.54-0.2-2.32-0.22c-0.67,0-0.75,0.4-0.75,0.75c-0.01,0.53,0.22,1.03,0.62,1.38\nc0.13-0.31,0.38-0.73,1.63-0.73h0.13C10.11,29.13,9,30.06,9,30.77c0.06,0.66,0.59,1.18,1.25,1.24c-0.02-0.14-0.02-0.28,0-0.42\nc0.13-0.69,0.48-1.33,1-1.8c-0.01,0.1-0.01,0.2,0,0.3c0,1.43,0.13,2.08,1,2.08c0.31-0.01,0.61-0.12,0.86-0.31\nc-0.5-0.44-0.73-1.11-0.62-1.77c0-0.21,0-0.41,0-0.69c0.02-0.2,0.02-0.41,0-0.61c0.24-0.02,0.47-0.02,0.71,0\nc0,0,1.29-0.1,1.6,0.57c0.35-0.32,0.86-0.78,0.86-1.27c0-0.33-0.16-0.71-0.83-0.71c-0.25,0-1,0.16-1.7,0.16\nc0.48-0.84,1.04-1.64,1.66-2.39c0.1,0.39,0.31,0.74,0.62,1c0.12-1.17,0.54-2.28,1.21-3.24c0.16,0.93,0.24,1.87,0.23,2.82\nc0,3.55-0.85,6.17-2.66,6.67c0.26,0.46,0.73,0.75,1.25,0.78c0.66,0,1-0.75,1.39-1.46c0.19,0.53,0.72,1.8,1.25,1.8\ns1.06-1.27,1.25-1.8c0.37,0.71,0.73,1.46,1.39,1.46c0.52-0.03,1-0.33,1.26-0.78c-1.82-0.5-2.67-3.12-2.67-6.67\nc-0.01-0.95,0.07-1.89,0.23-2.82c0.68,0.96,1.1,2.07,1.21,3.24c0.31-0.26,0.53-0.61,0.63-1c0.61,0.75,1.15,1.54,1.62,2.38\nc-0.66,0-1.45-0.16-1.7-0.16c-0.67,0-0.82,0.38-0.82,0.71c0,0.49,0.51,1,0.86,1.27c0.3-0.67,1.59-0.57,1.59-0.57\nc0.24-0.02,0.47-0.02,0.71,0c-0.02,0.2-0.02,0.41,0,0.61v0.69c0.11,0.66-0.12,1.33-0.62,1.77c0.25,0.19,0.55,0.3,0.86,0.31\nc0.91,0,1-0.65,1-2.08c0.01-0.1,0.01-0.2,0-0.3c0.52,0.47,0.87,1.11,1,1.8c0.02,0.14,0.02,0.28,0,0.42\nc0.61-0.11,1.06-0.62,1.12-1.23c0-0.74-1.15-1.67-1.52-2.08h0.13c1.25,0,1.5,0.42,1.63,0.73c0.4-0.35,0.63-0.85,0.62-1.38\nc0-0.35-0.07-0.75-0.75-0.75c-0.78,0.02-1.55,0.09-2.32,0.22c-0.76-1.02-1.43-2.1-2-3.23c0.3,0.04,0.6,0.06,0.9,0.05\nc0.19,0.01,0.39-0.02,0.57-0.08c-2.07-1.79-3.8-4.12-3.8-6.76c0.02-0.44,0.1-0.88,0.24-1.3h0.16l5.24,8.39\nc1.57,2.48,2.8,2.43,4.65,2.43c-1.19-0.97-2.21-2.14-3-3.45l-4.92-7.87c0.27-0.08,0.53-0.18,0.79-0.28l4.35,7\nc1.57,2.48,2.8,2.44,4.65,2.44c-1.19-0.97-2.21-2.14-3-3.45l-4.23-6.77c0.24-0.13,0.48-0.27,0.7-0.41l3.42,5.55\nc1.57,2.49,2.8,2.44,4.65,2.44c-1.19-0.97-2.21-2.13-3-3.45l-3.55-5.69c0.2-0.18,0.4-0.38,0.59-0.58l2.52,4\nc1.57,2.48,2.8,2.44,4.65,2.44c-1.2-0.97-2.21-2.14-3-3.46l-2.99-4.7c0.16-0.29,0.29-0.59,0.4-0.9L31.25,12.23z\"\n\t></path>\n);\n\n@Component({\n\ttag: 'kol-logo',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLogo implements API {\n\t/*\n\t Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an.\n\t */\n\t@Prop() public _org!: Bundesministerium \| Bundesamt \| Bundesanstalt;\n\n\t@State() public state: States = {\n\t\t_org: Bundesanstalt['Informationstechnikzentrum Bund'],\n\t};\n\n\t@Watch('_org')\n\tpublic validateOrg(value?: Bundesministerium \| Bundesamt \| Bundesanstalt): void {\n\t\tif (typeof value === 'string' && ENUM_AS_MAP.has(value)) {\n\t\t\tsetState(this, '_org', value);\n\t\t} else {\n\t\t\tdevHint(`Die verwendete Abkürzung (${value as string}) ist nicht definiert!`);\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOrg(this._org);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<svg\n\t\t\t\taria-label={translate('kol-logo-description', { placeholders: { orgShort: this.state._org, orgLong: getAriaLabel(this.state._org) } })}\n\t\t\t\trole=\"img\"\n\t\t\t\tviewBox=\"0 0 225 100\"\n\t\t\t>\n\t\t\t\t<rect width=\"100%\" height=\"100%\" fill=\"white\"></rect>\n\t\t\t\t<svg x=\"0\" y=\"4\" height=\"75\">\n\t\t\t\t\t<Adler />\n\t\t\t\t</svg>\n\t\t\t\t<svg x=\"40.5\" y=\"3.5\" height=\"100\">\n\t\t\t\t\t<rect width=\"5\" height=\"30\"></rect>\n\t\t\t\t\t<rect y=\"30\" width=\"5\" height=\"30\" fill=\"red\"></rect>\n\t\t\t\t\t<rect y=\"60\" width=\"5\" height=\"30\" fill=\"#fc0\"></rect>\n\t\t\t\t</svg>\n\t\t\t\t<svg x=\"50\" y=\"0\">\n\t\t\t\t\t<text x=\"0\" y=\"-0.05em\" font-family=\"BundesSans Web\" style={{ backgroundColor: 'white', color: 'black' }}>\n\t\t\t\t\t\t{BUND_LOGO_TEXT_MAP.has(this.state._org) ? (\n\t\t\t\t\t\t\t<tspan>\n\t\t\t\t\t\t\t\t{BUND_LOGO_TEXT_MAP.get(this.state._org)?.map((text: string, index: number) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\" key={`kol-logo-text-${index}`}>\n\t\t\t\t\t\t\t\t\t\t\t{text}\n\t\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<tspan fill=\"red\">\n\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\">\n\t\t\t\t\t\t\t\t\tDer Schlüsselwert\n\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\" font-weight=\"bold\">\n\t\t\t\t\t\t\t\t\t'{this.state._org}'\n\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\">\n\t\t\t\t\t\t\t\t\tist nicht definiert.\n\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\">\n\t\t\t\t\t\t\t\t\toder freigegeben.\n\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t</svg>\n\t\t);\n\t}\n}\n"],"mappings":";;;yUAAA,MAAMA,EAAkB,8mGCQxB,SAASC,EAAYC,EAAqCC,EAAiC,IAAIC,KAC9FC,OAAOC,QAAQJ,GAAaK,KAAI,EAAEC,EAAKC,MACtCN,EAAUO,IAAID,EAAOD,EAAI,IAE1B,OAAOL,CACR,CAEA,MAAMQ,EAAcV,EAAYW,EAAWX,EAAYY,EAAeZ,EAAYa,KAElF,SAASC,EAAaC,GACrB,GAAIL,EAAYM,IAAID,GAAQ,CAC3B,OAAOL,EAAYO,IAAIF,E,KACjB,CACN,MAAO,E,CAET,CAEA,MAAMG,EAAQ,IACbC,EAAA,QACCC,EAAE,slM,MAiESC,EAAO,M,wDAMa,CAC/BC,KAAMV,EAAc,mC,CAId,WAAAW,CAAYf,GAClB,UAAWA,IAAU,UAAYE,EAAYM,IAAIR,GAAQ,CACxDgB,EAASC,KAAM,OAAQjB,E,KACjB,CACNkB,EAAQ,6BAA6BlB,0B,EAIhC,iBAAAmB,GACNF,KAAKF,YAAYE,KAAKH,K,CAGhB,MAAAM,G,MACN,OACCT,EAAA,oBACaU,EAAU,uBAAwB,CAAEC,aAAc,CAAEC,SAAUN,KAAKO,MAAMV,KAAMW,QAASnB,EAAaW,KAAKO,MAAMV,SAC5HY,KAAK,MACLC,QAAQ,eAERhB,EAAA,QAAMiB,MAAM,OAAOC,OAAO,OAAOC,KAAK,UACtCnB,EAAA,OAAKoB,EAAE,IAAIC,EAAE,IAAIH,OAAO,MACvBlB,EAACD,EAAK,OAEPC,EAAA,OAAKoB,EAAE,OAAOC,EAAE,MAAMH,OAAO,OAC5BlB,EAAA,QAAMiB,MAAM,IAAIC,OAAO,OACvBlB,EAAA,QAAMqB,EAAE,KAAKJ,MAAM,IAAIC,OAAO,KAAKC,KAAK,QACxCnB,EAAA,QAAMqB,EAAE,KAAKJ,MAAM,IAAIC,OAAO,KAAKC,KAAK,UAEzCnB,EAAA,OAAKoB,EAAE,KAAKC,EAAE,KACbrB,EAAA,QAAMoB,EAAE,IAAIC,EAAE,UAAS,cAAa,iBAAiBC,MAAO,CAAEC,gBAAiB,QAASC,MAAO,UAC7FC,EAAmB5B,IAAIS,KAAKO,MAAMV,MAClCH,EAAA,cACE0B,EAAAD,EAAmB3B,IAAIQ,KAAKO,MAAMV,SAAK,MAAAuB,SAAA,SAAAA,EAAEvC,KAAI,CAACwC,EAAcC,IAE3D5B,EAAA,SAAOoB,EAAE,IAAIS,GAAG,QAAQzC,IAAK,iBAAiBwC,KAC5CD,MAML3B,EAAA,SAAOmB,KAAK,OACXnB,EAAA,SAAOoB,EAAE,IAAIS,GAAG,SAAO,qBAGvB7B,EAAA,SAAOoB,EAAE,IAAIS,GAAG,QAAO,cAAa,QAAM,IACvCvB,KAAKO,MAAMV,KAAI,KAElBH,EAAA,SAAOoB,EAAE,IAAIS,GAAG,SAAO,wBAGvB7B,EAAA,SAAOoB,EAAE,IAAIS,GAAG,SAAO,wB"}
1	+ {"version":3,"names":["defaultStyleCss","enumToArray","enumeration","enumAsMap","Map","Object","entries","map","key","value","set","ENUM_AS_MAP","Bundesamt","Bundesanstalt","Bundesministerium","getAriaLabel","organ","has","get","Adler","h","d","KolLogo","_org","validateOrg","setState","this","devHint","componentWillLoad","render","translate","placeholders","orgShort","state","orgLong","role","viewBox","width","height","fill","x","y","style","backgroundColor","color","BUND_LOGO_TEXT_MAP","_a","text","index","dy"],"sources":["src/components/logo/style.css?tag=kol-logo&mode=default&encapsulation=shadow","src/components/logo/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\ttext {\n\t\tfont-size: 16px;\n\t\tletter-spacing: normal;\n\t\tword-spacing: normal;\n\t}\n\n\tsvg {\n\t\tmax-height: 100%;\n\t}\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { BUND_LOGO_TEXT_MAP, Bundesamt, Bundesanstalt, Bundesministerium } from '../../enums/bund';\nimport { translate } from '../../i18n';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { setState } from '../../utils/prop.validators';\nimport { API, States } from './types';\n\nfunction enumToArray(enumeration: Record<string, string>, enumAsMap: Map<string, string> = new Map()): Map<string, string> {\n\tObject.entries(enumeration).map(([key, value]) => {\n\t\tenumAsMap.set(value, key);\n\t});\n\treturn enumAsMap;\n}\n\nconst ENUM_AS_MAP = enumToArray(Bundesamt, enumToArray(Bundesanstalt, enumToArray(Bundesministerium)));\n\nfunction getAriaLabel(organ: string): string {\n\tif (ENUM_AS_MAP.has(organ)) {\n\t\treturn ENUM_AS_MAP.get(organ) as string;\n\t} else {\n\t\treturn '';\n\t}\n}\n\nconst Adler = (): JSX.Element => (\n\t<path\n\t\td=\"M21.72,12.77c0.04-0.33,0.06-0.67,0.06-1c0-0.2,0-0.43,0-0.69c3.06,0,5.74-2.25,5.74-4.78\nc-0.09-1.07-0.56-2.08-1.32-2.84l0.32-0.07c1,0.89,1.61,2.14,1.7,3.48c0,3-3,5.85-6.5,5.92 M18.64,2.21\nc-0.05-0.33-0.19-0.64-0.39-0.91c0-0.31,0.14-0.61,0.64-0.36c-0.27,0.27-0.06,0.76-0.06,0.76s0.55-0.26,0.44-0.62\nC20.09,1.28,19.5,2.38,18.64,2.21 M17.93,3.77c-0.12-0.47-0.34-0.9-0.64-1.27c-0.3-0.42-0.77-0.69-1.29-0.73\nc-0.34,0.03-0.68,0.12-1,0.25c-0.16-0.28-0.27-0.58-0.32-0.9c0-0.22,0.38-0.44,1.1-0.44c1.58,0,2.52,0.71,2.52,1.91\nC18.26,3.01,18.14,3.41,17.93,3.77 M22,24.16c0.13,0,0.26,0.02,0.38,0.07c0.64,1.3,1.4,2.53,2.29,3.68l0,0l0,0\nc0.81-0.14,1.63-0.22,2.45-0.24l0,0c0.1-0.01,0.2,0.01,0.28,0.07c0.07,0.09,0.1,0.2,0.09,0.31c-0.01,0.28-0.08,0.55-0.21,0.79\nc-0.46-0.4-1.07-0.59-1.68-0.51c-0.24,0.01-0.48,0.05-0.71,0.12h-0.07h-0.07l0.48,0.49c0.77,0.83,1.44,1.43,1.44,1.83\nc-0.04,0.31-0.22,0.58-0.48,0.74c-0.22-0.98-0.8-1.84-1.62-2.42h-0.06v0.27c0,0.19,0,0.47,0,0.77c0,1.49-0.15,1.72-0.67,1.72\nc-0.09,0.01-0.19,0.01-0.28,0c0.33-0.49,0.48-1.08,0.41-1.67v-0.7c0-0.27,0.03-0.53,0.06-0.8v-0.11h-0.08\nc-0.33-0.05-0.67-0.09-1-0.1c-0.57-0.07-1.14,0.07-1.6,0.41c-0.24-0.18-0.41-0.44-0.48-0.73c0-0.32,0.19-0.34,0.45-0.34\nc0.14-0.01,0.27-0.01,0.41,0c0.59,0.09,1.18,0.13,1.78,0.12h0.06v-0.06c-0.5-1.13-1.18-2.17-2-3.09c0.1-0.35,0.2-0.59,0.54-0.59\nM12.64,27.87v0.06h0.06c0.55-0.01,1.1-0.06,1.64-0.16c0.14-0.01,0.27-0.01,0.41,0c0.26,0,0.45,0,0.45,0.34\nc-0.07,0.29-0.24,0.55-0.48,0.73c-0.46-0.34-1.03-0.49-1.6-0.41c-0.33,0.01-0.67,0.05-1,0.1H12v0.11\nc0.03,0.27,0.06,0.53,0.06,0.8v0.7c-0.05,0.58,0.1,1.15,0.42,1.63c-0.09,0.01-0.19,0.01-0.28,0c-0.52,0-0.67-0.23-0.67-1.72\nc0-0.3,0-0.58,0-0.77V29l-0.06,0.05c-0.82,0.58-1.39,1.44-1.61,2.42c-0.28-0.14-0.47-0.4-0.53-0.7c0-0.43,0.65-1.07,1.39-1.81\nl0.43-0.43v-0.06h-0.14c-0.23-0.07-0.47-0.11-0.71-0.12c-0.61-0.08-1.22,0.11-1.68,0.51c-0.13-0.24-0.2-0.51-0.21-0.79\nc0.01-0.11,0.06-0.22,0.14-0.3c0.08-0.06,0.18-0.08,0.28-0.07l0,0c0.82,0.02,1.64,0.1,2.45,0.24l0,0l0,0\nc0.88-1.15,1.64-2.38,2.28-3.68c0.12-0.05,0.25-0.07,0.38-0.07c0.35,0,0.44,0.24,0.54,0.59c-0.82,0.92-1.5,1.96-2,3.09\nM7.78,6.87c0.08-1.36,0.7-2.62,1.72-3.52l0.32,0.07C9.06,4.19,8.6,5.19,8.51,6.26c0,2.56,2.73,4.78,5.82,4.78\nc0,0.22,0,0.45,0,0.69c-0.01,0.35,0,0.69,0.03,1.04c-3.5,0-6.58-2.86-6.58-5.92 M31.25,12.23c1.57,2.49,2.8,2.45,4.66,2.45\nc-1.19-0.97-2.21-2.14-3-3.46L30,6.65c-0.29-1.44-1.03-2.75-2.12-3.73c0.31-0.1,0.6-0.24,0.87-0.42c-1.88,0-3.73-1-4.75-1\nc-0.55-0.05-1.03,0.36-1.08,0.91c0,0.58,0.63,1.16,1.73,1.16c0.31,0,0.62-0.04,0.92-0.09c0.65,0.74,1.03,1.67,1.08,2.65\nc0,2-2.41,3.58-4.83,3.58h-0.41c-0.5-0.67-0.84-1.45-1-2.28c0-1.6,1.05-2.9,1.05-4.48c0-0.68-0.24-1.33-0.67-1.85\nc0.29-0.23,0.53-0.52,0.7-0.85c-0.22,0.08-0.45,0.11-0.68,0.09c-1.16,0-2.11-0.3-3-0.3c-0.53,0-0.67,0.16-0.67,0.31\nc-0.01,0.05-0.01,0.1,0,0.15c-0.19-0.08-0.39-0.13-0.59-0.17c-0.29-0.05-0.58-0.08-0.88-0.08c-1.13,0-1.52,0.47-1.52,0.87\nc0.07,0.52,0.27,1.01,0.57,1.44c0.4-0.2,0.84-0.31,1.28-0.34c0.6,0,1.13,0.57,1.41,1.24c-0.29,0.05-0.59,0.07-0.88,0.07\nc-0.68-0.03-1.36-0.16-2-0.39l0,0c0,0,0.31,0.56,0.92,0.78c0.72,0.22,1.46,0.37,2.21,0.45c-0.08,0.21-0.23,0.38-0.43,0.49\nc-0.05,0.02-0.09,0.02-0.14,0c-0.74-0.14-1.45-0.35-2.14-0.65H14.9c0,0.42,1.09,1.35,2.07,1.71c-1.06,1.1-1.87,2.41-2.39,3.85\nh-0.41c-2.42,0-4.82-1.57-4.82-3.58c0.05-0.98,0.43-1.91,1.07-2.65c0.3,0.05,0.61,0.09,0.92,0.09c1.1,0,1.69-0.58,1.74-1.16\nc-0.04-0.55-0.52-0.96-1.07-0.92c0,0,0,0-0.01,0c-1,0-2.88,1-4.76,1C7.51,2.73,7.8,2.87,8.11,2.97C7.03,3.94,6.29,5.23,6,6.65\nl-2.87,4.59c-0.79,1.32-1.81,2.49-3,3.46c1.86,0,3.09,0,4.66-2.45L6.26,9.9c0.11,0.31,0.24,0.61,0.4,0.9l-2.97,4.67\nc-0.79,1.32-1.8,2.49-3,3.46c1.85,0,3.08,0,4.65-2.44l2.52-4c0.19,0.2,0.39,0.4,0.6,0.58l-3.59,5.7c-0.79,1.32-1.8,2.49-3,3.45\nc1.85,0,3.08,0.05,4.65-2.44L10,14.2c0.22,0.14,0.46,0.28,0.7,0.41l-4.27,6.77c-0.79,1.31-1.81,2.48-3,3.45\nc1.85,0,3.08,0,4.65-2.44l4.36-7c0.25,0.1,0.51,0.2,0.78,0.28l-4.95,7.9c-0.79,1.31-1.81,2.48-3,3.45c1.85,0,3.08,0.05,4.65-2.43\nl5.24-8.39h0.16c0.14,0.42,0.22,0.86,0.24,1.3c0,2.64-1.73,5-3.8,6.76c0.19,0.06,0.38,0.09,0.58,0.08c0.3,0.01,0.6-0.01,0.9-0.05\nc-0.57,1.13-1.24,2.21-2,3.23c-0.77-0.13-1.54-0.2-2.32-0.22c-0.67,0-0.75,0.4-0.75,0.75c-0.01,0.53,0.22,1.03,0.62,1.38\nc0.13-0.31,0.38-0.73,1.63-0.73h0.13C10.11,29.13,9,30.06,9,30.77c0.06,0.66,0.59,1.18,1.25,1.24c-0.02-0.14-0.02-0.28,0-0.42\nc0.13-0.69,0.48-1.33,1-1.8c-0.01,0.1-0.01,0.2,0,0.3c0,1.43,0.13,2.08,1,2.08c0.31-0.01,0.61-0.12,0.86-0.31\nc-0.5-0.44-0.73-1.11-0.62-1.77c0-0.21,0-0.41,0-0.69c0.02-0.2,0.02-0.41,0-0.61c0.24-0.02,0.47-0.02,0.71,0\nc0,0,1.29-0.1,1.6,0.57c0.35-0.32,0.86-0.78,0.86-1.27c0-0.33-0.16-0.71-0.83-0.71c-0.25,0-1,0.16-1.7,0.16\nc0.48-0.84,1.04-1.64,1.66-2.39c0.1,0.39,0.31,0.74,0.62,1c0.12-1.17,0.54-2.28,1.21-3.24c0.16,0.93,0.24,1.87,0.23,2.82\nc0,3.55-0.85,6.17-2.66,6.67c0.26,0.46,0.73,0.75,1.25,0.78c0.66,0,1-0.75,1.39-1.46c0.19,0.53,0.72,1.8,1.25,1.8\ns1.06-1.27,1.25-1.8c0.37,0.71,0.73,1.46,1.39,1.46c0.52-0.03,1-0.33,1.26-0.78c-1.82-0.5-2.67-3.12-2.67-6.67\nc-0.01-0.95,0.07-1.89,0.23-2.82c0.68,0.96,1.1,2.07,1.21,3.24c0.31-0.26,0.53-0.61,0.63-1c0.61,0.75,1.15,1.54,1.62,2.38\nc-0.66,0-1.45-0.16-1.7-0.16c-0.67,0-0.82,0.38-0.82,0.71c0,0.49,0.51,1,0.86,1.27c0.3-0.67,1.59-0.57,1.59-0.57\nc0.24-0.02,0.47-0.02,0.71,0c-0.02,0.2-0.02,0.41,0,0.61v0.69c0.11,0.66-0.12,1.33-0.62,1.77c0.25,0.19,0.55,0.3,0.86,0.31\nc0.91,0,1-0.65,1-2.08c0.01-0.1,0.01-0.2,0-0.3c0.52,0.47,0.87,1.11,1,1.8c0.02,0.14,0.02,0.28,0,0.42\nc0.61-0.11,1.06-0.62,1.12-1.23c0-0.74-1.15-1.67-1.52-2.08h0.13c1.25,0,1.5,0.42,1.63,0.73c0.4-0.35,0.63-0.85,0.62-1.38\nc0-0.35-0.07-0.75-0.75-0.75c-0.78,0.02-1.55,0.09-2.32,0.22c-0.76-1.02-1.43-2.1-2-3.23c0.3,0.04,0.6,0.06,0.9,0.05\nc0.19,0.01,0.39-0.02,0.57-0.08c-2.07-1.79-3.8-4.12-3.8-6.76c0.02-0.44,0.1-0.88,0.24-1.3h0.16l5.24,8.39\nc1.57,2.48,2.8,2.43,4.65,2.43c-1.19-0.97-2.21-2.14-3-3.45l-4.92-7.87c0.27-0.08,0.53-0.18,0.79-0.28l4.35,7\nc1.57,2.48,2.8,2.44,4.65,2.44c-1.19-0.97-2.21-2.14-3-3.45l-4.23-6.77c0.24-0.13,0.48-0.27,0.7-0.41l3.42,5.55\nc1.57,2.49,2.8,2.44,4.65,2.44c-1.19-0.97-2.21-2.13-3-3.45l-3.55-5.69c0.2-0.18,0.4-0.38,0.59-0.58l2.52,4\nc1.57,2.48,2.8,2.44,4.65,2.44c-1.2-0.97-2.21-2.14-3-3.46l-2.99-4.7c0.16-0.29,0.29-0.59,0.4-0.9L31.25,12.23z\"\n\t></path>\n);\n\n@Component({\n\ttag: 'kol-logo',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLogo implements API {\n\t/*\n\t Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an.\n\t */\n\t@Prop() public _org!: Bundesministerium \| Bundesamt \| Bundesanstalt;\n\n\t@State() public state: States = {\n\t\t_org: Bundesanstalt['Informationstechnikzentrum Bund'],\n\t};\n\n\t@Watch('_org')\n\tpublic validateOrg(value?: Bundesministerium \| Bundesamt \| Bundesanstalt): void {\n\t\tif (typeof value === 'string' && ENUM_AS_MAP.has(value)) {\n\t\t\tsetState(this, '_org', value);\n\t\t} else {\n\t\t\tdevHint(`Die verwendete Abkürzung (${value as string}) ist nicht definiert!`);\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOrg(this._org);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<svg\n\t\t\t\taria-label={translate('kol-logo-description', { placeholders: { orgShort: this.state._org, orgLong: getAriaLabel(this.state._org) } })}\n\t\t\t\trole=\"img\"\n\t\t\t\tviewBox=\"0 0 225 100\"\n\t\t\t>\n\t\t\t\t<rect width=\"100%\" height=\"100%\" fill=\"white\"></rect>\n\t\t\t\t<svg x=\"0\" y=\"4\" height=\"75\">\n\t\t\t\t\t<Adler />\n\t\t\t\t</svg>\n\t\t\t\t<svg x=\"40.5\" y=\"3.5\" height=\"100\">\n\t\t\t\t\t<rect width=\"5\" height=\"30\"></rect>\n\t\t\t\t\t<rect y=\"30\" width=\"5\" height=\"30\" fill=\"red\"></rect>\n\t\t\t\t\t<rect y=\"60\" width=\"5\" height=\"30\" fill=\"#fc0\"></rect>\n\t\t\t\t</svg>\n\t\t\t\t<svg x=\"50\" y=\"0\">\n\t\t\t\t\t<text x=\"0\" y=\"-0.05em\" font-family=\"BundesSans Web\" style={{ backgroundColor: 'white', color: 'black' }}>\n\t\t\t\t\t\t{BUND_LOGO_TEXT_MAP.has(this.state._org) ? (\n\t\t\t\t\t\t\t<tspan>\n\t\t\t\t\t\t\t\t{BUND_LOGO_TEXT_MAP.get(this.state._org)?.map((text: string, index: number) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\" key={`kol-logo-text-${index}`}>\n\t\t\t\t\t\t\t\t\t\t\t{text}\n\t\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<tspan fill=\"red\">\n\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\">\n\t\t\t\t\t\t\t\t\tDer Schlüsselwert\n\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\" font-weight=\"bold\">\n\t\t\t\t\t\t\t\t\t'{this.state._org}'\n\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\">\n\t\t\t\t\t\t\t\t\tist nicht definiert.\n\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\">\n\t\t\t\t\t\t\t\t\toder freigegeben.\n\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t</svg>\n\t\t);\n\t}\n}\n"],"mappings":";;;oUAAA,MAAMA,EAAkB,8mGCQxB,SAASC,EAAYC,EAAqCC,EAAiC,IAAIC,KAC9FC,OAAOC,QAAQJ,GAAaK,KAAI,EAAEC,EAAKC,MACtCN,EAAUO,IAAID,EAAOD,EAAI,IAE1B,OAAOL,CACR,CAEA,MAAMQ,EAAcV,EAAYW,EAAWX,EAAYY,EAAeZ,EAAYa,KAElF,SAASC,EAAaC,GACrB,GAAIL,EAAYM,IAAID,GAAQ,CAC3B,OAAOL,EAAYO,IAAIF,E,KACjB,CACN,MAAO,E,CAET,CAEA,MAAMG,EAAQ,IACbC,EAAA,QACCC,EAAE,slM,MAiESC,EAAO,M,wDAMa,CAC/BC,KAAMV,EAAc,mC,CAId,WAAAW,CAAYf,GAClB,UAAWA,IAAU,UAAYE,EAAYM,IAAIR,GAAQ,CACxDgB,EAASC,KAAM,OAAQjB,E,KACjB,CACNkB,EAAQ,6BAA6BlB,0B,EAIhC,iBAAAmB,GACNF,KAAKF,YAAYE,KAAKH,K,CAGhB,MAAAM,G,MACN,OACCT,EAAA,oBACaU,EAAU,uBAAwB,CAAEC,aAAc,CAAEC,SAAUN,KAAKO,MAAMV,KAAMW,QAASnB,EAAaW,KAAKO,MAAMV,SAC5HY,KAAK,MACLC,QAAQ,eAERhB,EAAA,QAAMiB,MAAM,OAAOC,OAAO,OAAOC,KAAK,UACtCnB,EAAA,OAAKoB,EAAE,IAAIC,EAAE,IAAIH,OAAO,MACvBlB,EAACD,EAAK,OAEPC,EAAA,OAAKoB,EAAE,OAAOC,EAAE,MAAMH,OAAO,OAC5BlB,EAAA,QAAMiB,MAAM,IAAIC,OAAO,OACvBlB,EAAA,QAAMqB,EAAE,KAAKJ,MAAM,IAAIC,OAAO,KAAKC,KAAK,QACxCnB,EAAA,QAAMqB,EAAE,KAAKJ,MAAM,IAAIC,OAAO,KAAKC,KAAK,UAEzCnB,EAAA,OAAKoB,EAAE,KAAKC,EAAE,KACbrB,EAAA,QAAMoB,EAAE,IAAIC,EAAE,UAAS,cAAa,iBAAiBC,MAAO,CAAEC,gBAAiB,QAASC,MAAO,UAC7FC,EAAmB5B,IAAIS,KAAKO,MAAMV,MAClCH,EAAA,cACE0B,EAAAD,EAAmB3B,IAAIQ,KAAKO,MAAMV,SAAK,MAAAuB,SAAA,SAAAA,EAAEvC,KAAI,CAACwC,EAAcC,IAE3D5B,EAAA,SAAOoB,EAAE,IAAIS,GAAG,QAAQzC,IAAK,iBAAiBwC,KAC5CD,MAML3B,EAAA,SAAOmB,KAAK,OACXnB,EAAA,SAAOoB,EAAE,IAAIS,GAAG,SAAO,qBAGvB7B,EAAA,SAAOoB,EAAE,IAAIS,GAAG,QAAO,cAAa,QAAM,IACvCvB,KAAKO,MAAMV,KAAI,KAElBH,EAAA,SAAOoB,EAAE,IAAIS,GAAG,SAAO,wBAGvB7B,EAAA,SAAOoB,EAAE,IAAIS,GAAG,SAAO,wB"}

package/dist/kolibri/kol-modal.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e}from"./index-9c30809b.js";import{v as i}from"./label-d63f8231.js";import{f as a}from"./a11y.tipps-29a5e350.js";import{e as l}from"./dev.utils-365879e7.js";import{w as o,s,d as r}from"./prop.validators-9bbd95a9.js";import"./reuse-b3566e4c.js";const h="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.overlay {\n\t\tbackground-color: rgba(0, 0, 0, 0.33);\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\tinset: 0;\n\t\tposition: fixed;\n\t\twidth: 100%;\n\t\tz-index: 100;\n\t}\n\n\t.modal {\n\t\tmargin: auto;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n}\n",d=class{constructor(n){t(this,n),this.onKeyDown=t=>{t&&"Escape"===t.code&&(this._activeElement=null)},this._activeElement=void 0,this._label=void 0,this._on=void 0,this._width="100%",this.state={_activeElement:null,_label:"…",_width:"100%"}}componentDidRender(){this.hostElement&&(this.state._activeElement?l().Modal.openModal(this.hostElement,this.state._activeElement):l().Modal.closeModal(this.hostElement))}disconnectedCallback(){this.hostElement&&l().Modal.closeModal(this.hostElement)}render(){return n(e,{ref:t=>{this.hostElement=t}},this.state._activeElement&&n("div",{class:"overlay"},n("div",{class:"modal",style:{width:this.state._width},"aria-label":this.state._label,"aria-modal":"true",role:"dialog",onKeyDown:this.onKeyDown,ref:t=>{t&&(t.setAttribute("tabindex","0"),setTimeout((()=>t.focus()),250))}},n("slot",null))))}validateActiveElement(t){o(this,"_activeElement",(t=>"object"==typeof t||null===t),new Set(["HTMLElement","null"]),t,{defaultValue:null,hooks:{afterPatch:()=>{var t;null===this._activeElement&&(null===(t=this.state._on)||void 0===t?void 0:t.onClose)&&this.state._on.onClose()}}})}validateLabel(t){i(this,t)}validateOn(t){if("object"==typeof t&&null!==t){a("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const n={};"function"!=typeof t.onClose&&!0!==t.onClose||(n.onClose=t.onClose),s(this,"_on",n)}}validateWidth(t){r(this,"_width",t,{defaultValue:"100%"})}componentWillLoad(){this.validateActiveElement(this._activeElement),this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width)}static get watchers(){return{_activeElement:["validateActiveElement"],_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"]}}};d.style={default:h};export{d as kol_modal};
+import{r as t,h as n,H as e}from"./index-9c30809b.js";import{v as i}from"./label-2cb169c2.js";import{f as a}from"./a11y.tipps-ce35f0ba.js";import{e as l}from"./dev.utils-34544843.js";import{w as o,s,d as r}from"./prop.validators-b0d023a4.js";import"./reuse-b3566e4c.js";const h="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.overlay {\n\t\tbackground-color: rgba(0, 0, 0, 0.33);\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\tinset: 0;\n\t\tposition: fixed;\n\t\twidth: 100%;\n\t\tz-index: 100;\n\t}\n\n\t.modal {\n\t\tmargin: auto;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n}\n",d=class{constructor(n){t(this,n),this.onKeyDown=t=>{t&&"Escape"===t.code&&(this._activeElement=null)},this._activeElement=void 0,this._label=void 0,this._on=void 0,this._width="100%",this.state={_activeElement:null,_label:"…",_width:"100%"}}componentDidRender(){this.hostElement&&(this.state._activeElement?l().Modal.openModal(this.hostElement,this.state._activeElement):l().Modal.closeModal(this.hostElement))}disconnectedCallback(){this.hostElement&&l().Modal.closeModal(this.hostElement)}render(){return n(e,{ref:t=>{this.hostElement=t}},this.state._activeElement&&n("div",{class:"overlay"},n("div",{class:"modal",style:{width:this.state._width},"aria-label":this.state._label,"aria-modal":"true",role:"dialog",onKeyDown:this.onKeyDown,ref:t=>{t&&(t.setAttribute("tabindex","0"),setTimeout((()=>t.focus()),250))}},n("slot",null))))}validateActiveElement(t){o(this,"_activeElement",(t=>"object"==typeof t||null===t),new Set(["HTMLElement","null"]),t,{defaultValue:null,hooks:{afterPatch:()=>{var t;null===this._activeElement&&(null===(t=this.state._on)||void 0===t?void 0:t.onClose)&&this.state._on.onClose()}}})}validateLabel(t){i(this,t)}validateOn(t){if("object"==typeof t&&null!==t){a("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const n={};"function"!=typeof t.onClose&&!0!==t.onClose||(n.onClose=t.onClose),s(this,"_on",n)}}validateWidth(t){r(this,"_width",t,{defaultValue:"100%"})}componentWillLoad(){this.validateActiveElement(this._activeElement),this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width)}static get watchers(){return{_activeElement:["validateActiveElement"],_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"]}}};d.style={default:h};export{d as kol_modal};

package/dist/kolibri/kol-nav.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e}from"./index-9c30809b.js";import{a as i}from"./i18n-08622fb5.js";import{a,w as l}from"./prop.validators-9bbd95a9.js";import{v as s}from"./hide-label-864b40c5.js";import{v as o}from"./label-d63f8231.js";import{g as r,b as h,d}from"./a11y.tipps-29a5e350.js";import{r as c,a as p}from"./unique-nav-labels-c6750f60.js";import{w as u}from"./validation-f6f3bfaa.js";import"./index-44a0c937.js";import"./dev.utils-365879e7.js";import"./reuse-b3566e4c.js";const m=(t,n)=>{a(t,"_collapsible",n)},b=(t,n)=>{a(t,"_hasCompactButton",n)},f="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host > div {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\tnav {\n\t\twidth: 100%;\n\t}\n\n\t.list {\n\t\tdisplay: flex;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.list.vertical {\n\t\tflex-direction: column;\n\t}\n\n\t.entry {\n\t\tdisplay: flex;\n\t}\n\n\t.button-link-text-switch {\n\t\tflex-grow: 1;\n\t}\n\n\t.entry kol-span-wc {\n\t\tjustify-items: start;\n\t}\n}\n",v=class{constructor(e){t(this,e),this.onClick=t=>{t._active=!t._active,this.state=Object.assign({},this.state)},this.hasActiveChild=t=>!!(Array.isArray(t._children)&&t._children.length>0)&&t._children.some(this.hasActiveChild),this.linkList=t=>n("ul",{class:"list "+(0===t.deep&&"horizontal"===t.orientation?" horizontal":" vertical"),"data-deep":t.deep},t.links.map(((n,e)=>this.li(t.collapsible,t.hideLabel,t.deep,e,n,t.orientation)))),this._ariaCurrentValue=!1,this._collapsible=!0,this._hasCompactButton=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_ariaCurrentValue:!1,_collapsible:!0,_hasCompactButton:!1,_hideLabel:!1,_label:"…",_links:[],_orientation:"vertical"}}entry(t,e,i,a,l){return n("div",{class:{entry:!0,"hide-label":e}},n("kol-button-link-text-switch",{class:"button-link-text-switch",_link:Object.assign(Object.assign({},a),{_hideLabel:e})}),i?this.expandButton(t,a,l):"")}expandButton(t,e,i){return n("kol-button-wc",{class:"expand-button",_ariaExpanded:i,_disabled:!t,_icons:"codicon codicon-"+(i?"remove":"add"),_hideLabel:!0,_label:`Untermenü zu ${e._label} ${i?"schließen":"öffnen"}`,_on:{onClick:()=>this.onClick(e)}})}li(t,e,i,a,l,s){const o=!!l._active,r=Array.isArray(l._children)&&l._children.length>0,h=r&&o;return n("li",{class:{active:o,expanded:h,"has-children":r},key:a},this.entry(t,e,r,l,o),h?n(this.linkList,{collapsible:t,hideLabel:e,deep:i+1,links:l._children||[],orientation:s}):"")}render(){let t=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(t=!1,r("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const a=!0===this.state._collapsible,l=!0===this.state._hideLabel,s=this.state._orientation;return n(e,null,n("div",{class:{[s]:!0}},n("nav",{"aria-label":this.state._label,id:"nav"},n(this.linkList,{collapsible:a,hideLabel:l,deep:0,links:this.state._links,orientation:s})),t&&n("div",{class:"compact"},n("kol-button",{_ariaControls:"nav",_ariaExpanded:!l,_icons:l?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:i(l?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_variant:"ghost"}))))}validateAriaCurrentValue(t){l(this,"_ariaCurrentValue",(t=>!0===t||"date"===t||"location"===t||"page"===t||"step"===t||"time"===t),new Set(["boolean","String {data, location, page, step, time}"]),t)}validateCollapsible(t){m(this,t)}validateHasCompactButton(t){b(this,t)}validateHideLabel(t){s(this,t)}validateLabel(t,n,e=!1){e||c(this.state._label),o(this,t),h(t),p(this.state._label)}validateLinks(t){u("KolNav",this,t),d("[KolNav] Die Navigationsstruktur wird noch nicht rekursiv validiert.")}validateOrientation(t){l(this,"_orientation",(t=>"horizontal"===t||"vertical"===t),new Set(["Orientation {horizontal, vertical}"]),t,{defaultValue:"vertical"})}componentWillLoad(){this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation)}disconnectedCallback(){c(this.state._label)}static get watchers(){return{_ariaCurrentValue:["validateAriaCurrentValue"],_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};v.style={default:f};export{v as kol_nav};
+import{r as t,h as n,H as e}from"./index-9c30809b.js";import{a as i}from"./i18n-bb569ab8.js";import{a,w as l}from"./prop.validators-b0d023a4.js";import{v as s}from"./hide-label-29f1b0eb.js";import{v as o}from"./label-2cb169c2.js";import{g as r,b as h,d}from"./a11y.tipps-ce35f0ba.js";import{r as c,a as p}from"./unique-nav-labels-c6750f60.js";import{w as u}from"./validation-6962a682.js";import"./index-7a38e9a3.js";import"./dev.utils-34544843.js";import"./reuse-b3566e4c.js";const b=(t,n)=>{a(t,"_collapsible",n)},m=(t,n)=>{a(t,"_hasCompactButton",n)},f="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host > div {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\tnav {\n\t\twidth: 100%;\n\t}\n\n\t.list {\n\t\tdisplay: flex;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.list.vertical {\n\t\tflex-direction: column;\n\t}\n\n\t.entry {\n\t\tdisplay: flex;\n\t}\n\n\t.button-link-text-switch {\n\t\tflex-grow: 1;\n\t}\n\n\t.entry kol-span-wc {\n\t\tjustify-items: start;\n\t}\n}\n",v=class{constructor(e){t(this,e),this.onClick=t=>{t._active=!t._active,this.state=Object.assign({},this.state)},this.hasActiveChild=t=>!!(Array.isArray(t._children)&&t._children.length>0)&&t._children.some(this.hasActiveChild),this.linkList=t=>n("ul",{class:"list "+(0===t.deep&&"horizontal"===t.orientation?" horizontal":" vertical"),"data-deep":t.deep},t.links.map(((n,e)=>this.li(t.collapsible,t.hideLabel,t.deep,e,n,t.orientation)))),this._ariaCurrentValue=!1,this._collapsible=!0,this._hasCompactButton=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_ariaCurrentValue:!1,_collapsible:!0,_hasCompactButton:!1,_hideLabel:!1,_label:"…",_links:[],_orientation:"vertical"}}entry(t,e,i,a,l){return n("div",{class:{entry:!0,"hide-label":e}},n("kol-button-link-text-switch",{class:"button-link-text-switch",_link:Object.assign(Object.assign({},a),{_hideLabel:e})}),i?this.expandButton(t,a,l):"")}expandButton(t,e,i){return n("kol-button-wc",{class:"expand-button",_ariaExpanded:i,_disabled:!t,_icons:"codicon codicon-"+(i?"remove":"add"),_hideLabel:!0,_label:`Untermenü zu ${e._label} ${i?"schließen":"öffnen"}`,_on:{onClick:()=>this.onClick(e)}})}li(t,e,i,a,l,s){const o=!!l._active,r=Array.isArray(l._children)&&l._children.length>0,h=r&&o;return n("li",{class:{active:o,expanded:h,"has-children":r},key:a},this.entry(t,e,r,l,o),h?n(this.linkList,{collapsible:t,hideLabel:e,deep:i+1,links:l._children||[],orientation:s}):"")}render(){let t=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(t=!1,r("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const a=!0===this.state._collapsible,l=!0===this.state._hideLabel,s=this.state._orientation;return n(e,null,n("div",{class:{[s]:!0}},n("nav",{"aria-label":this.state._label,id:"nav"},n(this.linkList,{collapsible:a,hideLabel:l,deep:0,links:this.state._links,orientation:s})),t&&n("div",{class:"compact"},n("kol-button",{_ariaControls:"nav",_ariaExpanded:!l,_icons:l?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:i(l?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_variant:"ghost"}))))}validateAriaCurrentValue(t){l(this,"_ariaCurrentValue",(t=>!0===t||"date"===t||"location"===t||"page"===t||"step"===t||"time"===t),new Set(["boolean","String {data, location, page, step, time}"]),t)}validateCollapsible(t){b(this,t)}validateHasCompactButton(t){m(this,t)}validateHideLabel(t){s(this,t)}validateLabel(t,n,e=!1){e||c(this.state._label),o(this,t),h(t),p(this.state._label)}validateLinks(t){u("KolNav",this,t),d("[KolNav] Die Navigationsstruktur wird noch nicht rekursiv validiert.")}validateOrientation(t){l(this,"_orientation",(t=>"horizontal"===t||"vertical"===t),new Set(["Orientation {horizontal, vertical}"]),t,{defaultValue:"vertical"})}componentWillLoad(){this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation)}disconnectedCallback(){c(this.state._label)}static get watchers(){return{_ariaCurrentValue:["validateAriaCurrentValue"],_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};v.style={default:f};export{v as kol_nav};

package/dist/kolibri/kol-pagination.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as e}from"./index-9c30809b.js";import{a as n}from"./i18n-08622fb5.js";import{v as s}from"./custom-class-78068fe1.js";import{v as o}from"./label-d63f8231.js";import{v as a}from"./tooltip-align-e5d0e2b8.js";import{n as l}from"./dev.utils-365879e7.js";import{e as h,w as r,c as p,p as d}from"./prop.validators-9bbd95a9.js";import{r as c,a as u}from"./unique-nav-labels-c6750f60.js";import{S as f}from"./reuse-b3566e4c.js";import"./index-44a0c937.js";import"./a11y.tipps-29a5e350.js";import"./alignment-e8b3d455.js";const b=(t,e,n)=>{h(t,"_max",e,n)},g="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tgap: 1rem;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\t.navigation-list {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 0.5em;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.separator:before {\n\t\tcontent: '•••';\n\t}\n}\n",m={left:"codicon codicon-debug-reverse-continue"},_={left:"codicon codicon-chevron-left"},v={right:"codicon codicon-chevron-right"},y={right:"codicon codicon-debug-continue"},k=class{constructor(e){t(this,e),this.nonce=l(),this.calcCount=(t,e=1)=>Math.ceil(t/e),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this.onClick=(t,e)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,e),this.onChangePage(t,e)},this.onChangePage=(t,e)=>{const n=setTimeout((()=>{clearTimeout(n),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,e)}))},this.onChangePageSize=(t,e)=>{if("number"==typeof(e=parseInt(e[0]))&&e>0&&this._pageSize!==e){this._pageSize=e;const n=setTimeout((()=>{clearTimeout(n),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize)}))}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,e)=>{let n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;const i=e.has("_pageSizeOptions")?e.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(i)&&i.length>0){const t=i.find((t=>t.value===n));n=void 0===t?i[0].value:t.value,e.set("_pageSize",n)}const s=e.has("_page")?e.get("_page"):this.state._page,a=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,s,e.get("_pageSize"),a)},this.syncPage=(t,e,n,i)=>{if(i>0){const s=this.calcCount(i,n);s>0&&(e>s?(t.set("_page",s),this.onChangePage(f,s)):e<1&&(t.set("_page",1),this.onChangePage(f,1)))}},this.beforePageSizeOptions=(t,e)=>{const i=[];if(Array.isArray(t))for(const e of t)"number"==typeof e&&i.push({label:n("kol-page-per-site",{placeholders:{entries:`${e}`}}),value:e});e.set("_pageSizeOptions",i),this.beforePageSize(i,e)},this._boundaryCount=1,this._customClass=void 0,this._label=void 0,this._hasButtons=!0,this._page=void 0,this._pageSize=1,this._pageSizeOptions=[],this._on=void 0,this._siblingCount=1,this._tooltipAlign="top",this._max=void 0,this.state={_boundaryCount:1,_label:n("kol-pagination"),_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0}}render(){var t;let s=!1;const a=this.getCount(),o=Array.from(Array(a).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>a-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(s=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===s?(s=!1,i("li",null,i("span",{class:"separator",key:`${this.nonce}-el-${t}`,"aria-hidden":"true"}))):null));return i(e,null,i("nav",{"aria-label":this.state._label},i("ul",{class:"navigation-list"},this.state._hasButtons.first&&i("li",null,i("kol-button-wc",{class:"first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:m,_hideLabel:!0,_label:n("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&i("li",null,i("kol-button-wc",{class:"previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:_,_hideLabel:!0,_label:n("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),o,this.state._hasButtons.next&&i("li",null,i("kol-button-wc",{class:"next",exportparts:"icon",_customClass:this.state._customClass,_disabled:a<=this.state._page,_icons:v,_hideLabel:!0,_label:n("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&i("li",null,i("kol-button-wc",{class:"last",exportparts:"icon",_customClass:this.state._customClass,_disabled:a<=this.state._page,_icons:y,_hideLabel:!0,_label:n("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&i("kol-select",{_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:n("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return i("li",null,i("kol-button-wc",{exportparts:"icon",key:`${this.nonce}-${t}`,_customClass:this.state._customClass,_label:`${t}`,_on:{onClick:e=>{this.onClick(e,t)}}}))}getSelectedPageButton(t){return i("li",null,i("kol-button-wc",{class:"selected",key:`${this.nonce}-selected`,_customClass:this.state._customClass,_disabled:!0,_label:`${t}`}))}validateBoundaryCount(t){h(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){s(this,t)}validateLabel(t,e,n=!1){n||c(this.state._label),o(this,t),u(this.state._label)}validateHasButtons(t){r(this,"_hasButtons",(t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,e)=>{if("boolean"==typeof t)e.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=d(t)}catch(t){e.delete("_hasButtons")}"object"==typeof t&&null!==t&&e.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){h(this,"_page",t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize,i=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,t,n,i)}}})}validatePageSize(t){h(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){p(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){h(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){b(this,t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_page")?e.get("_page"):this.state._page,i=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;this.syncPage(e,n,i,t)}}})}validateTooltipAlign(t){a(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){c(this.state._label)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}};k.style={default:g};export{k as kol_pagination};
+import{r as t,h as i,H as n}from"./index-9c30809b.js";import{a as e}from"./i18n-bb569ab8.js";import{v as s}from"./custom-class-4f50e79f.js";import{v as o}from"./label-2cb169c2.js";import{v as a}from"./tooltip-align-f2f68cbf.js";import{n as l}from"./dev.utils-34544843.js";import{e as h,w as r,c as p,p as c}from"./prop.validators-b0d023a4.js";import{r as d,a as u}from"./unique-nav-labels-c6750f60.js";import{S as f}from"./reuse-b3566e4c.js";import"./index-7a38e9a3.js";import"./a11y.tipps-ce35f0ba.js";import"./alignment-e4b01638.js";const b=(t,e,i)=>{h(t,"_max",e,i)},g="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tgap: 1rem;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\t.navigation-list {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 0.5em;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.separator:before {\n\t\tcontent: '•••';\n\t}\n}\n",m={left:"codicon codicon-debug-reverse-continue"},_={left:"codicon codicon-chevron-left"},v={right:"codicon codicon-chevron-right"},y={right:"codicon codicon-debug-continue"},k=class{constructor(i){t(this,i),this.nonce=l(),this.calcCount=(t,e=1)=>Math.ceil(t/e),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this.onClick=(t,e)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,e),this.onChangePage(t,e)},this.onChangePage=(t,e)=>{const i=setTimeout((()=>{clearTimeout(i),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,e)}))},this.onChangePageSize=(t,e)=>{if("number"==typeof(e=parseInt(e[0]))&&e>0&&this._pageSize!==e){this._pageSize=e;const i=setTimeout((()=>{clearTimeout(i),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize)}))}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,e)=>{let i=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;const n=e.has("_pageSizeOptions")?e.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(n)&&n.length>0){const t=n.find((t=>t.value===i));i=void 0===t?n[0].value:t.value,e.set("_pageSize",i)}const s=e.has("_page")?e.get("_page"):this.state._page,a=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,s,e.get("_pageSize"),a)},this.syncPage=(t,e,i,n)=>{if(n>0){const s=this.calcCount(n,i);s>0&&(e>s?(t.set("_page",s),this.onChangePage(f,s)):e<1&&(t.set("_page",1),this.onChangePage(f,1)))}},this.beforePageSizeOptions=(t,i)=>{const n=[];if(Array.isArray(t))for(const i of t)"number"==typeof i&&n.push({label:e("kol-page-per-site",{placeholders:{entries:`${i}`}}),value:i});i.set("_pageSizeOptions",n),this.beforePageSize(n,i)},this._boundaryCount=1,this._customClass=void 0,this._label=void 0,this._hasButtons=!0,this._page=void 0,this._pageSize=1,this._pageSizeOptions=[],this._on=void 0,this._siblingCount=1,this._tooltipAlign="top",this._max=void 0,this.state={_boundaryCount:1,_label:e("kol-pagination"),_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0}}render(){var t;let s=!1;const a=this.getCount(),o=Array.from(Array(a).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>a-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(s=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===s?(s=!1,i("li",null,i("span",{class:"separator",key:`${this.nonce}-el-${t}`,"aria-hidden":"true"}))):null));return i(n,null,i("nav",{"aria-label":this.state._label},i("ul",{class:"navigation-list"},this.state._hasButtons.first&&i("li",null,i("kol-button-wc",{class:"first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:m,_hideLabel:!0,_label:e("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&i("li",null,i("kol-button-wc",{class:"previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:_,_hideLabel:!0,_label:e("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),o,this.state._hasButtons.next&&i("li",null,i("kol-button-wc",{class:"next",exportparts:"icon",_customClass:this.state._customClass,_disabled:a<=this.state._page,_icons:v,_hideLabel:!0,_label:e("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&i("li",null,i("kol-button-wc",{class:"last",exportparts:"icon",_customClass:this.state._customClass,_disabled:a<=this.state._page,_icons:y,_hideLabel:!0,_label:e("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&i("kol-select",{_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:e("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return i("li",null,i("kol-button-wc",{exportparts:"icon",key:`${this.nonce}-${t}`,_customClass:this.state._customClass,_label:`${t}`,_on:{onClick:e=>{this.onClick(e,t)}}}))}getSelectedPageButton(t){return i("li",null,i("kol-button-wc",{class:"selected",key:`${this.nonce}-selected`,_customClass:this.state._customClass,_disabled:!0,_label:`${t}`}))}validateBoundaryCount(t){h(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){s(this,t)}validateLabel(t,e,i=!1){i||d(this.state._label),o(this,t),u(this.state._label)}validateHasButtons(t){r(this,"_hasButtons",(t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,e)=>{if("boolean"==typeof t)e.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=c(t)}catch(t){e.delete("_hasButtons")}"object"==typeof t&&null!==t&&e.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){h(this,"_page",t,{hooks:{beforePatch:(t,e)=>{const i=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize,n=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,t,i,n)}}})}validatePageSize(t){h(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){p(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){h(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){b(this,t,{hooks:{beforePatch:(t,e)=>{const i=e.has("_page")?e.get("_page"):this.state._page,n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;this.syncPage(e,i,n,t)}}})}validateTooltipAlign(t){a(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){d(this.state._label)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}};k.style={default:g};export{k as kol_pagination};

package/dist/kolibri/kol-popover.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as i}from"./index-9c30809b.js";import{c as e,o as s,f as o,s as a,a as r}from"./floating-ui.dom.esm-e435ab9f.js";import{a as l}from"./alignment-e8b3d455.js";import{v as h}from"./show-4fbd910d.js";import{b as d}from"./dev.utils-365879e7.js";import{p}from"./reuse-b3566e4c.js";import"./prop.validators-9bbd95a9.js";import"./a11y.tipps-29a5e350.js";const c="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tkol-popover {\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .popover {\n\t\tbackground-color: #fff;\n\t\tmin-height: max-content;\n\t\tmin-width: max-content;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .hidden {\n\t\tdisplay: none;\n\t}\n\n\tkol-popover .show {\n\t\tanimation: 0.3s ease-in forwards fadeInOpacity;\n\t}\n\n\tkol-popover .disappear {\n\t\tanimation: 0.3s ease-in backwards fadeInOpacity;\n\t}\n\n\tkol-popover .arrow {\n\t\tbackground-color: inherit;\n\t\theight: var(--font-size);\n\t\tposition: absolute;\n\t\trotate: 0.125turn;\n\t\twidth: var(--font-size);\n\t\tz-index: -1;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n",f=class{constructor(n){t(this,n),this.alignPopover=t=>{setTimeout((()=>{var n;if("test"!==p&&this.triggerElement&&this.popoverElement){const i=this.triggerElement,l=this.popoverElement,h=this.arrowElement,p=[s(null!==(n=null==h?void 0:h.offsetHeight)&&void 0!==n?n:10),o(),a()];h&&p.push(r({element:h})),e(i,l,{placement:this.state._align,middleware:p}).then((({x:e,y:n,middlewareData:i,placement:o})=>{this.setPosition(e,n,i,o,t)}))}}))},this.showPopover=()=>{this.addListenersToBody(),this.alignPopover((()=>{this.state=Object.assign(Object.assign({},this.state),{_visible:!0})}))},this.hidePopoverByEscape=t=>{"Escape"===t.key&&this.hidePopover()},this.hidePopoverByClickOutside=t=>{this.host&&!this.host.contains(t.target)&&this.hidePopover()},this.catchHostAndTriggerElement=t=>{t&&(this.host=t,this.triggerElement=t.previousElementSibling)},this.catchPopoverElement=t=>{this.popoverElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this._show=!1,this.state={_align:"top",_show:!1,_visible:!1}}setPosition(t,e,n,i,o){if(this.popoverElement){const s={left:this.popoverElement.style.left,top:this.popoverElement.style.top};if(Object.assign(this.popoverElement.style,{left:`${t}px`,top:`${e}px`}),this.arrowElement&&n.arrow)switch(i){case"top":this.arrowElement.style.inset=`100% auto auto ${n.arrow.x||0}px`,this.arrowElement.style.translate="0 -50%";break;case"right":this.arrowElement.style.inset=`${n.arrow.y||0}px 100% auto auto`,this.arrowElement.style.translate="50% 0";break;case"bottom":this.arrowElement.style.inset=`auto auto 100% ${n.arrow.x||0}px`,this.arrowElement.style.translate="0 50%";break;case"left":this.arrowElement.style.inset=`${n.arrow.y||0}px auto auto 100%`,this.arrowElement.style.translate="-50% 0"}s.left!==this.popoverElement.style.left||s.top!==this.popoverElement.style.top?this.alignPopover(o):"function"==typeof o&&o()}}hidePopover(){var t;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody()}addListenersToBody(){var t;const e=d().body;e.addEventListener("keyup",this.hidePopoverByEscape),e.addEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.addEventListener("scroll",this.showPopover,{passive:!0})}removeListenersToBody(){var t;const e=d().body;e.removeEventListener("keyup",this.hidePopoverByEscape),e.removeEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.removeEventListener("scroll",this.showPopover)}render(){return n(i,{ref:this.catchHostAndTriggerElement},n("div",{class:{popover:!0,hidden:!this.state._show,show:this.state._visible},ref:this.catchPopoverElement},n("div",{class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),n("slot",null)))}validateAlign(t){l(this,t)}validateShow(t){h(this,t),t&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_show:["validateShow"]}}};f.style=c;export{f as kol_popover};
+import{r as t,h as n,H as i}from"./index-9c30809b.js";import{c as e,o as s,f as o,s as a,a as r}from"./floating-ui.dom.esm-e435ab9f.js";import{a as l}from"./alignment-e4b01638.js";import{v as h}from"./show-caf52695.js";import{b as d}from"./dev.utils-34544843.js";import{p}from"./reuse-b3566e4c.js";import"./prop.validators-b0d023a4.js";import"./a11y.tipps-ce35f0ba.js";const c="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tkol-popover {\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .popover {\n\t\tbackground-color: #fff;\n\t\tmin-height: max-content;\n\t\tmin-width: max-content;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .hidden {\n\t\tdisplay: none;\n\t}\n\n\tkol-popover .show {\n\t\tanimation: 0.3s ease-in forwards fadeInOpacity;\n\t}\n\n\tkol-popover .disappear {\n\t\tanimation: 0.3s ease-in backwards fadeInOpacity;\n\t}\n\n\tkol-popover .arrow {\n\t\tbackground-color: inherit;\n\t\theight: var(--font-size);\n\t\tposition: absolute;\n\t\trotate: 0.125turn;\n\t\twidth: var(--font-size);\n\t\tz-index: -1;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n",f=class{constructor(n){t(this,n),this.alignPopover=t=>{setTimeout((()=>{var n;if("test"!==p&&this.triggerElement&&this.popoverElement){const i=this.triggerElement,l=this.popoverElement,h=this.arrowElement,p=[s(null!==(n=null==h?void 0:h.offsetHeight)&&void 0!==n?n:10),o(),a()];h&&p.push(r({element:h})),e(i,l,{placement:this.state._align,middleware:p}).then((({x:e,y:n,middlewareData:i,placement:o})=>{this.setPosition(e,n,i,o,t)}))}}))},this.showPopover=()=>{this.addListenersToBody(),this.alignPopover((()=>{this.state=Object.assign(Object.assign({},this.state),{_visible:!0})}))},this.hidePopoverByEscape=t=>{"Escape"===t.key&&this.hidePopover()},this.hidePopoverByClickOutside=t=>{this.host&&!this.host.contains(t.target)&&this.hidePopover()},this.catchHostAndTriggerElement=t=>{t&&(this.host=t,this.triggerElement=t.previousElementSibling)},this.catchPopoverElement=t=>{this.popoverElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this._show=!1,this.state={_align:"top",_show:!1,_visible:!1}}setPosition(t,e,n,i,o){if(this.popoverElement){const s={left:this.popoverElement.style.left,top:this.popoverElement.style.top};if(Object.assign(this.popoverElement.style,{left:`${t}px`,top:`${e}px`}),this.arrowElement&&n.arrow)switch(i){case"top":this.arrowElement.style.inset=`100% auto auto ${n.arrow.x||0}px`,this.arrowElement.style.translate="0 -50%";break;case"right":this.arrowElement.style.inset=`${n.arrow.y||0}px 100% auto auto`,this.arrowElement.style.translate="50% 0";break;case"bottom":this.arrowElement.style.inset=`auto auto 100% ${n.arrow.x||0}px`,this.arrowElement.style.translate="0 50%";break;case"left":this.arrowElement.style.inset=`${n.arrow.y||0}px auto auto 100%`,this.arrowElement.style.translate="-50% 0"}s.left!==this.popoverElement.style.left||s.top!==this.popoverElement.style.top?this.alignPopover(o):"function"==typeof o&&o()}}hidePopover(){var t;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody()}addListenersToBody(){var t;const e=d().body;e.addEventListener("keyup",this.hidePopoverByEscape),e.addEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.addEventListener("scroll",this.showPopover,{passive:!0})}removeListenersToBody(){var t;const e=d().body;e.removeEventListener("keyup",this.hidePopoverByEscape),e.removeEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.removeEventListener("scroll",this.showPopover)}render(){return n(i,{ref:this.catchHostAndTriggerElement},n("div",{class:{popover:!0,hidden:!this.state._show,show:this.state._visible},ref:this.catchPopoverElement},n("div",{class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),n("slot",null)))}validateAlign(t){l(this,t)}validateShow(t){h(this,t),t&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_show:["validateShow"]}}};f.style=c;export{f as kol_popover};

package/dist/kolibri/kol-progress.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e}from"./index-9c30809b.js";import{v as r}from"./label-d63f8231.js";import{e as i,d as a,w as l}from"./prop.validators-9bbd95a9.js";import"./a11y.tipps-29a5e350.js";import"./dev.utils-365879e7.js";import"./reuse-b3566e4c.js";var s;!function(t){t.bar="bar",t.cycle="cycle",t["cycle-value-label"]="cycle-value-label",t["cycle-label-value"]="cycle-label-value"}(s||(s={}));const o="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tprogress {\n\t\tdisplay: block;\n\t\theight: 0;\n\t\toverflow: hidden;\n\t\twidth: 0;\n\t}\n\n\t.bar .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.bar .background {\n\t\tfill: lightgray;\n\t\tstroke: white;\n\t}\n\n\t.bar .progress {\n\t\tfill: #0075ff;\n\t\tstroke: transparent;\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t.cycle .background {\n\t\tfill: transparent;\n\t\tstroke: lightgray;\n\t}\n\n\t.cycle .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.cycle .whitespace {\n\t\tfill: transparent;\n\t\tstroke: white;\n\t}\n\n\t.cycle .progress {\n\t\tfill: transparent;\n\t\tstroke: #0075ff;\n\t\ttransform-origin: 50% 50%;\n\t\ttransform: rotate(-90deg);\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */\n\t@media (prefers-reduced-motion) {\n\t\t.progress {\n\t\t\ttransition-duration: 0s;\n\t\t\ttransition-delay: 0s;\n\t\t}\n\t}\n}\n",c=Object.keys(s),d=t=>{let e="43%",a=t._label?"57%":"50%";switch(t._variant){case"cycle-value-label":t._label&&(e="57%",a="43%");case"cycle":case"cycle-label-value":return n("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},n("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),n("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),n("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("circle",{class:"progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(t._value/t._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),t._label&&n("text",{"aria-hidden":"true",x:"50%",y:e,"text-anchor":"middle",fill:"currentColor"},t._label),n("text",{"aria-hidden":"true",x:"50%",y:a,"text-anchor":"middle",fill:"currentColor"},t._value,t._unit));default:return n("div",{class:"bar"},t._label&&n("div",null,t._label),n("div",{style:{display:"flex",gap:"0.3em"}},n("svg",{width:"100",viewBox:"0 0 102 8",xmlns:"http://www.w3.org/2000/svg"},n("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100"}),n("rect",{class:"progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:t._value/t._max*95}),n("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100"})),n("text",{"aria-hidden":"true","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},t._value,t._unit)))}},h=class{constructor(e){t(this,e),this._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return n(e,null,d(this.state),n("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),n("span",{"aria-live":"polite","aria-relevant":"removals text",hidden:!0},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(t){r(this,t)}validateMax(t){"number"!=typeof t&&(t=100),i(this,"_max",t,{required:!0})}validateUnit(t){a(this,"_unit",t)}validateValue(t){"number"!=typeof t&&(t=0),i(this,"_value",t,{required:!0})}validateVariant(t){l(this,"_variant",(t=>"string"==typeof t&&c.includes(t)),new Set(c),t)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};h.style={default:o};export{h as kol_progress};
+import{r as t,h as n,H as e}from"./index-9c30809b.js";import{v as r}from"./label-2cb169c2.js";import{e as i,d as a,w as l}from"./prop.validators-b0d023a4.js";import"./a11y.tipps-ce35f0ba.js";import"./dev.utils-34544843.js";import"./reuse-b3566e4c.js";var s;!function(t){t.bar="bar",t.cycle="cycle",t["cycle-value-label"]="cycle-value-label",t["cycle-label-value"]="cycle-label-value"}(s||(s={}));const o="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tprogress {\n\t\tdisplay: block;\n\t\theight: 0;\n\t\toverflow: hidden;\n\t\twidth: 0;\n\t}\n\n\t.bar .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.bar .background {\n\t\tfill: lightgray;\n\t\tstroke: white;\n\t}\n\n\t.bar .progress {\n\t\tfill: #0075ff;\n\t\tstroke: transparent;\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t.cycle .background {\n\t\tfill: transparent;\n\t\tstroke: lightgray;\n\t}\n\n\t.cycle .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.cycle .whitespace {\n\t\tfill: transparent;\n\t\tstroke: white;\n\t}\n\n\t.cycle .progress {\n\t\tfill: transparent;\n\t\tstroke: #0075ff;\n\t\ttransform-origin: 50% 50%;\n\t\ttransform: rotate(-90deg);\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */\n\t@media (prefers-reduced-motion) {\n\t\t.progress {\n\t\t\ttransition-duration: 0s;\n\t\t\ttransition-delay: 0s;\n\t\t}\n\t}\n}\n",c=Object.keys(s),d=t=>{let e="43%",a=t._label?"57%":"50%";switch(t._variant){case"cycle-value-label":t._label&&(e="57%",a="43%");case"cycle":case"cycle-label-value":return n("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},n("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),n("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),n("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("circle",{class:"progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(t._value/t._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),t._label&&n("text",{"aria-hidden":"true",x:"50%",y:e,"text-anchor":"middle",fill:"currentColor"},t._label),n("text",{"aria-hidden":"true",x:"50%",y:a,"text-anchor":"middle",fill:"currentColor"},t._value,t._unit));default:return n("div",{class:"bar"},t._label&&n("div",null,t._label),n("div",{style:{display:"flex",gap:"0.3em"}},n("svg",{width:"100",viewBox:"0 0 102 8",xmlns:"http://www.w3.org/2000/svg"},n("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100"}),n("rect",{class:"progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:t._value/t._max*95}),n("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100"})),n("text",{"aria-hidden":"true","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},t._value,t._unit)))}},h=class{constructor(e){t(this,e),this._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return n(e,null,d(this.state),n("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),n("span",{"aria-live":"polite","aria-relevant":"removals text",hidden:!0},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(t){r(this,t)}validateMax(t){"number"!=typeof t&&(t=100),i(this,"_max",t,{required:!0})}validateUnit(t){a(this,"_unit",t)}validateValue(t){"number"!=typeof t&&(t=0),i(this,"_value",t,{required:!0})}validateVariant(t){l(this,"_variant",(t=>"string"==typeof t&&c.includes(t)),new Set(c),t)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};h.style={default:o};export{h as kol_progress};

package/dist/kolibri/kol-quote.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e}from"./index-9c30809b.js";import{v as i}from"./label-d63f8231.js";import{d as a,w as o}from"./prop.validators-9bbd95a9.js";import{s}from"./reuse-b3566e4c.js";import"./a11y.tipps-29a5e350.js";import"./dev.utils-365879e7.js";const r=["block","inline"],l="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tcite,\n\tfigure,\n\tq + figcaption {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tblockquote:before {\n\t\tcontent: open-quote;\n\t}\n\n\tblockquote::after {\n\t\tcontent: close-quote;\n\t}\n\n\tcite:before {\n\t\tcontent: '—';\n\t}\n\n\t.block cite:before {\n\t\tpadding-right: 0.5em;\n\t}\n\n\t.inline cite:before {\n\t\tpadding: 0.5em;\n\t}\n}\n",h=class{constructor(n){t(this,n),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateLabel(t){i(this,t)}validateHref(t){a(this,"_href",t,{required:!0})}validateQuote(t){a(this,"_quote",t,{required:!0})}validateVariant(t){o(this,"_variant",(t=>"string"==typeof t&&r.includes(t)),new Set(r),t)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const t=s(this.state._quote);return n(e,null,n("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?n("blockquote",{cite:this.state._href},this.state._quote,n("span",{"aria-hidden":t?void 0:"true",hidden:!t},n("slot",{name:"expert"}))):n("q",{cite:this.state._href},this.state._quote,n("span",{"aria-hidden":t?void 0:"true",hidden:!t},n("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&n("figcaption",null,n("cite",null,n("kol-link",{_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};h.style={default:l};export{h as kol_quote};
+import{r as t,h as n,H as e}from"./index-9c30809b.js";import{v as i}from"./label-2cb169c2.js";import{d as a,w as o}from"./prop.validators-b0d023a4.js";import{s}from"./reuse-b3566e4c.js";import"./a11y.tipps-ce35f0ba.js";import"./dev.utils-34544843.js";const r=["block","inline"],l="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tcite,\n\tfigure,\n\tq + figcaption {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tblockquote:before {\n\t\tcontent: open-quote;\n\t}\n\n\tblockquote::after {\n\t\tcontent: close-quote;\n\t}\n\n\tcite:before {\n\t\tcontent: '—';\n\t}\n\n\t.block cite:before {\n\t\tpadding-right: 0.5em;\n\t}\n\n\t.inline cite:before {\n\t\tpadding: 0.5em;\n\t}\n}\n",h=class{constructor(n){t(this,n),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateLabel(t){i(this,t)}validateHref(t){a(this,"_href",t,{required:!0})}validateQuote(t){a(this,"_quote",t,{required:!0})}validateVariant(t){o(this,"_variant",(t=>"string"==typeof t&&r.includes(t)),new Set(r),t)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const t=s(this.state._quote);return n(e,null,n("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?n("blockquote",{cite:this.state._href},this.state._quote,n("span",{"aria-hidden":t?void 0:"true",hidden:!t},n("slot",{name:"expert"}))):n("q",{cite:this.state._href},this.state._quote,n("span",{"aria-hidden":t?void 0:"true",hidden:!t},n("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&n("figcaption",null,n("cite",null,n("kol-link",{_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};h.style={default:l};export{h as kol_quote};

package/dist/kolibri/kol-select.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,F as e,H as n,r as i,g as s}from"./index-9c30809b.js";import{n as a}from"./dev.utils-365879e7.js";import{s as l,t as o}from"./events-2bb1065b.js";import{S as r,a as h,s as d}from"./reuse-b3566e4c.js";import{v as p,g as u}from"./controller-039bdc8a.js";import{I as c}from"./InternalUnderlinedAccessKey-f593c389.js";import{f,v as m}from"./controller-5c808627.js";import{v as y}from"./rows-f0d81385.js";import{a as v}from"./a11y.tipps-29a5e350.js";import{a as b,c as g}from"./prop.validators-9bbd95a9.js";import{I as _}from"./controller-icon-df4caeef.js";import"./hide-label-864b40c5.js";import"./label-d63f8231.js";import"./tab-index-7088e34e.js";import"./associated.controller-44a2c750.js";import"./icons-548e1642.js";class k extends _{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),f(this.keyOptionMap,n);const t=e.has("_value")?e.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],n);!1===this.component._multiple&&0===i.length?(e.set("_value",[n[0].value]),this.onStateChange()):Array.isArray(t)&&i.length<t.length&&(e.set("_value",i),this.onStateChange())}},this.component=t}validateHideError(t){p(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&v("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateOptions(t){m(this.component,t,{hooks:{beforePatch:this.beforePatchOptions}})}validateMultiple(t){b(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchOptions}})}validateRequired(t){b(this.component,"_required",t)}validateRows(t){y(this.component,t)}validateValue(t){g(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchOptions}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(r)}))}},this.validateHideError(this.component._hideError),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const x="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t/* input[type='checkbox'], */\n\t/* input[type='radio'], */\n\t/* input[type='range'], */\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n",w=(t,e)=>Array.isArray(t)&&t.includes(e),z=class{renderOptgroup(e,n){var i;return t("optgroup",{disabled:e.disabled,label:e.label},null===(i=e.options)||void 0===i?void 0:i.map(((e,i)=>{const a=`${n}-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:e.disabled,key:a,selected:w(this.state._value,e.value),value:a},e.label)})))}render(){const{ariaDescribedBy:i}=u(this.state),a=d(this.state._label);return t(n,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{"hide-label":!!this.state._hideLabel,select:!0},_accessKey:this.state._accessKey,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},a?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey?t(e,null,t(c,{accessKey:this.state._accessKey,label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):t("span",null,this.state._label)),t("div",{slot:"input"},t("select",{ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows,spellcheck:"false",onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus,onChange:this.onChange},this.state._options.map(((e,n)=>{const i=`-${n}`;return Array.isArray(e.options)?this.renderOptgroup(e,i):t("option",{disabled:e.disabled,key:i,selected:w(this.state._value,e.value),value:i},e.label)}))))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,h(this.host,this.ref)},this.onChange=t=>{var e,n;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),l(t),o("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${a()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.controller=new k(this,"select",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};z.style={default:x};export{z as kol_select};
+import{h as t,F as e,H as n,r as i,g as s}from"./index-9c30809b.js";import{n as a}from"./dev.utils-34544843.js";import{s as l,t as o}from"./events-2bb1065b.js";import{S as r,a as h,s as d}from"./reuse-b3566e4c.js";import{v as p,g as u}from"./controller-2924ea0a.js";import{I as c}from"./InternalUnderlinedAccessKey-f593c389.js";import{f,v as m}from"./controller-b4e5201d.js";import{v as y}from"./rows-16012802.js";import{a as v}from"./a11y.tipps-ce35f0ba.js";import{a as b,c as g}from"./prop.validators-b0d023a4.js";import{I as _}from"./controller-icon-d242ea16.js";import"./hide-label-29f1b0eb.js";import"./label-2cb169c2.js";import"./tab-index-9201352c.js";import"./associated.controller-6fc585ca.js";import"./icons-7806a223.js";class k extends _{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),f(this.keyOptionMap,n);const t=e.has("_value")?e.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],n);!1===this.component._multiple&&0===i.length?(e.set("_value",[n[0].value]),this.onStateChange()):Array.isArray(t)&&i.length<t.length&&(e.set("_value",i),this.onStateChange())}},this.component=t}validateHideError(t){p(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&v("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateOptions(t){m(this.component,t,{hooks:{beforePatch:this.beforePatchOptions}})}validateMultiple(t){b(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchOptions}})}validateRequired(t){b(this.component,"_required",t)}validateRows(t){y(this.component,t)}validateValue(t){g(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchOptions}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(r)}))}},this.validateHideError(this.component._hideError),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const x="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t/* input[type='checkbox'], */\n\t/* input[type='radio'], */\n\t/* input[type='range'], */\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n",w=(t,e)=>Array.isArray(t)&&t.includes(e),z=class{renderOptgroup(e,n){var i;return t("optgroup",{disabled:e.disabled,label:e.label},null===(i=e.options)||void 0===i?void 0:i.map(((e,i)=>{const a=`${n}-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:e.disabled,key:a,selected:w(this.state._value,e.value),value:a},e.label)})))}render(){const{ariaDescribedBy:i}=u(this.state),a=d(this.state._label);return t(n,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{"hide-label":!!this.state._hideLabel,select:!0},_accessKey:this.state._accessKey,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},a?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey?t(e,null,t(c,{accessKey:this.state._accessKey,label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):t("span",null,this.state._label)),t("div",{slot:"input"},t("select",{ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows,spellcheck:"false",onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus,onChange:this.onChange},this.state._options.map(((e,n)=>{const i=`-${n}`;return Array.isArray(e.options)?this.renderOptgroup(e,i):t("option",{disabled:e.disabled,key:i,selected:w(this.state._value,e.value),value:i},e.label)}))))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,h(this.host,this.ref)},this.onChange=t=>{var e,n;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),l(t),o("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${a()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.controller=new k(this,"select",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};z.style={default:x};export{z as kol_select};

package/dist/kolibri/kol-skip-nav.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n}from"./index-9c30809b.js";import{v as e}from"./label-d63f8231.js";import{r as i,a}from"./unique-nav-labels-c6750f60.js";import{w as l}from"./validation-f6f3bfaa.js";import"./a11y.tipps-29a5e350.js";import"./dev.utils-365879e7.js";import"./reuse-b3566e4c.js";import"./prop.validators-9bbd95a9.js";const o="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tul {\n\t\tdisplay: grid;\n\t\tlist-style: none;\n\t\tplace-items: center;\n\t}\n\n\tul li {\n\t\theight: 0;\n\t}\n\n\tkol-link-wc a {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\tkol-link-wc a:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tposition: unset;\n\t}\n}\n",s=class{constructor(n){t(this,n),this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return n("nav",{"aria-label":this.state._label},n("ul",null,this.state._links.map(((t,e)=>n("li",{key:e},n("kol-link-wc",Object.assign({},t)))))))}validateLabel(t,n,l=!1){l||i(this.state._label),e(this,t),a(this.state._label)}validateLinks(t){l("KolSkipNav",this,t)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){i(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};s.style={default:o};export{s as kol_skip_nav};
+import{r as t,h as n}from"./index-9c30809b.js";import{v as e}from"./label-2cb169c2.js";import{r as i,a}from"./unique-nav-labels-c6750f60.js";import{w as l}from"./validation-6962a682.js";import"./a11y.tipps-ce35f0ba.js";import"./dev.utils-34544843.js";import"./reuse-b3566e4c.js";import"./prop.validators-b0d023a4.js";const o="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tul {\n\t\tdisplay: grid;\n\t\tlist-style: none;\n\t\tplace-items: center;\n\t}\n\n\tul li {\n\t\theight: 0;\n\t}\n\n\tkol-link-wc a {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\tkol-link-wc a:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tposition: unset;\n\t}\n}\n",s=class{constructor(n){t(this,n),this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return n("nav",{"aria-label":this.state._label},n("ul",null,this.state._links.map(((t,e)=>n("li",{key:e},n("kol-link-wc",Object.assign({},t)))))))}validateLabel(t,n,l=!1){l||i(this.state._label),e(this,t),a(this.state._label)}validateLinks(t){l("KolSkipNav",this,t)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){i(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};s.style={default:o};export{s as kol_skip_nav};