@public-ui/components 4.0.0-beta.1 → 4.0.0-rc.1

package/dist/kolibri/kol-combobox.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,r as e,g as n}from"./index-CNB6DDYH.js";import{c as i}from"./clsx-eK3rPvPS.js";import{d as o,e as s}from"./component-names-B_kYyA8u.js";import{a,F as l}from"./FormFieldStateWrapper-l-rR4TUt.js";import{I as r,a as h}from"./controller-icon-BFLVQWdQ.js";import{I as d}from"./InputStateWrapper-DCe8K4CP.js";import{C as c,a as u}from"./CustomSuggestionsOptionsGroup-CEwvneq2.js";import{t as m}from"./i18n-CvQhdUrE.js";import{n as p}from"./dev.utils-BIeLAoxm.js";import{d as f,e as b}from"./common-BXXICkFX.js";import{v as g}from"./placeholder-C0qu-_xi.js";import{v as k}from"./required-IJ-wNQGn.js";import{v}from"./suggestions-CsvpWHvb.js";import"./access-and-short-key-BlB0ZAri.js";import"./disabled-D0wfAqak.js";import"./hide-label-90DGA8H4.js";import"./label-Dkj9sxQK.js";import"./tooltip-align-P-7pyT1i.js";import"./align-C_bkzA-y.js";import"./events-CY36RKEq.js";import"./associated.controller-ByKVIoVY.js";import"./bootstrap-bsjlQuLF.js";import"./i18n-B0tfVPMa.js";import"./isObject-DvSELytj.js";import"./tslib.es6-CxX45GIN.js";import"./reuse-CX4AQDkS.js";import"./InternalUnderlinedBadgeText-BFxFxw0s.js";import"./Alert-DE6PjZZh.js";import"./bem-Bj_mJ2nm.js";import"./browser-DaourpHc.js";import"./Heading-CHhFhzd-.js";import"./Icon-D2_cARs6.js";import"./icons-DpMX_jnF.js";import"./Input-CXD5asyc.js";class y extends r{constructor(e,t,n){super(e,t,n),this.component=e}validateHasClearButton(e){f(this.component,"_hasClearButton",e)}validatePlaceholder(e){g(this.component,e)}validateRequired(e){k(this.component,e)}validateSuggestions(e){v(this.component,e)}validateValue(e){b(this.component,"_value",e)}componentWillLoad(){super.componentWillLoad(),this.validateHasClearButton(this.component._hasClearButton),this.validatePlaceholder(this.component._placeholder),this.validateRequired(this.component._required),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const _='/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    line-height: 1.5;\n    white-space: normal;\n    cursor: pointer;\n    overflow-wrap: break-word;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n  .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-options-group {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n    cursor: not-allowed;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-combobox__delete .kol-button {\n    cursor: pointer;\n  }\n  .kol-combobox__delete--disabled .kol-button {\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n    cursor: pointer;\n  }\n  .kol-custom-suggestions-toggle--disabled {\n    opacity: 0.5;\n  }\n}',w=class{async getValue(){return this.state._value}async focus(){var e;return Promise.resolve(null===(e=this.refInput)||void 0===e?void 0:e.focus())}selectOption(e){var t;this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:e}}),!0,e),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:e}}),e),this.controller.setFormAssociatedValue(e),this.state._value=e,null===(t=this.refInput)||void 0===t||t.focus()}clearSelection(){var e;if(!0===this.state._disabled)return;const t="";this._focusedOptionIndex=-1,this._value=t,this.state._value=t,this._filteredSuggestions=[...this.state._suggestions],this._isOpen=!1;const n={name:this.state._name,value:t};this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:n}),!0,t),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:n}),t),this.controller.setFormAssociatedValue(t),null===(e=this.refInput)||void 0===e||e.focus()}onInput(e){const t=e.target;this.state._value=t.value,this._value=t.value,this.controller.onFacade.onInput(e),this.setFilteredSuggestionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredSuggestionsByQuery(e){""===e.trim()?this._filteredSuggestions=[...this.state._suggestions]:(this._filteredSuggestions=Array.isArray(this.state._suggestions)?this.state._suggestions.filter(t=>t.toLowerCase().includes(e.toLowerCase())):this._filteredSuggestions,this._isOpen=!!(this._filteredSuggestions&&this._filteredSuggestions.length>0))}moveFocus(e){if(!this._filteredSuggestions)return;let t=this._focusedOptionIndex+e;t>=this._filteredSuggestions.length&&(t=0),t<0&&(t=this._filteredSuggestions.length-1),this.focusOption(t)}focusOption(e){if(this._focusedOptionIndex=e,this.refSuggestions){const t=this.refSuggestions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.findIndex(e=>e.toLowerCase().startsWith(t));"number"==typeof n&&this.focusOption(n)}getFormFieldProps(){return{state:this.state,class:i("kol-combobox",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:e}=a(this.state),t=!0===this.state._disabled;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,class:"kol-combobox__input",type:"text",role:"combobox","aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":e.length>0?e.join(" "):void 0,"aria-expanded":this._isOpen?"true":"false","aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-labelledby":this.state._id,"aria-keyshortcuts":this.state._shortKey,value:this.state._value,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",disabled:t,customSuggestions:!0,id:this.state._id,name:this.state._name,required:this.state._required},this.controller.onFacade),{onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},onChange:this.onChange.bind(this),onInput:this.onInput.bind(this),placeholder:this.state._placeholder})}render(){const e=!0===this.state._disabled;return t(l,Object.assign({key:"cbd013af84eddc131e32b69743d50bebb89ab0c5"},this.getFormFieldProps()),t(h,{key:"535b4a33165c1f440589cf302ed01f157a1be32a",state:this.state},t("div",{key:"792a4944ee12462a0f7eb851b1b17213d70353b7",class:"kol-combobox__group"},t(d,Object.assign({key:"f656e9e9387c40d54e0d68745e6394cab9a35d3a"},this.getInputProps())),this.state._value&&this.state._hasClearButton&&t(o,{key:"f41a15aac631825b41c0319db08a71e3aac19deb",_icons:"kolicon-cross",_label:this.translateDeleteSelection,_hideLabel:!0,_disabled:e,"data-testid":"combobox-delete",class:i("kol-combobox__delete",{"kol-combobox__delete--disabled":e}),_on:{onClick:()=>{this.clearSelection()}}}),t(s,{key:"e26e181a6c4f4a3fc1035823c88b35123447a10f",_icons:"kolicon-chevron-down",_label:"",class:i("kol-custom-suggestions-toggle",{"kol-custom-suggestions-toggle--disabled":e}),onClick:this.toggleListbox.bind(this)})),this._isOpen&&!e&&t(c,{key:"c7d248cdee473e36a53d275a1b02a29cdaa9d77a",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map((e,n)=>t(u,{disabled:!1,index:n,option:e,searchTerm:this.state._value,ref:e=>{e&&(this.refSuggestions[n]=e)},selected:this.state._value===e,onClick:()=>{this.selectOption(e),this.toggleListbox(),this._isOpen=!1},onMouseOver:()=>{this.blockSuggestionMouseOver||this.focusOption(n)},onFocus:()=>{this.focusOption(n)},onKeyDown:t=>{"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),this.toggleListbox(),t.preventDefault())}})))))}handleKeyDown(e){var t,n;const o=(t,n)=>{var o;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(o=this.refInput)||void 0===o||o.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,o(!0,()=>this.moveFocus(1));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,o(!0,()=>this.moveFocus(-1));break;case"Tab":this._isOpen&&(this._isOpen=!1,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":this._isOpen=!1,e.preventDefault(),null===(n=this.refInput)||void 0===n||n.focus();break;case"NumpadEnter":case"Enter":this._isOpen&&this._focusedOptionIndex>=0?(this._filteredSuggestions&&this.selectOption(this._filteredSuggestions[this._focusedOptionIndex]),this._isOpen=!1):this.toggleListbox(),e.preventDefault();break;case"Home":this.blockSuggestionMouseOver=!0,o(void 0,()=>{this._isOpen&&this.focusOption(0)});break;case"End":this.blockSuggestionMouseOver=!0,o(void 0,()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)});break;case"PageUp":this.blockSuggestionMouseOver=!0,o(void 0,()=>this._isOpen&&this.moveFocus(-10));break;case"PageDown":this.blockSuggestionMouseOver=!0,o(void 0,()=>this._isOpen&&this.moveFocus(10))}}handleWindowClick(e){void 0===this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(t){e(this,t),this.refSuggestions=[],this._focusedOptionIndex=-1,this.translateDeleteSelection=m("kol-delete-selection"),this.toggleListbox=()=>{var e;if(!0===this.state._disabled)this._isOpen=!1;else if(null===(e=this.refInput)||void 0===e||e.focus(),this._isOpen)this._isOpen=!1;else if(Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){this._isOpen=!0;const e=this._filteredSuggestions.findIndex(e=>e===this.state._value);this._focusedOptionIndex=e>=0?e:-1,this.focusOption(this._focusedOptionIndex)}},this.catchRef=e=>{this.refInput=e},this.blockSuggestionMouseOver=!1,this._isOpen=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._hasClearButton=!0,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hasClearButton:!0,_hideMsg:!1,_id:`id-${p()}`,_label:"",_suggestions:[],_value:""},this.inputHasFocus=!1,this.controller=new y(this,"combobox",this.host),this.onInput=this.onInput.bind(this)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSuggestions(e){this.controller.validateSuggestions(e),this._filteredSuggestions=e}validateHasClearButton(e){this.controller.validateHasClearButton(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.controller.setFormAssociatedValue(e)}componentWillLoad(){this.refSuggestions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e),this._filteredSuggestions=this.state._suggestions}handleMouseEvent(){this.blockSuggestionMouseOver=!1}handleFocusOut(){setTimeout(()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()},0)}handleWindowBlur(){this.onBlur()}onBlur(){var e;this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus())}onChange(e){this.controller.onFacade.onChange(e),this.controller.setFormAssociatedValue(this.state._value)}get host(){return n(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_hasClearButton:["validateHasClearButton"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};w.style={default:_};export{w as kol_combobox};
+import{h as t,r as e,g as n}from"./index-DFgGNwim.js";import{c as i}from"./clsx-eK3rPvPS.js";import{d as o,e as s}from"./component-names-B_kYyA8u.js";import{a,F as l}from"./FormFieldStateWrapper-BHmBylve.js";import{I as r,a as h}from"./controller-icon-DVn6Cu11.js";import{I as d}from"./InputStateWrapper-nNWlOdvD.js";import{C as c,a as u}from"./CustomSuggestionsOptionsGroup-CO2m8_Fx.js";import{t as m}from"./i18n-CvQhdUrE.js";import{n as p}from"./dev.utils-BZrysPuC.js";import{d as f,e as b}from"./common-BXXICkFX.js";import{v as g}from"./placeholder-C0qu-_xi.js";import{v as k}from"./required-IJ-wNQGn.js";import{v}from"./suggestions-CsvpWHvb.js";import"./access-and-short-key-BlB0ZAri.js";import"./disabled-D0wfAqak.js";import"./hide-label-90DGA8H4.js";import"./label-Dkj9sxQK.js";import"./tooltip-align-P-7pyT1i.js";import"./align-C_bkzA-y.js";import"./events-DHTi_wtD.js";import"./associated.controller-ByKVIoVY.js";import"./bootstrap-bsjlQuLF.js";import"./i18n-B0tfVPMa.js";import"./isObject-DvSELytj.js";import"./tslib.es6-CxX45GIN.js";import"./reuse-CX4AQDkS.js";import"./InternalUnderlinedBadgeText-Cbb0Z9wm.js";import"./Alert-DLUhAh8c.js";import"./bem-De7JANRY.js";import"./browser-DaourpHc.js";import"./Heading-FFu5Vo7m.js";import"./Icon-Cn2VAvfI.js";import"./icons-DpMX_jnF.js";import"./Input-DMK0LJNA.js";class y extends r{constructor(e,t,n){super(e,t,n),this.component=e}validateHasClearButton(e){f(this.component,"_hasClearButton",e)}validatePlaceholder(e){g(this.component,e)}validateRequired(e){k(this.component,e)}validateSuggestions(e){v(this.component,e)}validateValue(e){b(this.component,"_value",e)}componentWillLoad(){super.componentWillLoad(),this.validateHasClearButton(this.component._hasClearButton),this.validatePlaceholder(this.component._placeholder),this.validateRequired(this.component._required),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const _='/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    line-height: 1.5;\n    white-space: normal;\n    cursor: pointer;\n    overflow-wrap: break-word;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n  .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-options-group {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n    cursor: not-allowed;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-combobox__delete .kol-button {\n    cursor: pointer;\n  }\n  .kol-combobox__delete--disabled .kol-button {\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n    cursor: pointer;\n  }\n  .kol-custom-suggestions-toggle--disabled {\n    opacity: 0.5;\n  }\n}',w=class{async getValue(){return this.state._value}async focus(){var e;return Promise.resolve(null===(e=this.refInput)||void 0===e?void 0:e.focus())}selectOption(e){var t;this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:e}}),!0,e),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:e}}),e),this.controller.setFormAssociatedValue(e),this.state._value=e,null===(t=this.refInput)||void 0===t||t.focus()}clearSelection(){var e;if(!0===this.state._disabled)return;const t="";this._focusedOptionIndex=-1,this._value=t,this.state._value=t,this._filteredSuggestions=[...this.state._suggestions],this._isOpen=!1;const n={name:this.state._name,value:t};this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:n}),!0,t),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:n}),t),this.controller.setFormAssociatedValue(t),null===(e=this.refInput)||void 0===e||e.focus()}onInput(e){const t=e.target;this.state._value=t.value,this._value=t.value,this.controller.onFacade.onInput(e),this.setFilteredSuggestionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredSuggestionsByQuery(e){""===e.trim()?this._filteredSuggestions=[...this.state._suggestions]:(this._filteredSuggestions=Array.isArray(this.state._suggestions)?this.state._suggestions.filter(t=>t.toLowerCase().includes(e.toLowerCase())):this._filteredSuggestions,this._isOpen=!!(this._filteredSuggestions&&this._filteredSuggestions.length>0))}moveFocus(e){if(!this._filteredSuggestions)return;let t=this._focusedOptionIndex+e;t>=this._filteredSuggestions.length&&(t=0),t<0&&(t=this._filteredSuggestions.length-1),this.focusOption(t)}focusOption(e){if(this._focusedOptionIndex=e,this.refSuggestions){const t=this.refSuggestions[e];null==t||t.focus()}}selectFocusedOption(){return!!(this._filteredSuggestions&&this._focusedOptionIndex>=0&&this._focusedOptionIndex<this._filteredSuggestions.length)&&(this.selectOption(this._filteredSuggestions[this._focusedOptionIndex]),!0)}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.findIndex(e=>e.toLowerCase().startsWith(t));"number"==typeof n&&this.focusOption(n)}getFormFieldProps(){return{state:this.state,class:i("kol-combobox",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:e}=a(this.state),t=!0===this.state._disabled;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,class:"kol-combobox__input",type:"text",role:"combobox","aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":e.length>0?e.join(" "):void 0,"aria-expanded":this._isOpen?"true":"false","aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-labelledby":this.state._id,"aria-keyshortcuts":this.state._shortKey,value:this.state._value,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",disabled:t,customSuggestions:!0,id:this.state._id,name:this.state._name,required:this.state._required},this.controller.onFacade),{onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},onChange:this.onChange.bind(this),onInput:this.onInput.bind(this),placeholder:this.state._placeholder})}render(){const e=!0===this.state._disabled;return t(l,Object.assign({key:"86e494402f3c76cc2261ef0209e7e8402e7da393"},this.getFormFieldProps()),t(h,{key:"f37f72abf8ae989d26f287cd3814199be5b9f91b",state:this.state},t("div",{key:"5e78e37110397d040dbbc95befa51d22f7b8614e",class:"kol-combobox__group"},t(d,Object.assign({key:"bb89a59229a0993b95ca5c6f4279dd446d1d54cc"},this.getInputProps())),this.state._value&&this.state._hasClearButton&&t(o,{key:"6a594a033eef861829ebf94c93dc1aa3e1d6e6e4",_icons:"kolicon-cross",_label:this.translateDeleteSelection,_hideLabel:!0,_disabled:e,"data-testid":"combobox-delete",class:i("kol-combobox__delete",{"kol-combobox__delete--disabled":e}),_on:{onClick:()=>{this.clearSelection()}}}),t(s,{key:"9e1e5b8d303e6dbf9b23cd9166a01d878edbc01a",_icons:"kolicon-chevron-down",_label:"",class:i("kol-custom-suggestions-toggle",{"kol-custom-suggestions-toggle--disabled":e}),onClick:this.toggleListbox.bind(this)})),this._isOpen&&!e&&t(c,{key:"2608f9700e5dab1b0f826255922ca3111d96868d",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map((e,n)=>t(u,{disabled:!1,index:n,option:e,searchTerm:this.state._value,ref:e=>{e&&(this.refSuggestions[n]=e)},selected:this.state._value===e,onClick:()=>{this.selectOption(e),this.toggleListbox(),this._isOpen=!1},onMouseOver:()=>{this.blockSuggestionMouseOver||this.focusOption(n)},onFocus:()=>{this.focusOption(n)},onKeyDown:t=>{"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),this.toggleListbox(),t.preventDefault())}})))))}handleKeyDown(e){var t,n;const o=(t,n)=>{var o;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(o=this.refInput)||void 0===o||o.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,o(!0,()=>this.moveFocus(1));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,o(!0,()=>this.moveFocus(-1));break;case"Tab":this._isOpen&&(this._isOpen=!1,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":this._isOpen=!1,e.preventDefault(),null===(n=this.refInput)||void 0===n||n.focus();break;case" ":case"Enter":case"NumpadEnter":this._isOpen?this.selectFocusedOption()&&(this._isOpen=!1):this.toggleListbox(),e.preventDefault();break;case"Home":this.blockSuggestionMouseOver=!0,o(void 0,()=>{this._isOpen&&this.focusOption(0)});break;case"End":this.blockSuggestionMouseOver=!0,o(void 0,()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)});break;case"PageUp":this.blockSuggestionMouseOver=!0,o(void 0,()=>this._isOpen&&this.moveFocus(-10));break;case"PageDown":this.blockSuggestionMouseOver=!0,o(void 0,()=>this._isOpen&&this.moveFocus(10))}}handleWindowClick(e){void 0===this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(t){e(this,t),this.refSuggestions=[],this._focusedOptionIndex=-1,this.translateDeleteSelection=m("kol-delete-selection"),this.toggleListbox=()=>{var e;if(!0===this.state._disabled)this._isOpen=!1;else if(null===(e=this.refInput)||void 0===e||e.focus(),this._isOpen)this._isOpen=!1;else if(Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){this._isOpen=!0;const e=this._filteredSuggestions.findIndex(e=>e===this.state._value);this._focusedOptionIndex=e>=0?e:-1,this.focusOption(this._focusedOptionIndex)}},this.catchRef=e=>{this.refInput=e},this.blockSuggestionMouseOver=!1,this._isOpen=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._hasClearButton=!0,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hasClearButton:!0,_hideMsg:!1,_id:`id-${p()}`,_label:"",_suggestions:[],_value:""},this.inputHasFocus=!1,this.controller=new y(this,"combobox",this.host),this.onInput=this.onInput.bind(this)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSuggestions(e){this.controller.validateSuggestions(e),this._filteredSuggestions=e}validateHasClearButton(e){this.controller.validateHasClearButton(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.controller.setFormAssociatedValue(e)}componentWillLoad(){this.refSuggestions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e),this._filteredSuggestions=this.state._suggestions}handleMouseEvent(){this.blockSuggestionMouseOver=!1}handleFocusOut(e){setTimeout(()=>{var t;(null===(t=this.host)||void 0===t?void 0:t.contains(document.activeElement))||this.onBlur(e)})}handleWindowBlur(e){this.onBlur(e)}onBlur(e){this._isOpen&&e instanceof FocusEvent&&e.view===window&&(this._isOpen=!1)}onChange(e){this.controller.onFacade.onChange(e),this.controller.setFormAssociatedValue(this.state._value)}get host(){return n(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_hasClearButton:["validateHasClearButton"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};w.style={default:_};export{w as kol_combobox};

package/dist/kolibri/kol-combobox.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["h","registerInstance","getElement","clsx","KolButtonWcTag","KolIconTag","getRenderStates","FormFieldStateWrapper","InputIconController","InputContainerStateWrapperFc","InputStateWrapper","CustomSuggestionsOptionsGroupFc","CustomSuggestionsOptionFc","translate","nonce","watchBoolean","watchString","validatePlaceholder","validateRequired","validateSuggestions","ComboboxController","constructor","component","name","host","super","this","validateHasClearButton","value","validateValue","componentWillLoad","_hasClearButton","_placeholder","_required","_suggestions","_value","defaultStyleCss","KolCombobox","getValue","state","focus","_a","Promise","resolve","refInput","selectOption","option","controller","onFacade","onInput","CustomEvent","bubbles","detail","_name","onChange","setFormAssociatedValue","clearSelection","isDisabled","_disabled","emptyValue","_focusedOptionIndex","_filteredSuggestions","_isOpen","event","target","setFilteredSuggestionsByQuery","handleKeyDownDropdown","key","length","test","focusSuggestionStartingWith","query","trim","Array","isArray","filter","toLowerCase","includes","moveFocus","delta","newIndex","focusOption","index","refSuggestions","optionElement","char","charLowerCase","findIndex","startsWith","getFormFieldProps","class","_hasValue","tooltipAlign","_tooltipAlign","alert","showAsAlert","getInputProps","ariaDescribedBy","Object","assign","ref","catchRef","type","role","undefined","join","_hideLabel","_label","_id","_shortKey","accessKey","_accessKey","autocapitalize","autocorrect","disabled","customSuggestions","id","required","onFocus","inputHasFocus","onBlur","bind","placeholder","render","_icons","translateDeleteSelection","_on","onClick","toggleListbox","blockSuggestionMouseOver","onKeyDown","map","searchTerm","el","selected","onMouseOver","e","preventDefault","handleKeyDown","_b","handleEvent","isOpen","callback","handleWindowClick","contains","hostRef","selectedIndex","_hideMsg","_hint","_touched","Boolean","validateAccessKey","validateDisabled","validateHideMsg","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","validateShortKey","validateSyncValueBySelector","validateTouched","addValueChangeListener","v","handleMouseEvent","handleFocusOut","setTimeout","document","activeElement","handleWindowBlur","watchers","_msg","_syncValueBySelector","style","default"],"sources":["0"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["h","registerInstance","getElement","clsx","KolButtonWcTag","KolIconTag","getRenderStates","FormFieldStateWrapper","InputIconController","InputContainerStateWrapperFc","InputStateWrapper","CustomSuggestionsOptionsGroupFc","CustomSuggestionsOptionFc","translate","nonce","watchBoolean","watchString","validatePlaceholder","validateRequired","validateSuggestions","ComboboxController","constructor","component","name","host","super","this","validateHasClearButton","value","validateValue","componentWillLoad","_hasClearButton","_placeholder","_required","_suggestions","_value","defaultStyleCss","KolCombobox","getValue","state","focus","_a","Promise","resolve","refInput","selectOption","option","controller","onFacade","onInput","CustomEvent","bubbles","detail","_name","onChange","setFormAssociatedValue","clearSelection","isDisabled","_disabled","emptyValue","_focusedOptionIndex","_filteredSuggestions","_isOpen","event","target","setFilteredSuggestionsByQuery","handleKeyDownDropdown","key","length","test","focusSuggestionStartingWith","query","trim","Array","isArray","filter","toLowerCase","includes","moveFocus","delta","newIndex","focusOption","index","refSuggestions","optionElement","selectFocusedOption","char","charLowerCase","findIndex","startsWith","getFormFieldProps","class","_hasValue","tooltipAlign","_tooltipAlign","alert","showAsAlert","getInputProps","ariaDescribedBy","Object","assign","ref","catchRef","type","role","undefined","join","_hideLabel","_label","_id","_shortKey","accessKey","_accessKey","autocapitalize","autocorrect","disabled","customSuggestions","id","required","onFocus","inputHasFocus","onBlur","bind","placeholder","render","_icons","translateDeleteSelection","_on","onClick","toggleListbox","blockSuggestionMouseOver","onKeyDown","map","searchTerm","el","selected","onMouseOver","e","preventDefault","handleKeyDown","_b","handleEvent","isOpen","callback","handleWindowClick","contains","hostRef","selectedIndex","_hideMsg","_hint","_touched","Boolean","validateAccessKey","validateDisabled","validateHideMsg","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","validateShortKey","validateSyncValueBySelector","validateTouched","addValueChangeListener","v","handleMouseEvent","handleFocusOut","setTimeout","document","activeElement","handleWindowBlur","FocusEvent","view","window","watchers","_msg","_syncValueBySelector","style","default"],"sources":["0"],"mappings":"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","ignoreList":[]}

package/dist/kolibri/kol-details.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,g as t}from"./index-CNB6DDYH.js";import{K as i}from"./Collapsible-CiG-SBxx.js";import{w as o}from"./common-BXXICkFX.js";import{v as a}from"./disabled-D0wfAqak.js";import{v as l}from"./label-Dkj9sxQK.js";import{v as s}from"./open-Cuy37cT5.js";import{n as r}from"./dev.utils-BIeLAoxm.js";import{d,K as h}from"./events-CY36RKEq.js";import{w as p}from"./validation-D0gTVdAQ.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-eK3rPvPS.js";import"./component-names-B_kYyA8u.js";import"./Heading-CHhFhzd-.js";const c=(n,e)=>{o(n,"_on",n=>"object"==typeof n&&null!==n,new Set(["DetailsCallbacksPropType {Events.onToggle}"]),e)},m="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition-duration: 0s;\n    }\n  }\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n  }\n  @media print {\n    :not(.collapsible--open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__wrapper {\n    /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n    transform: translateZ(0);\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    opacity: 0;\n    transform: scaleY(0);\n    transform-origin: top;\n    min-height: 0;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n    transition: transform 0.3s, opacity 0.3s, visibility 0.3s;\n  }\n  .collapsible--open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .collapsible--open .collapsible__wrapper-animation {\n    opacity: 1;\n    transform: scaleY(1);\n    visibility: visible;\n  }\n  .collapsible {\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__heading-button button .kol-span {\n    align-items: flex-start;\n  }\n  .collapsible--open:focus-within {\n    position: relative;\n    z-index: 100;\n  }\n}\n@layer kol-component {\n  .kol-details__heading-button {\n    display: flex;\n  }\n  .kol-details__heading-button .kol-button {\n    min-height: auto;\n  }\n  .kol-details__heading-button .kol-button .kol-span__label {\n    border-bottom-color: grey;\n    border-bottom-style: solid;\n  }\n  .collapsible--open .kol-details__heading-button .kol-icon::part(icon) {\n    transform: rotate(90deg);\n  }\n}",b=class{constructor(e){n(this,e),this.nonce=r(),this.catchRef=n=>{this.buttonWcRef=n},this.handleOnClick=n=>{this._open=!this._open,clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout(()=>{var e,t;this.host&&d(this.host,h.toggle,Boolean(this._open)),null===(t=null===(e=this.state._on)||void 0===e?void 0:e.onToggle)||void 0===t||t.call(e,n,Boolean(this._open))},25)},this._disabled=!1,this._level=0,this._open=!1,this.state={_label:"",_level:0,_on:{}}}async focus(){var n;return Promise.resolve(null===(n=this.buttonWcRef)||void 0===n?void 0:n.focus())}render(){const{_open:n,_label:t,_disabled:o,_level:a}=this.state,l="kol-details",s={id:this.nonce,label:t,open:n,disabled:o,level:a,onClick:this.handleOnClick,class:l,HeadingProps:{class:`${l}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${l}__heading-button`,_icons:"kolicon-chevron-right"},ContentProps:{class:`${l}__content indented-text`,wrapperClass:`${l}__wrapper`,animationClass:`${l}__wrapper-animation`}};return e(i,Object.assign({key:"07bc611d260c54c24d5d46161db69ad2d77a85d0"},s),e("slot",{key:"1a188f043828b0a2cfad16b4e034606961a8722e"}))}validateDisabled(n){a(this,n)}validateLabel(n){l(this,n,{required:!0})}validateLevel(n){p(this,n)}validateOn(n){c(this,n)}validateOpen(n){s(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}get host(){return t(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};b.style={default:m};export{b as kol_details};
+import{r as n,h as e,g as t}from"./index-DFgGNwim.js";import{K as i}from"./Collapsible-Cq_kxc2V.js";import{w as o}from"./common-BXXICkFX.js";import{v as a}from"./disabled-D0wfAqak.js";import{v as l}from"./label-Dkj9sxQK.js";import{v as s}from"./open-Cuy37cT5.js";import{n as r}from"./dev.utils-BZrysPuC.js";import{d,K as h}from"./events-DHTi_wtD.js";import{w as p}from"./validation-D0gTVdAQ.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-eK3rPvPS.js";import"./component-names-B_kYyA8u.js";import"./Heading-FFu5Vo7m.js";const c=(n,e)=>{o(n,"_on",n=>"object"==typeof n&&null!==n,new Set(["DetailsCallbacksPropType {Events.onToggle}"]),e)},m="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition-duration: 0s;\n    }\n  }\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n  }\n  @media print {\n    :not(.collapsible--open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__wrapper {\n    /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n    transform: translateZ(0);\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    opacity: 0;\n    transform: scaleY(0);\n    transform-origin: top;\n    min-height: 0;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n    transition: transform 0.3s, opacity 0.3s, visibility 0.3s;\n  }\n  .collapsible--open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .collapsible--open .collapsible__wrapper-animation {\n    opacity: 1;\n    transform: scaleY(1);\n    visibility: visible;\n  }\n  .collapsible {\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__heading-button button .kol-span {\n    align-items: flex-start;\n  }\n  .collapsible--open:focus-within {\n    position: relative;\n    z-index: 100;\n  }\n}\n@layer kol-component {\n  .kol-details__heading-button {\n    display: flex;\n  }\n  .kol-details__heading-button .kol-button {\n    min-height: auto;\n  }\n  .kol-details__heading-button .kol-button .kol-span__label {\n    border-bottom-color: grey;\n    border-bottom-style: solid;\n  }\n  .collapsible--open .kol-details__heading-button .kol-icon::part(icon) {\n    transform: rotate(90deg);\n  }\n}",b=class{constructor(e){n(this,e),this.nonce=r(),this.catchRef=n=>{this.buttonWcRef=n},this.handleOnClick=n=>{this._open=!this._open,clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout(()=>{var e,t;this.host&&d(this.host,h.toggle,Boolean(this._open)),null===(t=null===(e=this.state._on)||void 0===e?void 0:e.onToggle)||void 0===t||t.call(e,n,Boolean(this._open))},25)},this._disabled=!1,this._level=0,this._open=!1,this.state={_label:"",_level:0,_on:{}}}async focus(){var n;return Promise.resolve(null===(n=this.buttonWcRef)||void 0===n?void 0:n.focus())}render(){const{_open:n,_label:t,_disabled:o,_level:a}=this.state,l="kol-details",s={id:this.nonce,label:t,open:n,disabled:o,level:a,onClick:this.handleOnClick,class:l,HeadingProps:{class:`${l}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${l}__heading-button`,_icons:"kolicon-chevron-right"},ContentProps:{class:`${l}__content indented-text`,wrapperClass:`${l}__wrapper`,animationClass:`${l}__wrapper-animation`}};return e(i,Object.assign({key:"07bc611d260c54c24d5d46161db69ad2d77a85d0"},s),e("slot",{key:"1a188f043828b0a2cfad16b4e034606961a8722e"}))}validateDisabled(n){a(this,n)}validateLabel(n){l(this,n,{required:!0})}validateLevel(n){p(this,n)}validateOn(n){c(this,n)}validateOpen(n){s(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}get host(){return t(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};b.style={default:m};export{b as kol_details};

package/dist/kolibri/kol-dialog-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as a,g as i}from"./index-CNB6DDYH.js";import{c as s}from"./clsx-eK3rPvPS.js";import{g as o}from"./component-names-B_kYyA8u.js";import{e as l,w as e,s as d}from"./common-BXXICkFX.js";import{v as n}from"./label-Dkj9sxQK.js";import{d as r,K as h}from"./events-CY36RKEq.js";import{h as c}from"./tooltip-open-tracking-rBbBgPWP.js";const v=(a,t,s)=>{l(a,"_width",t,Object.assign({defaultValue:"100%"},s))},b=["blank","card"],k=(a,t)=>{e(a,"_variant",a=>"string"==typeof a&&b.includes(a),new Set(b),t)},_=class{constructor(a){t(this,a),this.on={onClose:async()=>{await this.closeModal()}},this._width="100%",this._variant="blank",this.state={_label:"",_width:"100%"}}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var a,t;null===(t=null===(a=this.state._on)||void 0===a?void 0:a.onClose)||void 0===t||t.call(a),this.host&&r(this.host,h.close)}async openModal(){var a;null===(a=this.refDialog)||void 0===a||a.showModal()}async closeModal(){var a,t;null===(t=null===(a=this.refDialog)||void 0===a?void 0:a.close)||void 0===t||t.call(a)}render(){return a("dialog",{key:"288b2934310b2d34013f55e0f4636263e2be22aa","aria-label":this.state._label,class:s("kol-dialog","kol-modal",{"kol-dialog__blank":"blank"===this.state._variant,"kol-dialog__card":"card"===this.state._variant,"kol-modal__blank":"blank"===this.state._variant,"kol-modal__card":"card"===this.state._variant}),onCancel:c,onClose:this.handleNativeCloseEvent.bind(this),ref:a=>{this.refDialog=a},style:{width:this.state._width}},"blank"===this.state._variant&&a("slot",{key:"08ea19cdd17c7dcd6fcdb58b1d083665268285a8"}),"card"===this.state._variant&&a(o,{key:"2801d5a45ea0e99406b1710dbfa76c320970ed0d",_label:this.state._label,_hasCloser:!0,_on:this.on},a("slot",{key:"447c1819769635b6b8c7891d252da2ac9b9ece36"})))}validateLabel(a){n(this,a,{required:!0})}validateOn(a){if("object"==typeof a&&null!==a){const t={};"function"!=typeof a.onClose&&!0!==a.onClose||(t.onClose=a.onClose),d(this,"_on",t)}}validateWidth(a){v(this,a)}validateVariant(a){k(this,a)}componentWillLoad(){this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width),this.validateVariant(this._variant)}get host(){return i(this)}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}}};export{_ as kol_dialog_wc};
+import{r as t,h as a,g as i}from"./index-DFgGNwim.js";import{c as s}from"./clsx-eK3rPvPS.js";import{g as o}from"./component-names-B_kYyA8u.js";import{e as l,w as e,s as d}from"./common-BXXICkFX.js";import{v as n}from"./label-Dkj9sxQK.js";import{d as r,K as h}from"./events-DHTi_wtD.js";import{h as c}from"./tooltip-open-tracking-rBbBgPWP.js";const v=(a,t,i)=>{l(a,"_width",t,Object.assign({defaultValue:"100%"},i))},b=["blank","card"],_=(a,t)=>{e(a,"_variant",a=>"string"==typeof a&&b.includes(a),new Set(b),t)},k=class{constructor(a){t(this,a),this.on={onClose:async()=>{await this.closeModal()}},this._width="100%",this._variant="blank",this.state={_label:"",_width:"100%"}}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var a,t;null===(t=null===(a=this.state._on)||void 0===a?void 0:a.onClose)||void 0===t||t.call(a),this.host&&r(this.host,h.close)}async openModal(){var a;null===(a=this.refDialog)||void 0===a||a.showModal()}async closeModal(){var a,t;null===(t=null===(a=this.refDialog)||void 0===a?void 0:a.close)||void 0===t||t.call(a)}render(){return a("dialog",{key:"288b2934310b2d34013f55e0f4636263e2be22aa","aria-label":this.state._label,class:s("kol-dialog","kol-modal",{"kol-dialog__blank":"blank"===this.state._variant,"kol-dialog__card":"card"===this.state._variant,"kol-modal__blank":"blank"===this.state._variant,"kol-modal__card":"card"===this.state._variant}),onCancel:c,onClose:this.handleNativeCloseEvent.bind(this),ref:a=>{this.refDialog=a},style:{width:this.state._width}},"blank"===this.state._variant&&a("slot",{key:"08ea19cdd17c7dcd6fcdb58b1d083665268285a8"}),"card"===this.state._variant&&a(o,{key:"2801d5a45ea0e99406b1710dbfa76c320970ed0d",_label:this.state._label,_hasCloser:!0,_on:this.on},a("slot",{key:"447c1819769635b6b8c7891d252da2ac9b9ece36"})))}validateLabel(a){n(this,a,{required:!0})}validateOn(a){if("object"==typeof a&&null!==a){const t={};"function"!=typeof a.onClose&&!0!==a.onClose||(t.onClose=a.onClose),d(this,"_on",t)}}validateWidth(a){v(this,a)}validateVariant(a){_(this,a)}componentWillLoad(){this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width),this.validateVariant(this._variant)}get host(){return i(this)}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}}};export{k as kol_dialog_wc};

package/dist/kolibri/kol-dialog.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-CNB6DDYH.js";import{h as t}from"./component-names-B_kYyA8u.js";import"./common-BXXICkFX.js";const o="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  display: grid;\n  height: 100%;\n  overflow: visible;\n  gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  grid-template-areas: \"header  close\" \"content content\";\n  grid-template-columns: 1fr min-content;\n  grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n  align-self: start;\n  grid-area: header;\n}\n.kol-card__content {\n  align-self: stretch;\n  grid-area: content;\n}\n.kol-card__close-button {\n  grid-area: close;\n}\n\n@layer kol-component {\n  .kol-dialog,\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-dialog::backdrop,\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-dialog__close-button,\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}",i=class{constructor(e){n(this,e),this.catchRef=n=>{this.dialogRef=n},this._width="100%",this._variant="blank"}async openModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.openModal())}async closeModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.closeModal())}render(){return e(t,{key:"24744fff4cfebb9ef188926e5390064ce7ec6931",ref:this.catchRef,_label:this._label,_on:this._on,_variant:this._variant,_width:this._width},e("slot",{key:"c8844dc7d6b9d16567ce400ae10f992018c6849d"}))}};i.style={default:o};export{i as kol_dialog};
+import{r as n,h as e}from"./index-DFgGNwim.js";import{h as t}from"./component-names-B_kYyA8u.js";import"./common-BXXICkFX.js";const o="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  display: grid;\n  height: 100%;\n  overflow: visible;\n  gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  grid-template-areas: \"header  close\" \"content content\";\n  grid-template-columns: 1fr min-content;\n  grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n  align-self: start;\n  grid-area: header;\n}\n.kol-card__content {\n  align-self: stretch;\n  grid-area: content;\n}\n.kol-card__close-button {\n  grid-area: close;\n}\n\n@layer kol-component {\n  .kol-dialog,\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-dialog::backdrop,\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-dialog__close-button,\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}",i=class{constructor(e){n(this,e),this.catchRef=n=>{this.dialogRef=n},this._width="100%",this._variant="blank"}async openModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.openModal())}async closeModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.closeModal())}render(){return e(t,{key:"24744fff4cfebb9ef188926e5390064ce7ec6931",ref:this.catchRef,_label:this._label,_on:this._on,_variant:this._variant,_width:this._width},e("slot",{key:"c8844dc7d6b9d16567ce400ae10f992018c6849d"}))}};i.style={default:o};export{i as kol_dialog};

package/dist/kolibri/kol-drawer.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t,g as o}from"./index-CNB6DDYH.js";import{c as i}from"./clsx-eK3rPvPS.js";import{g as a}from"./component-names-B_kYyA8u.js";import{s as r}from"./common-BXXICkFX.js";import{v as l}from"./align-C_bkzA-y.js";import{v as s}from"./has-closer-OxGfsISj.js";import{v as d}from"./label-Dkj9sxQK.js";import{v as h}from"./open-Cuy37cT5.js";import{d as c,K as p}from"./events-CY36RKEq.js";import{h as m}from"./tooltip-open-tracking-rBbBgPWP.js";const f="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-card {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: grid;\n    height: 100%;\n    overflow: visible;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    grid-template-areas: \"header  close\" \"content content\";\n    grid-template-columns: 1fr min-content;\n    grid-template-rows: min-content 1fr;\n  }\n  .kol-card__header {\n    align-self: start;\n    grid-area: header;\n  }\n  .kol-card__content {\n    align-self: stretch;\n    grid-area: content;\n  }\n  .kol-card__close-button {\n    grid-area: close;\n  }\n  .kol-drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .kol-drawer__wrapper {\n    position: fixed;\n    overflow: auto;\n  }\n  .kol-drawer__wrapper--left, .kol-drawer__wrapper--right {\n    top: 0;\n    max-width: 100vw;\n    height: 100vh;\n  }\n  .kol-drawer__wrapper--left .kol-drawer__content, .kol-drawer__wrapper--right .kol-drawer__content {\n    height: 100%;\n  }\n  .kol-drawer__wrapper--left {\n    left: 0;\n  }\n  .kol-drawer__wrapper--right {\n    right: 0;\n  }\n  .kol-drawer__wrapper--bottom, .kol-drawer__wrapper--top {\n    left: 0;\n    width: 100vw;\n    max-height: 100vh;\n  }\n  .kol-drawer__wrapper--bottom .kol-drawer__content, .kol-drawer__wrapper--top .kol-drawer__content {\n    width: 100%;\n  }\n  .kol-drawer__wrapper--bottom {\n    bottom: 0;\n  }\n  .kol-drawer__wrapper--top {\n    top: 0;\n  }\n  .kol-drawer__content {\n    position: relative;\n  }\n}",u=class{constructor(e){n(this,e),this.getWrapperRef=n=>this.dialogWrapperElement=n,this.getRef=n=>{this.dialogElement=n,setTimeout(()=>{this.openOrCloseBasedOnState()})},this._hasCloser=!1,this.state={_label:"",_open:!1,_align:"left"}}async open(){var n;this.state=Object.assign(Object.assign({},this.state),{_open:!0}),null===(n=this.dialogElement)||void 0===n||n.showModal()}async close(){this.state=Object.assign(Object.assign({},this.state),{_open:!1});const n=this.dialogWrapperElement;if(!n)return;"none"===window.getComputedStyle(n).animationName&&this.handleCloseDialog()}renderDialogContent(){const n=this.state._align;return e(a,{ref:this.getWrapperRef,class:i("kol-drawer__wrapper",`kol-drawer__wrapper--${n}`,{"kol-drawer__wrapper--open":this.state._open,"kol-drawer__wrapper--is-closing":!1===this.state._open}),_label:this.state._label,_hasCloser:this.state._hasCloser,_on:{onClose:()=>{this.close()}}},e("div",{class:"kol-drawer__content"},e("slot",null)))}render(){return e(t,{key:"cfa97c9b25f63360c569b66dae0d10fe881e7964",class:"kol-drawer"},e("dialog",{key:"a4baf31338ad1b3f95a51ab35ac260f23b0e891e","aria-label":this.state._label,class:"kol-drawer__dialog",onCancel:m,ref:this.getRef},this.renderDialogContent()))}validateLabel(n){d(this,n,{required:!0})}validateAlign(n){l(this,n)}validateHasCloser(n){s(this,n)}validateOpen(n){"boolean"==typeof n&&(h(this,n),this.dialogElement&&this.openOrCloseBasedOnState())}async openOrCloseBasedOnState(){this.state._open?await this.open():await this.close()}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"==typeof n.onClose&&(e.onClose=n.onClose),r(this,"_on",e)}}handleCloseDialog(){var n,e,t;null===(n=this.dialogElement)||void 0===n||n.close(),null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e),this.host&&c(this.host,p.close)}handleClose(){(async()=>{await this.close(),this.handleCloseDialog()})()}handleAnimationEnd(n){n.animationName.includes("slideOut")&&this.handleCloseDialog()}componentDidLoad(){var n,e;null===(n=this.dialogElement)||void 0===n||n.addEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.addEventListener("close",this.handleClose.bind(this))}disconnectedCallback(){var n,e;null===(n=this.dialogElement)||void 0===n||n.removeEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.removeEventListener("close",this.handleClose.bind(this))}componentWillLoad(){this.validateLabel(this._label),this.validateOpen(this._open),this.validateAlign(this._align),this.validateHasCloser(this._hasCloser),this.validateOn(this._on)}get host(){return o(this)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_hasCloser:["validateHasCloser"],_open:["validateOpen"],_on:["validateOn"]}}};u.style={default:f};export{u as kol_drawer};
+import{r as n,h as e,H as t,g as o}from"./index-DFgGNwim.js";import{c as i}from"./clsx-eK3rPvPS.js";import{g as a}from"./component-names-B_kYyA8u.js";import{s as r}from"./common-BXXICkFX.js";import{v as l}from"./align-C_bkzA-y.js";import{v as s}from"./has-closer-OxGfsISj.js";import{v as d}from"./label-Dkj9sxQK.js";import{v as h}from"./open-Cuy37cT5.js";import{d as c,K as p}from"./events-DHTi_wtD.js";import{h as m}from"./tooltip-open-tracking-rBbBgPWP.js";const f="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-card {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: grid;\n    height: 100%;\n    overflow: visible;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    grid-template-areas: \"header  close\" \"content content\";\n    grid-template-columns: 1fr min-content;\n    grid-template-rows: min-content 1fr;\n  }\n  .kol-card__header {\n    align-self: start;\n    grid-area: header;\n  }\n  .kol-card__content {\n    align-self: stretch;\n    grid-area: content;\n  }\n  .kol-card__close-button {\n    grid-area: close;\n  }\n  .kol-drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .kol-drawer__wrapper {\n    position: fixed;\n    overflow: auto;\n  }\n  .kol-drawer__wrapper--left, .kol-drawer__wrapper--right {\n    top: 0;\n    max-width: 100vw;\n    height: 100vh;\n  }\n  .kol-drawer__wrapper--left .kol-drawer__content, .kol-drawer__wrapper--right .kol-drawer__content {\n    height: 100%;\n  }\n  .kol-drawer__wrapper--left {\n    left: 0;\n  }\n  .kol-drawer__wrapper--right {\n    right: 0;\n  }\n  .kol-drawer__wrapper--bottom, .kol-drawer__wrapper--top {\n    left: 0;\n    width: 100vw;\n    max-height: 100vh;\n  }\n  .kol-drawer__wrapper--bottom .kol-drawer__content, .kol-drawer__wrapper--top .kol-drawer__content {\n    width: 100%;\n  }\n  .kol-drawer__wrapper--bottom {\n    bottom: 0;\n  }\n  .kol-drawer__wrapper--top {\n    top: 0;\n  }\n  .kol-drawer__content {\n    position: relative;\n  }\n}",u=class{constructor(e){n(this,e),this.getWrapperRef=n=>this.dialogWrapperElement=n,this.getRef=n=>{this.dialogElement=n,setTimeout(()=>{this.openOrCloseBasedOnState()})},this._hasCloser=!1,this.state={_label:"",_open:!1,_align:"left"}}async open(){var n;this.state=Object.assign(Object.assign({},this.state),{_open:!0}),null===(n=this.dialogElement)||void 0===n||n.showModal()}async close(){this.state=Object.assign(Object.assign({},this.state),{_open:!1});const n=this.dialogWrapperElement;if(!n)return;"none"===window.getComputedStyle(n).animationName&&this.handleCloseDialog()}renderDialogContent(){const n=this.state._align;return e(a,{ref:this.getWrapperRef,class:i("kol-drawer__wrapper",`kol-drawer__wrapper--${n}`,{"kol-drawer__wrapper--open":this.state._open,"kol-drawer__wrapper--is-closing":!1===this.state._open}),_label:this.state._label,_hasCloser:this.state._hasCloser,_on:{onClose:()=>{this.close()}}},e("div",{class:"kol-drawer__content"},e("slot",null)))}render(){return e(t,{key:"cfa97c9b25f63360c569b66dae0d10fe881e7964",class:"kol-drawer"},e("dialog",{key:"a4baf31338ad1b3f95a51ab35ac260f23b0e891e","aria-label":this.state._label,class:"kol-drawer__dialog",onCancel:m,ref:this.getRef},this.renderDialogContent()))}validateLabel(n){d(this,n,{required:!0})}validateAlign(n){l(this,n)}validateHasCloser(n){s(this,n)}validateOpen(n){"boolean"==typeof n&&(h(this,n),this.dialogElement&&this.openOrCloseBasedOnState())}async openOrCloseBasedOnState(){this.state._open?await this.open():await this.close()}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"==typeof n.onClose&&(e.onClose=n.onClose),r(this,"_on",e)}}handleCloseDialog(){var n,e,t;null===(n=this.dialogElement)||void 0===n||n.close(),null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e),this.host&&c(this.host,p.close)}handleClose(){(async()=>{await this.close(),this.handleCloseDialog()})()}handleAnimationEnd(n){n.animationName.includes("slideOut")&&this.handleCloseDialog()}componentDidLoad(){var n,e;null===(n=this.dialogElement)||void 0===n||n.addEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.addEventListener("close",this.handleClose.bind(this))}disconnectedCallback(){var n,e;null===(n=this.dialogElement)||void 0===n||n.removeEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.removeEventListener("close",this.handleClose.bind(this))}componentWillLoad(){this.validateLabel(this._label),this.validateOpen(this._open),this.validateAlign(this._align),this.validateHasCloser(this._hasCloser),this.validateOn(this._on)}get host(){return o(this)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_hasCloser:["validateHasCloser"],_open:["validateOpen"],_on:["validateOn"]}}};u.style={default:f};export{u as kol_drawer};

package/dist/kolibri/kol-form.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-form.entry.esm.js","sources":["src/schema/props/error-list.ts","src/components/form/style.scss?tag=kol-form&mode=default&encapsulation=shadow","src/components/form/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { EventCallback } from '../types';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type ErrorListPropType = {\n\tmessage: string;\n\tselector: string | EventCallback<Event>;\n};\n\nexport type PropErrorList = {\n\terrorList: ErrorListPropType[];\n};\n\n/* validator */\nexport const validateErrorList = (component: Generic.Element.Component, value?: ErrorListPropType[]): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'errorList',\n\t\t(value): boolean => Array.isArray(value) && value.find((v) => !(typeof v === 'string' || typeof v === 'function')) === undefined,\n\t\tnew Set(['string', 'function']),\n\t\tvalue,\n\t);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../host-display-block' as *;\n@use '../@shared/kol-link-mixin' as *;\n@use '../../styles/kol-alert-mixin' as *;\n\n@layer kol-component {\n\t@include kol-link-styles('kol-link');\n\t@include kol-alert;\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { validateErrorList, watchBoolean, watchString } from '../../schema';\n\nimport { translate } from '../../i18n';\n\nimport { KolLinkWcTag } from '../../core/component-names';\nimport KolAlertFc from '../../functional-components/Alert';\nimport type { ErrorListPropType, FormAPI, FormStates, KoliBriFormCallbacks, Stringified } from '../../schema';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * @slot - Inhalt der Form.\n */\n@Component({\n\ttag: 'kol-form',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolForm implements FormAPI {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\terrorListBlock?: HTMLElement;\n\terrorListFirstLink?: HTMLElement;\n\tprivate readonly translateErrorListMessage = translate('kol-error-list-message');\n\tprivate readonly translateErrorList = translate('kol-error-list');\n\tprivate readonly translateFormDescription = translate('kol-form-description');\n\n\t/* Hint: This method may not be used at all while events are handled in form/controller#propagateSubmitEventToForm */\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.submit);\n\t\t}\n\t};\n\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.reset);\n\t\t}\n\t};\n\n\tprivate readonly handleLinkClick = (selector: string) => {\n\t\tconst targetElement = document.querySelector<HTMLElement>(selector);\n\t\tif (targetElement && typeof targetElement.focus === 'function') {\n\t\t\ttargetElement.scrollIntoView({ behavior: 'smooth' });\n\t\t\ttargetElement.focus();\n\t\t}\n\t};\n\n\tprivate readonly setBlockElement = (el?: HTMLElement) => (this.errorListBlock = el);\n\n\tprivate readonly setFirstLinkElement = (el?: HTMLElement) => (this.errorListFirstLink = el);\n\n\tprivate renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {\n\t\treturn (\n\t\t\t<KolAlertFc class=\"kol-form__alert\" ref={this.setBlockElement} type=\"error\" variant=\"card\" label={this.translateErrorListMessage}>\n\t\t\t\t<nav aria-label={this.translateErrorList}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{errorList?.map((error, index) => (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\t\t\t\tclass=\"kol-form__link\"\n\t\t\t\t\t\t\t\t\t_href=\"\"\n\t\t\t\t\t\t\t\t\t_label={error.message}\n\t\t\t\t\t\t\t\t\t_on={{ onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }}\n\t\t\t\t\t\t\t\t\tref={index === 0 ? this.setFirstLinkElement : undefined}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</KolAlertFc>\n\t\t);\n\t}\n\n\tprivate renderFormElement(): JSX.Element {\n\t\treturn (\n\t\t\t<form class=\"kol-form\" method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} noValidate>\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"kol-form__mandatory-fields-hint\">{this.translateFormDescription}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"kol-form__mandatory-fields-hint\">{this.state._requiredText}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{hasErrorList && this.renderErrorList(this._errorList)}\n\t\t\t\t{this.renderFormElement()}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate scrollToErrorList(): void {\n\t\tthis.errorListBlock?.scrollIntoView({\n\t\t\tbehavior: 'smooth',\n\t\t\tblock: 'start',\n\t\t});\n\t\tsetTimeout(() => {\n\t\t\tthis.errorListFirstLink?.querySelector('a')?.focus();\n\t\t}, 250);\n\t}\n\n\t/**\n\t * Scrolls to the error list and focuses the first link.\n\t */\n\t@Method()\n\tasync focusErrorList(): Promise<void> {\n\t\tthis.scrollToErrorList();\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Form-Events an.\n\t */\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/**\n\t * Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\t/**\n\t * A list of error objects that each describe an issue encountered in the form.\n\t * Each error object contains a message and a selector for identifying the form element related to the error.\n\t */\n\t@Prop() public _errorList?: ErrorListPropType[];\n\n\t@State() public state: FormStates = {};\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\t@Watch('_errorList')\n\tpublic validateErrorList(value?: ErrorListPropType[]): void {\n\t\tvalidateErrorList(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t\tthis.validateErrorList(this._errorList);\n\t}\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kol-form.entry.esm.js","sources":["src/schema/props/error-list.ts","src/components/form/style.scss?tag=kol-form&mode=default&encapsulation=shadow","src/components/form/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { EventCallback } from '../types';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type ErrorListPropType = {\n\tmessage: string;\n\tselector: string | EventCallback<Event>;\n};\n\nexport type PropErrorList = {\n\terrorList: ErrorListPropType[];\n};\n\n/* validator */\nexport const validateErrorList = (component: Generic.Element.Component, value?: ErrorListPropType[]): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'errorList',\n\t\t(value): boolean => Array.isArray(value) && value.find((v) => !(typeof v === 'string' || typeof v === 'function')) === undefined,\n\t\tnew Set(['string', 'function']),\n\t\tvalue,\n\t);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../host-display-block' as *;\n@use '../@shared/kol-link-mixin' as *;\n@use '../../styles/kol-alert-mixin' as *;\n\n@layer kol-component {\n\t@include kol-link-styles('kol-link');\n\t@include kol-alert;\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { validateErrorList, watchBoolean, watchString } from '../../schema';\n\nimport { translate } from '../../i18n';\n\nimport { KolLinkWcTag } from '../../core/component-names';\nimport KolAlertFc from '../../functional-components/Alert';\nimport type { ErrorListPropType, FormAPI, FormStates, KoliBriFormCallbacks, Stringified } from '../../schema';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * @slot - Inhalt der Form.\n */\n@Component({\n\ttag: 'kol-form',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolForm implements FormAPI {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\terrorListBlock?: HTMLElement;\n\terrorListFirstLink?: HTMLElement;\n\tprivate readonly translateErrorListMessage = translate('kol-error-list-message');\n\tprivate readonly translateErrorList = translate('kol-error-list');\n\tprivate readonly translateFormDescription = translate('kol-form-description');\n\n\t/* Hint: This method may not be used at all while events are handled in form/controller#propagateSubmitEventToForm */\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.submit);\n\t\t}\n\t};\n\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.reset);\n\t\t}\n\t};\n\n\tprivate readonly handleLinkClick = (selector: string) => {\n\t\tconst targetElement = document.querySelector<HTMLElement>(selector);\n\t\tif (targetElement && typeof targetElement.focus === 'function') {\n\t\t\ttargetElement.scrollIntoView({ behavior: 'smooth' });\n\t\t\ttargetElement.focus();\n\t\t}\n\t};\n\n\tprivate readonly setBlockElement = (el?: HTMLElement) => (this.errorListBlock = el);\n\n\tprivate readonly setFirstLinkElement = (el?: HTMLElement) => (this.errorListFirstLink = el);\n\n\tprivate renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {\n\t\treturn (\n\t\t\t<KolAlertFc class=\"kol-form__alert\" ref={this.setBlockElement} type=\"error\" variant=\"card\" label={this.translateErrorListMessage}>\n\t\t\t\t<nav aria-label={this.translateErrorList}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{errorList?.map((error, index) => (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\t\t\t\tclass=\"kol-form__link\"\n\t\t\t\t\t\t\t\t\t_href=\"\"\n\t\t\t\t\t\t\t\t\t_label={error.message}\n\t\t\t\t\t\t\t\t\t_on={{ onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }}\n\t\t\t\t\t\t\t\t\tref={index === 0 ? this.setFirstLinkElement : undefined}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</KolAlertFc>\n\t\t);\n\t}\n\n\tprivate renderFormElement(): JSX.Element {\n\t\treturn (\n\t\t\t<form class=\"kol-form\" method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} noValidate>\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"kol-form__mandatory-fields-hint\">{this.translateFormDescription}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"kol-form__mandatory-fields-hint\">{this.state._requiredText}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{hasErrorList && this.renderErrorList(this._errorList)}\n\t\t\t\t{this.renderFormElement()}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate scrollToErrorList(): void {\n\t\tthis.errorListBlock?.scrollIntoView({\n\t\t\tbehavior: 'smooth',\n\t\t\tblock: 'start',\n\t\t});\n\t\tsetTimeout(() => {\n\t\t\tthis.errorListFirstLink?.querySelector('a')?.focus();\n\t\t}, 250);\n\t}\n\n\t/**\n\t * Scrolls to the error list and focuses the first link.\n\t */\n\t@Method()\n\tasync focusErrorList(): Promise<void> {\n\t\tthis.scrollToErrorList();\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Form-Events an.\n\t */\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/**\n\t * Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\t/**\n\t * A list of error objects that each describe an issue encountered in the form.\n\t * Each error object contains a message and a selector for identifying the form element related to the error.\n\t */\n\t@Prop() public _errorList?: ErrorListPropType[];\n\n\t@State() public state: FormStates = {};\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\t@Watch('_errorList')\n\tpublic validateErrorList(value?: ErrorListPropType[]): void {\n\t\tvalidateErrorList(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t\tthis.validateErrorList(this._errorList);\n\t}\n}\n"],"names":[],"mappings":"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"}

package/dist/kolibri/kol-form.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t,H as e,g as i}from"./index-CNB6DDYH.js";import{w as o,d as l,e as r}from"./common-BXXICkFX.js";import{t as a}from"./i18n-CvQhdUrE.js";import{f as s}from"./component-names-B_kYyA8u.js";import{K as d}from"./Alert-DE6PjZZh.js";import{d as h,K as c}from"./events-CY36RKEq.js";import"./i18n-B0tfVPMa.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-eK3rPvPS.js";import"./bem-Bj_mJ2nm.js";import"./browser-DaourpHc.js";import"./Heading-CHhFhzd-.js";const m=(n,t)=>{o(n,"errorList",n=>Array.isArray(n)&&void 0===n.find(n=>!("string"==typeof n||"function"==typeof n)),new Set(["string","function"]),t)},f="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}",p=class{constructor(t){n(this,t),this.translateErrorListMessage=a("kol-error-list-message"),this.translateErrorList=a("kol-error-list"),this.translateFormDescription=a("kol-form-description"),this.onSubmit=n=>{var t,e;n.preventDefault(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onSubmit)&&(null===(e=this.state._on)||void 0===e||e.onSubmit(n)),this.host&&h(this.host,c.submit)},this.onReset=n=>{var t,e;n.preventDefault(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onReset)&&(null===(e=this.state._on)||void 0===e||e.onReset(n)),this.host&&h(this.host,c.reset)},this.handleLinkClick=n=>{const t=document.querySelector(n);t&&"function"==typeof t.focus&&(t.scrollIntoView({behavior:"smooth"}),t.focus())},this.setBlockElement=n=>this.errorListBlock=n,this.setFirstLinkElement=n=>this.errorListFirstLink=n,this._requiredText=!0,this.state={}}renderErrorList(n){return t(d,{class:"kol-form__alert",ref:this.setBlockElement,type:"error",variant:"card",label:this.translateErrorListMessage},t("nav",{"aria-label":this.translateErrorList},t("ul",null,null==n?void 0:n.map((n,e)=>t("li",{key:e},t(s,{class:"kol-form__link",_href:"",_label:n.message,_on:{onClick:"string"==typeof n.selector?()=>this.handleLinkClick(String(n.selector)):n.selector},ref:0===e?this.setFirstLinkElement:void 0}))))))}renderFormElement(){return t("form",{class:"kol-form",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,noValidate:!0},!0===this.state._requiredText?t("p",null,t("div",{class:"kol-form__mandatory-fields-hint"},this.translateFormDescription)):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?t("p",null,t("div",{class:"kol-form__mandatory-fields-hint"},this.state._requiredText)):null,t("slot",null))}render(){const n=Array.isArray(this._errorList)&&this._errorList.length>0;return t(e,{key:"24abdec4e796efe805b3e29fa9f2e4d0189e64d4"},n&&this.renderErrorList(this._errorList),this.renderFormElement())}scrollToErrorList(){var n;null===(n=this.errorListBlock)||void 0===n||n.scrollIntoView({behavior:"smooth",block:"start"}),setTimeout(()=>{var n,t;null===(t=null===(n=this.errorListFirstLink)||void 0===n?void 0:n.querySelector("a"))||void 0===t||t.focus()},250)}async focusErrorList(){return this.scrollToErrorList(),Promise.resolve()}validateOn(n){"object"==typeof n&&null!==n&&(this.state=Object.assign(Object.assign({},this.state),{_on:n}))}validateRequiredText(n){"boolean"==typeof n?l(this,"_requiredText",n):r(this,"_requiredText",n)}validateErrorList(n){m(this,n)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}get host(){return i(this)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}};p.style={default:f};export{p as kol_form};
+import{r as n,h as e,H as t,g as i}from"./index-DFgGNwim.js";import{w as o,d as l,e as a}from"./common-BXXICkFX.js";import{t as r}from"./i18n-CvQhdUrE.js";import{f as s}from"./component-names-B_kYyA8u.js";import{K as d}from"./Alert-DLUhAh8c.js";import{d as h,K as c}from"./events-DHTi_wtD.js";import"./i18n-B0tfVPMa.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-eK3rPvPS.js";import"./bem-De7JANRY.js";import"./browser-DaourpHc.js";import"./Heading-FFu5Vo7m.js";const m=(n,e)=>{o(n,"errorList",n=>Array.isArray(n)&&void 0===n.find(n=>!("string"==typeof n||"function"==typeof n)),new Set(["string","function"]),e)},f="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}",p=class{constructor(e){n(this,e),this.translateErrorListMessage=r("kol-error-list-message"),this.translateErrorList=r("kol-error-list"),this.translateFormDescription=r("kol-form-description"),this.onSubmit=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onSubmit)&&(null===(t=this.state._on)||void 0===t||t.onSubmit(n)),this.host&&h(this.host,c.submit)},this.onReset=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onReset)&&(null===(t=this.state._on)||void 0===t||t.onReset(n)),this.host&&h(this.host,c.reset)},this.handleLinkClick=n=>{const e=document.querySelector(n);e&&"function"==typeof e.focus&&(e.scrollIntoView({behavior:"smooth"}),e.focus())},this.setBlockElement=n=>this.errorListBlock=n,this.setFirstLinkElement=n=>this.errorListFirstLink=n,this._requiredText=!0,this.state={}}renderErrorList(n){return e(d,{class:"kol-form__alert",ref:this.setBlockElement,type:"error",variant:"card",label:this.translateErrorListMessage},e("nav",{"aria-label":this.translateErrorList},e("ul",null,null==n?void 0:n.map((n,t)=>e("li",{key:t},e(s,{class:"kol-form__link",_href:"",_label:n.message,_on:{onClick:"string"==typeof n.selector?()=>this.handleLinkClick(String(n.selector)):n.selector},ref:0===t?this.setFirstLinkElement:void 0}))))))}renderFormElement(){return e("form",{class:"kol-form",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,noValidate:!0},!0===this.state._requiredText?e("p",null,e("div",{class:"kol-form__mandatory-fields-hint"},this.translateFormDescription)):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?e("p",null,e("div",{class:"kol-form__mandatory-fields-hint"},this.state._requiredText)):null,e("slot",null))}render(){const n=Array.isArray(this._errorList)&&this._errorList.length>0;return e(t,{key:"24abdec4e796efe805b3e29fa9f2e4d0189e64d4"},n&&this.renderErrorList(this._errorList),this.renderFormElement())}scrollToErrorList(){var n;null===(n=this.errorListBlock)||void 0===n||n.scrollIntoView({behavior:"smooth",block:"start"}),setTimeout(()=>{var n,e;null===(e=null===(n=this.errorListFirstLink)||void 0===n?void 0:n.querySelector("a"))||void 0===e||e.focus()},250)}async focusErrorList(){return this.scrollToErrorList(),Promise.resolve()}validateOn(n){"object"==typeof n&&null!==n&&(this.state=Object.assign(Object.assign({},this.state),{_on:n}))}validateRequiredText(n){"boolean"==typeof n?l(this,"_requiredText",n):a(this,"_requiredText",n)}validateErrorList(n){m(this,n)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}get host(){return i(this)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}};p.style={default:f};export{p as kol_form};

package/dist/kolibri/kol-form.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["registerInstance","h","Host","getElement","watchValidator","watchBoolean","watchString","translate","KolLinkWcTag","KolAlertFc","dispatchDomEvent","KolEvent","validateErrorList","component","value","Array","isArray","find","v","undefined","Set","defaultStyleCss","KolForm","constructor","hostRef","this","translateErrorListMessage","translateErrorList","translateFormDescription","onSubmit","event","_a","_b","preventDefault","state","_on","host","submit","onReset","reset","handleLinkClick","selector","targetElement","document","querySelector","focus","scrollIntoView","behavior","setBlockElement","el","errorListBlock","setFirstLinkElement","errorListFirstLink","_requiredText","renderErrorList","errorList","class","ref","type","variant","label","map","error","index","key","_href","_label","message","onClick","String","renderFormElement","method","noValidate","length","render","hasErrorList","_errorList","scrollToErrorList","block","setTimeout","focusErrorList","Promise","resolve","validateOn","Object","assign","validateRequiredText","componentWillLoad","watchers","style","default"],"sources":["0"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["registerInstance","h","Host","getElement","watchValidator","watchBoolean","watchString","translate","KolLinkWcTag","KolAlertFc","dispatchDomEvent","KolEvent","validateErrorList","component","value","Array","isArray","find","v","undefined","Set","defaultStyleCss","KolForm","constructor","hostRef","this","translateErrorListMessage","translateErrorList","translateFormDescription","onSubmit","event","_a","_b","preventDefault","state","_on","host","submit","onReset","reset","handleLinkClick","selector","targetElement","document","querySelector","focus","scrollIntoView","behavior","setBlockElement","el","errorListBlock","setFirstLinkElement","errorListFirstLink","_requiredText","renderErrorList","errorList","class","ref","type","variant","label","map","error","index","key","_href","_label","message","onClick","String","renderFormElement","method","noValidate","length","render","hasErrorList","_errorList","scrollToErrorList","block","setTimeout","focusErrorList","Promise","resolve","validateOn","Object","assign","validateRequiredText","componentWillLoad","watchers","style","default"],"sources":["0"],"mappings":"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","ignoreList":[]}

package/dist/kolibri/kol-heading.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-CNB6DDYH.js";import"./Alert-DE6PjZZh.js";import{K as t}from"./Heading-CHhFhzd-.js";import{e as i}from"./common-BXXICkFX.js";import{a as o}from"./label-Dkj9sxQK.js";import"./i18n-CvQhdUrE.js";import"./markdown-CaS836ev.js";import{w as a}from"./validation-D0gTVdAQ.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-eK3rPvPS.js";import"./component-names-B_kYyA8u.js";import"./bem-Bj_mJ2nm.js";import"./browser-DaourpHc.js";import"./i18n-B0tfVPMa.js";const l="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-headline--secondary {\n    margin: 0;\n  }\n}",s=class{constructor(e){n(this,e),this._level=0,this.state={_label:"",_level:0}}validateLabel(n){o(this,n)}validateLevel(n){a(this,n)}validateSecondaryHeadline(n){i(this,"_secondaryHeadline",n)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline)}render(){const{_secondaryHeadline:n,_label:i,_level:o}=this.state;return e(t,{key:"e0215bf6a8c6689b9661f08a0216f36bf6d2f332",secondaryHeadline:n,level:o},i,e("slot",{key:"1cd10de7df8a97779b57dd91247f6d3505e10f61",name:"expert",slot:"expert"}))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"]}}};s.style={default:l};export{s as kol_heading};
+import{r as n,h as e}from"./index-DFgGNwim.js";import"./Alert-DLUhAh8c.js";import{K as t}from"./Heading-FFu5Vo7m.js";import{e as i}from"./common-BXXICkFX.js";import{a as o}from"./label-Dkj9sxQK.js";import"./i18n-CvQhdUrE.js";import"./markdown-CaS836ev.js";import{w as a}from"./validation-D0gTVdAQ.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-eK3rPvPS.js";import"./component-names-B_kYyA8u.js";import"./bem-De7JANRY.js";import"./browser-DaourpHc.js";import"./i18n-B0tfVPMa.js";const l="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-headline--secondary {\n    margin: 0;\n  }\n}",s=class{constructor(e){n(this,e),this._level=0,this.state={_label:"",_level:0}}validateLabel(n){o(this,n)}validateLevel(n){a(this,n)}validateSecondaryHeadline(n){i(this,"_secondaryHeadline",n)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline)}render(){const{_secondaryHeadline:n,_label:i,_level:o}=this.state;return e(t,{key:"e0215bf6a8c6689b9661f08a0216f36bf6d2f332",secondaryHeadline:n,level:o},i,e("slot",{key:"1cd10de7df8a97779b57dd91247f6d3505e10f61",name:"expert",slot:"expert"}))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"]}}};s.style={default:l};export{s as kol_heading};