@public-ui/components 4.0.0-alpha.0 → 4.0.0-alpha.10

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,F as e,H as i,r as n,g as o}from"./index-4c718166.js";import{n as s}from"./dev.utils-5db255b5.js";import{s as a,t as l}from"./events-29e84d75.js";import{I as r}from"./controller-icon-30817124.js";import{i as d,b as h}from"./prop.validators-c5e6ad2d.js";import{v as c}from"./suggestions-33f55ec2.js";import{i as u,d as p}from"./component-names-aa3cbc3c.js";import{g as b}from"./controller-ae3a41a0.js";import{t as f}from"./i18n-5fe08f1c.js";import{c as m}from"./clsx-09a06a12.js";import{I as y}from"./InternalUnderlinedBadgeText-68465b64.js";import{s as v,b as g}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./icons-f3b7aabd.js";import"./common-54bf85ba.js";import"./index-541b643a.js";import"./associated.controller-bce3d721.js";import"./access-and-short-key-864aafba.js";import"./tooltip-align-c001aae2.js";import"./align-3f029493.js";import"./hide-label-db0db59c.js";import"./label-d70e7c34.js";import"./i18n-7ea9f137.js";class k extends r{constructor(e,t,n){super(e,t,n),this.component=e}validatePlaceholder(e){d(this.component,"_placeholder",e)}validateRequired(e){h(this.component,"_required",e)}validateSuggestions(e){c(this.component,e)}validateValue(e){d(this.component,"_value",e)}componentWillLoad(){super.componentWillLoad(),this.validatePlaceholder(this.component._placeholder),this.validateRequired(this.component._required),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const x="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox {\n    position: relative;\n  }\n  .combobox--disabled, .combobox--disabled * {\n    cursor: not-allowed !important;\n  }\n  .combobox--disabled {\n    opacity: 0.5;\n    outline: none;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  .combobox__input {\n    flex-grow: 1;\n  }\n  .combobox__icon {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .combobox__listbox {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item {\n    cursor: pointer;\n  }\n  .combobox__listbox--cursor-hidden .combobox__item {\n    cursor: none !important;\n  }\n}",w=x,_=class{async getValue(){return this.state._value}async kolFocus(){var e;null===(e=this.refInput)||void 0===e||e.focus()}selectOption(e,t){var n;this.controller.onFacade.onInput(e,!0,t),this.controller.onFacade.onChange(e,t),this.controller.setFormAssociatedValue(t),this.state._value=t,null===(n=this.refInput)||void 0===n||n.focus()}onInput(e){const t=e.target;this.state._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._suggestions]:(this._filteredSuggestions=Array.isArray(this._suggestions)?this._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)}render(){const n=v(this.state._label),{ariaDescribedBy:o}=b(this.state);return t(i,{key:"c582c7ea460408d5092d339f8c354948ade0ace8",class:"kol-combobox"},t("div",{key:"449497a4ee717f7b7a9a234b06523dcdcd7fe15e",class:m("combobox",this.state._disabled&&"combobox--disabled")},t(u,{key:"c4a306c636ea1489fa24e68639a82e240012a421",_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.refInput)||void 0===e?void 0:e.focus()},role:"presentation"},t("span",{key:"b4d1279c194cf29ad53f826bb1caffb64867ce5b",slot:"label"},n?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(e,null,t(y,{badgeText:g(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},g(this.state._accessKey,this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"d2fdc0250f343437d5c3214e37849b36af724fa7",slot:"input"},t("div",{key:"999e8c651d2443c743c2e610b6c2781dd7132e3b",class:"combobox__group"},t("input",Object.assign({key:"111e6973eec55e0904cea83641c315d2bf5d0444",ref:this.catchRef,class:"combobox__input",type:"text",role:"combobox","aria-autocomplete":"both","aria-expanded":this._isOpen?"true":"false","aria-controls":"listbox",value:this.state._value,accessKey:this.state._accessKey,"aria-describedby":o.length>0?o.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-labelledby":this.state._id,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,name:this.state._name,required:this.state._required,spellcheck:"false"},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})),t("button",{key:"84199174f7e26dff86b32f1cfce56263b84dfc90",tabindex:"-1",class:"combobox__icon",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled},t(p,{key:"0c1ddd3951e85d229c24262d1cb6537c6aab6dec",_icons:"codicon codicon-triangle-down",_label:f("kol-dropdown")}))),this._isOpen&&!(!0===this.state._disabled)&&t("ul",{key:"25f7c5ea63432722e958965cf484973d0d0aff05",role:"listbox",class:m("combobox__listbox",this.blockSuggestionMouseOver&&"combobox__listbox--cursor-hidden"),onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map(((e,n)=>t("li",{id:`option-${n}`,key:`-${n}`,ref:e=>{e&&(this.refSuggestions[n]=e)},"data-index":n,tabIndex:-1,role:"option","aria-selected":this.state._value===e,onClick:t=>{this.selectOption(t,e),this.toggleListbox()},onMouseOver:()=>{this.blockSuggestionMouseOver||this.focusOption(n)},onFocus:()=>{this.focusOption(n)},class:"combobox__item",onKeyDown:t=>{"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(t,e),this.toggleListbox(),t.preventDefault())}},e))))))))}handleKeyDown(e){var t,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":i(!1),null===(n=this.refInput)||void 0===n||n.focus();break;case"NumpadEnter":case"Enter":this.toggleListbox();break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&this.focusOption(0)}));break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)}));break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}handleWindowClick(e){null==this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(e){n(this,e),this.refSuggestions=[],this._focusedOptionIndex=-1,this.toggleListbox=()=>{var e;if(!0===this.state._disabled)this._isOpen=!1;else if(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus(),this._isOpen&&Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){const e=this._filteredSuggestions.findIndex((e=>e===this.state._value));this._focusedOptionIndex=e>=0?e:0,this.focusOption(this._focusedOptionIndex)}},this.catchRef=e=>{this.refInput=e},this.blockSuggestionMouseOver=!1,this._isOpen=!1,this._filteredSuggestions=void 0,this._accessKey=void 0,this._placeholder=void 0,this._alert=void 0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._suggestions=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${s()}`,_label:"",_suggestions:[],_value:""},this.inputHasFocus=!1,this.controller=new k(this,"combobox",this.host),this.onInput=this.onInput.bind(this)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideError(e){this.controller.validateHideError(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}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(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){var t;a(e),l("change",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"!=typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)||this._isOpen||this.state._on.onChange(e,this.state._value)}static get delegatesFocus(){return!0}get host(){return o(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};_.style={default:w};export{_ as kol_combobox};
+import{h as t,r as e,g as n}from"./index-DXabIfEM.js";import{c as i}from"./clsx-eK3rPvPS.js";import{d as o,e as s}from"./component-names-CkE54Ym7.js";import{a,F as l}from"./FormFieldStateWrapper-B3p0ZzG-.js";import{I as r,a as h}from"./controller-icon-jwhou2Oz.js";import{I as d}from"./InputStateWrapper-BNXEE43D.js";import{C as c,a as u}from"./CustomSuggestionsOptionsGroup-C6GgxWBC.js";import{t as m}from"./i18n-CQxlBXNV.js";import{n as p}from"./dev.utils-yQD-QKCU.js";import{d as f,e as b}from"./common-L1K0yh1S.js";import{v as g}from"./placeholder-DrgXYoah.js";import{v}from"./required-7L0ytoMT.js";import{v as k}from"./suggestions-Bufr76At.js";import"./access-and-short-key-Dy2a7Py3.js";import"./disabled-u5a_azlj.js";import"./hide-label-DjBQJOAP.js";import"./label-ohY9ajP0.js";import"./tooltip-align-DEw_M6Is.js";import"./align-Bcqvz5vw.js";import"./events-9-skLO0f.js";import"./associated.controller-CvM-u0FR.js";import"./bootstrap-DKvDv4kw.js";import"./i18n-B-iJAw_i.js";import"./isObject-DvSELytj.js";import"./tslib.es6-CxX45GIN.js";import"./reuse-CX4AQDkS.js";import"./InternalUnderlinedBadgeText-CF6FOiQi.js";import"./Alert-DzpS4CJD.js";import"./bem-CIn1qsbp.js";import"./browser-CyCtPZc0.js";import"./Heading-ClZtMSvA.js";import"./Icon-B8-kh-9q.js";import"./icons-CmMX8bbY.js";import"./Input-CF2Hxzy7.js";class y extends r{constructor(e,t,n){super(e,t,n),this.component=e}validateHideClearButton(e){f(this.component,"_hideClearButton",e)}validatePlaceholder(e){g(this.component,e)}validateRequired(e){v(this.component,e)}validateSuggestions(e){k(this.component,e)}validateValue(e){b(this.component,"_value",e)}componentWillLoad(){super.componentWillLoad(),this.validateHideClearButton(this.component._hideClearButton),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 kolFocus(){var e;null===(e=this.refInput)||void 0===e||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:"0d9f276131000a7a398df8167b7ab687bf191bf8"},this.getFormFieldProps()),t(h,{key:"4bf740e369911ad5af8dc96498a7f895d09e7d86",state:this.state},t("div",{key:"839fb3245b49c1fc922e61898f0e966b3f8946d7",class:"kol-combobox__group"},t(d,Object.assign({key:"c51fa942fe784d4b409e40c07b9f62ba623e8220"},this.getInputProps())),this.state._value&&!this.state._hideClearButton&&t(o,{key:"7121cc55857a492973ab7ea3b6cb68654dc30fcc",_icons:"codicon codicon-close",_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:"6b4af46bfe72c9da959729263c8f0adae6c92f81",_icons:"codicon codicon-triangle-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:"ffbaa34f6801783d5255b82d6df3df643b53913f",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 i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(1));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!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,i(void 0,()=>{this._isOpen&&this.focusOption(0)});break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)});break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(-10));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(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._hideClearButton=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideClearButton:!1,_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}validateHideClearButton(e){this.controller.validateHideClearButton(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"],_hideClearButton:["validateHideClearButton"],_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":["ComboboxController","InputIconController","constructor","component","name","host","super","this","validatePlaceholder","value","watchString","validateRequired","watchBoolean","validateSuggestions","validateValue","componentWillLoad","_placeholder","_required","_suggestions","_value","defaultStyleCss","KolComboboxDefaultStyle0","KolCombobox","getValue","state","kolFocus","_a","refInput","focus","selectOption","event","option","controller","onFacade","onInput","onChange","setFormAssociatedValue","target","setFilteredSuggestionsByQuery","_focusedOptionIndex","handleKeyDownDropdown","key","length","test","_isOpen","focusSuggestionStartingWith","query","trim","_filteredSuggestions","Array","isArray","filter","toLowerCase","includes","moveFocus","delta","newIndex","focusOption","index","refSuggestions","optionElement","char","charLowerCase","findIndex","startsWith","render","hasExpertSlot","showExpertSlot","_label","ariaDescribedBy","getRenderStates","h","Host","class","clsx","_disabled","KolInputTag","_accessKey","_alert","showAsAlert","_hideError","_hideLabel","_hint","_icons","_id","_msg","_shortKey","_tooltipAlign","_touched","onClick","role","slot","Fragment","InternalUnderlinedBadgeText","badgeText","buildBadgeTextString","label","Object","assign","ref","catchRef","type","accessKey","join","undefined","autoCapitalize","autoCorrect","disabled","id","_name","required","spellcheck","onFocus","inputHasFocus","onBlur","bind","placeholder","tabindex","toggleListbox","KolIconTag","translate","blockSuggestionMouseOver","onKeyDown","map","el","tabIndex","e","onMouseOver","preventDefault","handleKeyDown","handleEvent","isOpen","callback","_b","handleWindowClick","contains","hostRef","selectedIndex","_hasValue","nonce","Boolean","validateAccessKey","validateAlert","validateDisabled","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","validateShortKey","validateSyncValueBySelector","validateTabIndex","validateTouched","addValueChangeListener","v","handleMouseEvent","handleFocusOut","setTimeout","document","activeElement","handleWindowBlur","stopPropagation","tryToDispatchKoliBriEvent","_on"],"sources":["src/components/combobox/controller.ts","src/components/combobox/style.scss?tag=kol-combobox&mode=default&encapsulation=shadow","src/components/combobox/shadow.tsx"],"sourcesContent":["import type { ComboboxWatches, ComboboxProps, SuggestionsPropType } from '../../schema';\nimport { watchBoolean, validateSuggestions, watchString } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\n\nexport class ComboboxController extends InputIconController implements ComboboxWatches {\n\tprotected readonly component: Generic.Element.Component & ComboboxProps;\n\n\tpublic constructor(component: Generic.Element.Component & ComboboxProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../@shared/mixins';\n@import '../style';\n@import '../input-line';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.combobox {\n\t\tposition: relative;\n\n\t\t&--disabled,\n\t\t&--disabled * {\n\t\t\tcursor: not-allowed !important;\n\t\t}\n\n\t\t&--disabled {\n\t\t\topacity: 0.5;\n\t\t\toutline: none;\n\t\t}\n\n\t\t&__group {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t&__input {\n\t\t\tflex-grow: 1;\n\t\t}\n\n\t\t&__icon {\n\t\t\talign-items: center;\n\t\t\tcursor: pointer;\n\t\t\tdisplay: flex;\n\t\t\theight: var(--a11y-min-size);\n\t\t\twidth: var(--a11y-min-size);\n\t\t}\n\n\t\t&__listbox {\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\tlist-style-type: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\toverflow-y: auto;\n\t\t\toverflow-x: hidden;\n\t\t\tz-index: 2;\n\t\t\tbackground-color: white;\n\t\t\tmax-height: rem(250);\n\t\t}\n\n\t\t&__item {\n\t\t\tcursor: pointer;\n\n\t\t\t.combobox__listbox--cursor-hidden & {\n\t\t\t\tcursor: none !important;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type {\n\tComboboxAPI,\n\tComboboxStates,\n\tHideErrorPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '../../schema';\nimport { buildBadgeTextString, showExpertSlot } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { ComboboxController } from './controller';\nimport { KolIconTag, KolInputTag } from '../../core/component-names';\nimport { InternalUnderlinedBadgeText } from '../../functional-components';\nimport { getRenderStates } from '../input/controller';\nimport { translate } from '../../i18n';\nimport clsx from 'clsx';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-combobox',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolCombobox implements ComboboxAPI {\n\t@Element() private readonly host?: HTMLKolComboboxElement;\n\tprivate refInput?: HTMLInputElement;\n\tprivate refSuggestions: HTMLLIElement[] = [];\n\tprivate _focusedOptionIndex: number = -1;\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this.state._value;\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.refInput?.focus();\n\t}\n\n\tprivate toggleListbox = () => {\n\t\tif (this.state._disabled === true) {\n\t\t\tthis._isOpen = false;\n\t\t} else {\n\t\t\tthis._isOpen = !this._isOpen;\n\t\t\tthis.refInput?.focus();\n\t\t\tif (this._isOpen && Array.isArray(this._filteredSuggestions) && this._filteredSuggestions.length > 0) {\n\t\t\t\tconst selectedIndex = this._filteredSuggestions.findIndex((option) => option === this.state._value);\n\t\t\t\tthis._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : 0;\n\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t}\n\t\t}\n\t};\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.refInput = ref;\n\t};\n\n\tprivate selectOption(event: Event, option: string) {\n\t\tthis.controller.onFacade.onInput(event, true, option);\n\t\tthis.controller.onFacade.onChange(event, option);\n\t\tthis.controller.setFormAssociatedValue(option);\n\t\tthis.state._value = option;\n\t\tthis.refInput?.focus();\n\t}\n\tprivate onInput(event: Event) {\n\t\tconst target = event.target as HTMLInputElement;\n\t\tthis.state._value = target.value;\n\t\tthis.controller.onFacade.onInput(event);\n\t\tthis.setFilteredSuggestionsByQuery(target.value);\n\t\tthis._focusedOptionIndex = -1;\n\t}\n\n\tprivate handleKeyDownDropdown(event: KeyboardEvent) {\n\t\tif (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {\n\t\t\tthis._isOpen = true;\n\t\t\tthis.focusSuggestionStartingWith(event.key);\n\t\t}\n\t}\n\n\tprivate setFilteredSuggestionsByQuery(query: string) {\n\t\tif (query.trim() === '') {\n\t\t\tthis._filteredSuggestions = [...this._suggestions];\n\t\t} else {\n\t\t\tthis._filteredSuggestions = Array.isArray(this._suggestions)\n\t\t\t\t? this._suggestions.filter((option: W3CInputValue) => {\n\t\t\t\t\t\treturn (option as string).toLowerCase().includes(query.toLowerCase());\n\t\t\t\t\t})\n\t\t\t\t: this._filteredSuggestions;\n\n\t\t\tthis._isOpen = this._filteredSuggestions && this._filteredSuggestions.length > 0 ? true : false;\n\t\t}\n\t}\n\n\tprivate moveFocus(delta: number) {\n\t\tif (!this._filteredSuggestions) {\n\t\t\treturn;\n\t\t}\n\t\tlet newIndex = this._focusedOptionIndex + delta;\n\n\t\tif (newIndex >= this._filteredSuggestions.length) {\n\t\t\tnewIndex = 0;\n\t\t}\n\n\t\tif (newIndex < 0) {\n\t\t\tnewIndex = this._filteredSuggestions.length - 1;\n\t\t}\n\t\tthis.focusOption(newIndex);\n\t}\n\n\tprivate focusOption(index: number) {\n\t\tthis._focusedOptionIndex = index;\n\t\tif (this.refSuggestions) {\n\t\t\tconst optionElement = this.refSuggestions[index];\n\t\t\toptionElement?.focus();\n\t\t}\n\t}\n\n\tprivate focusSuggestionStartingWith(char: string) {\n\t\tconst charLowerCase = char.toLowerCase();\n\n\t\tconst index =\n\t\t\tArray.isArray(this._filteredSuggestions) &&\n\t\t\tthis._filteredSuggestions.length > 0 &&\n\t\t\tthis._filteredSuggestions.findIndex((option: W3CInputValue) => (option as string).toLowerCase().startsWith(charLowerCase));\n\n\t\tif (typeof index === 'number') {\n\t\t\tthis.focusOption(index);\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\n\t\treturn (\n\t\t\t<Host class=\"kol-combobox\">\n\t\t\t\t<div class={clsx('combobox', this.state._disabled && 'combobox--disabled')}>\n\t\t\t\t\t<KolInputTag\n\t\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t\t_alert={this.showAsAlert()}\n\t\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t\t_msg={this.state._msg}\n\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t_shortKey={this.state._shortKey}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\tonClick={() => this.refInput?.focus()}\n\t\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t\t<div class=\"combobox__group\">\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\t\t\tclass=\"combobox__input\"\n\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\t\t\t\taria-autocomplete=\"both\"\n\t\t\t\t\t\t\t\t\taria-expanded={this._isOpen ? 'true' : 'false'}\n\t\t\t\t\t\t\t\t\taria-controls=\"listbox\"\n\t\t\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\t\taria-labelledby={this.state._id}\n\t\t\t\t\t\t\t\t\taria-activedescendant={this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined}\n\t\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\t\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\t\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonChange={this.onChange.bind(this)}\n\t\t\t\t\t\t\t\t\tonInput={this.onInput.bind(this)}\n\t\t\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<button tabindex=\"-1\" class=\"combobox__icon\" onClick={this.toggleListbox.bind(this)} disabled={this.state._disabled}>\n\t\t\t\t\t\t\t\t\t<KolIconTag _icons=\"codicon codicon-triangle-down\" _label={translate('kol-dropdown')} />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{this._isOpen && !(this.state._disabled === true) && (\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\t\t\t\tclass={clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden')}\n\t\t\t\t\t\t\t\t\tonKeyDown={this.handleKeyDownDropdown.bind(this)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{Array.isArray(this._filteredSuggestions) &&\n\t\t\t\t\t\t\t\t\t\tthis._filteredSuggestions.length > 0 &&\n\t\t\t\t\t\t\t\t\t\tthis._filteredSuggestions.map((option, index) => (\n\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\tid={`option-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) this.refSuggestions[index] = el;\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tdata-index={index}\n\t\t\t\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-selected={this.state._value === option}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(e, option as string);\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox();\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!this.blockSuggestionMouseOver) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"combobox__item\"\n\t\t\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter' || e.key === 'NumpadEnter') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(e, option as string);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{option}\n\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolInputTag>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst handleEvent = (isOpen?: boolean, callback?: () => void): void => {\n\t\t\tevent.preventDefault();\n\t\t\tif (isOpen !== undefined) {\n\t\t\t\tthis._isOpen = isOpen;\n\t\t\t\tif (!isOpen) {\n\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t}\n\t\t\t}\n\t\t\tcallback?.();\n\t\t};\n\t\tswitch (event.key) {\n\t\t\tcase 'Down':\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(true, () => this.moveFocus(1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Up':\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(true, () => this.moveFocus(-1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Tab':\n\t\t\t\tif (this._isOpen) {\n\t\t\t\t\tthis._isOpen = !this._isOpen;\n\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'Esc':\n\t\t\tcase 'Escape': {\n\t\t\t\thandleEvent(false);\n\t\t\t\tthis.refInput?.focus();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'NumpadEnter':\n\t\t\tcase 'Enter': {\n\t\t\t\tthis.toggleListbox();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis.focusOption(0);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis.focusOption(this._filteredSuggestions ? this._filteredSuggestions.length - 1 : 0);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageUp': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(-10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageDown': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate readonly controller: ComboboxController;\n\t@State()\n\tprivate blockSuggestionMouseOver: boolean = false;\n\t@State()\n\tprivate _isOpen: boolean = false;\n\t@State()\n\tprivate _filteredSuggestions?: SuggestionsPropType;\n\n\t@Listen('click', { target: 'window' })\n\thandleWindowClick(event: MouseEvent) {\n\t\tif (this.host != undefined && !this.host.contains(event.target as Node)) {\n\t\t\tthis._isOpen = false;\n\t\t}\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t * @deprecated Will be removed in v3. Use automatic behaviour instead.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Suggestions the user can choose from.\n\t */\n\t@Prop() public _suggestions!: SuggestionsPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: ComboboxStates = {\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t\t_value: '',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new ComboboxController(this, 'combobox', this.host);\n\t\tthis.onInput = this.onInput.bind(this);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\tif (this.state._alert === undefined) {\n\t\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t\t}\n\t\treturn this.state._alert;\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t\tthis._filteredSuggestions = value;\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t\tthis.controller.setFormAssociatedValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.refSuggestions = [];\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t\tthis._filteredSuggestions = this.state._suggestions;\n\t}\n\n\t@Listen('mousemove')\n\tpublic handleMouseEvent() {\n\t\tthis.blockSuggestionMouseOver = false;\n\t}\n\n\t@Listen('focusout', { target: 'window' })\n\tpublic handleFocusOut() {\n\t\tsetTimeout(() => {\n\t\t\tif (!this.host?.contains(document.activeElement)) {\n\t\t\t\tthis.onBlur();\n\t\t\t}\n\t\t}, 0);\n\t}\n\t@Listen('blur', { target: 'window' })\n\tpublic handleWindowBlur() {\n\t\tthis.onBlur();\n\t}\n\n\tprivate onBlur() {\n\t\tif (this._isOpen) {\n\t\t\tthis._isOpen = !this._isOpen;\n\t\t\tthis.refInput?.focus();\n\t\t}\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, this.state._value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(this.state._value as unknown as string);\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function' && !this._isOpen) {\n\t\t\tthis.state._on.onChange(event, this.state._value);\n\t\t}\n\t}\n}\n"],"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","validateHideClearButton","value","validateValue","componentWillLoad","_hideClearButton","_placeholder","_required","_suggestions","_value","defaultStyleCss","KolCombobox","getValue","state","kolFocus","_a","refInput","focus","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":[]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"kol-details.entry.esm.js","sources":["src/schema/props/details-callbacks.ts","src/components/details/style.scss?tag=kol-details&mode=default&encapsulation=shadow","src/components/details/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Callback } from '../enums';\nimport type { EventValueOrEventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type DetailsCallbacksPropType<T> = {\n\t[Callback.onToggle]?: EventValueOrEventCallback<MouseEvent, T>;\n};\n\n/**\n * Defines the callback functions for detail events.\n */\nexport type PropDetailsCallbacks<T> = {\n\ton: DetailsCallbacksPropType<T>;\n};\n\n/* validator */\nexport const validateDetailsCallbacks = (component: Generic.Element.Component, value?: DetailsCallbacksPropType<boolean>): void => {\n\twatchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['DetailsCallbacksPropType {Events.onToggle}']), value);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../host-display-block' as *;\n@use '../../functional-components/Collapsible/collapsible' as *;\n\n@layer kol-component {\n\t.kol-details {\n\t\t&__heading-button {\n\t\t\tdisplay: flex;\n\n\t\t\t.kol-button {\n\t\t\t\tmin-height: auto;\n\n\t\t\t\t.kol-span {\n\t\t\t\t\t&__label {\n\t\t\t\t\t\tborder-bottom-color: grey;\n\t\t\t\t\t\tborder-bottom-style: solid;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.collapsible--open &__heading-button {\n\t\t\t.kol-icon::part(icon) {\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, type JSX, Method, Prop, State, Watch } from '@stencil/core';\nimport KolCollapsibleFc, { type CollapsibleProps } from '../../functional-components/Collapsible';\nimport type { DetailsAPI, DetailsCallbacksPropType, DetailsStates, DisabledPropType, FocusableElement, HeadingLevel, LabelPropType } from '../../schema';\nimport { validateDetailsCallbacks, validateDisabled, validateLabel, validateOpen } from '../../schema';\nimport { nonce } from '../../utils/dev.utils';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { watchHeadingLevel } from '../heading/validation';\n\n/**\n * @slot - Der Inhalt, der in der Detailbeschreibung angezeigt wird.\n */\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements DetailsAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolDetailsElement;\n\n\tprivate readonly nonce = nonce();\n\tprivate buttonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.buttonWcRef = ref;\n\t};\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tawait this.buttonWcRef?.kolFocus();\n\t}\n\n\tprivate toggleTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate handleOnClick = (event: MouseEvent) => {\n\t\tthis._open = !this._open;\n\n\t\t/**\n\t\t * Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\n\t\tclearTimeout(this.toggleTimeout);\n\n\t\tthis.toggleTimeout = setTimeout(() => {\n\t\t\tif (this.host) {\n\t\t\t\tdispatchDomEvent(this.host, KolEvent.toggle, Boolean(this._open));\n\t\t\t}\n\t\t\tthis.state._on?.onToggle?.(event, Boolean(this._open));\n\t\t}, 25);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { _open, _label, _disabled, _level } = this.state;\n\n\t\tconst rootClass = 'kol-details';\n\n\t\tconst props: CollapsibleProps = {\n\t\t\tid: this.nonce,\n\t\t\tlabel: _label,\n\t\t\topen: _open,\n\t\t\tdisabled: _disabled,\n\t\t\tlevel: _level,\n\t\t\tonClick: this.handleOnClick,\n\t\t\tclass: rootClass,\n\t\t\tHeadingProps: { class: `${rootClass}__heading` },\n\t\t\tHeadingButtonProps: {\n\t\t\t\tref: this.catchRef,\n\t\t\t\tclass: `${rootClass}__heading-button`,\n\t\t\t\t_icons: 'codicon codicon-chevron-right',\n\t\t\t},\n\t\t\tContentProps: {\n\t\t\t\tclass: `${rootClass}__content indented-text`,\n\t\t\t\twrapperClass: `${rootClass}__wrapper`,\n\t\t\t\tanimationClass: `${rootClass}__wrapper-animation`,\n\t\t\t},\n\t\t};\n\n\t\treturn (\n\t\t\t<KolCollapsibleFc {...props}>\n\t\t\t\t<slot />\n\t\t\t</KolCollapsibleFc>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Defines the callback functions for details.\n\t */\n\t@Prop() public _on?: DetailsCallbacksPropType<boolean>;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: DetailsStates = {\n\t\t_label: '', // ⚠ required\n\t\t_level: 0,\n\t\t_on: {},\n\t};\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(on?: DetailsCallbacksPropType<boolean>) {\n\t\tvalidateDetailsCallbacks(this, on);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t,g as i}from"./index-4c718166.js";import{n as o}from"./dev.utils-5db255b5.js";import{w as a}from"./validation-e83461ea.js";import{t as s}from"./events-29e84d75.js";import{K as l}from"./Collapsible-d17302d5.js";import{w as r}from"./prop.validators-c5e6ad2d.js";import{v as d}from"./disabled-5fc4b444.js";import{v as h}from"./label-d70e7c34.js";import{v as c}from"./open-f7031548.js";import"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./tslib.es6-2e5096f8.js";import"./clsx-09a06a12.js";import"./component-names-aa3cbc3c.js";import"./Heading-98b6ed4f.js";import"./index-541b643a.js";const p=(n,e)=>{r(n,"_on",(n=>"object"==typeof n&&null!==n),new Set(["DetailsCallbacksPropType {Events.onToggle}"]),e)},b="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    min-height: 0;\n    transition: visibility 0.3s;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n  }\n  .open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .open .collapsible__wrapper-animation {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition-duration: 0s;\n    }\n  }\n  @media print {\n    :not(.open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__heading-button button .kol-span-wc {\n    justify-items: start;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .details__heading-button {\n    display: flex;\n  }\n  .details__heading-button button {\n    min-height: auto;\n  }\n  .details__heading-button button .kol-span-wc .span-label {\n    border-bottom-color: grey;\n    border-bottom-style: solid;\n  }\n  .open .details__heading-button .kol-icon::part(icon) {\n    transform: rotate(90deg);\n  }\n}",m=b,u=class{constructor(e){n(this,e),this.nonce=o(),this.catchRef=n=>{this.buttonWcRef=n},this.handleOnClick=n=>{this._open=!this._open,clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var e,t;s("toggle",this.host,this._open),null===(t=null===(e=this.state._on)||void 0===e?void 0:e.onToggle)||void 0===t||t.call(e,n,Boolean(this._open))}),25)},this._disabled=!1,this._label=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_label:"",_level:1,_on:{}}}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){const{_open:n,_label:i,_disabled:o}=this.state,a="details",s={id:this.nonce,label:i,open:n,disabled:o,level:1,onClick:this.handleOnClick,class:a,HeadingProps:{class:`${a}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${a}__heading-button`,_icons:"codicon codicon-chevron-right"},ContentProps:{class:`${a}__content indented-text`,wrapperClass:`${a}__wrapper`,animationClass:`${a}__wrapper-animation`}};return e(t,{key:"f1625220d7832b2d95371580b50b771e41b3db35",class:"kol-details"},e(l,Object.assign({key:"fcfcb5eb41b2657a8ef67acd4ef3d86be31a17d1"},s),e("slot",{key:"ef6a5d7ce16cd5e971f84ba18757f490edc218b6"})))}validateDisabled(n){d(this,n)}validateLabel(n){h(this,n,{required:!0})}validateLevel(n){a(this,n)}validateOn(n){p(this,n)}validateOpen(n){c(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 i(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};u.style={default:m};export{u as kol_details};
+import{r as n,h as e,g as t}from"./index-DXabIfEM.js";import{K as i}from"./Collapsible-CIER1XyD.js";import{w as o}from"./common-L1K0yh1S.js";import{v as a}from"./disabled-u5a_azlj.js";import{v as l}from"./label-ohY9ajP0.js";import{v as s}from"./open-BFQWty8w.js";import{n as r}from"./dev.utils-yQD-QKCU.js";import{d,K as h}from"./events-9-skLO0f.js";import{w as c}from"./validation-BVeaxeev.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-eK3rPvPS.js";import"./component-names-CkE54Ym7.js";import"./Heading-ClZtMSvA.js";const p=(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 kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}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:"codicon codicon-chevron-right"},ContentProps:{class:`${l}__content indented-text`,wrapperClass:`${l}__wrapper`,animationClass:`${l}__wrapper-animation`}};return e(i,Object.assign({key:"e149779c3d5053267bcd2785b061c3862c1ab806"},s),e("slot",{key:"ba4278e16e1cd27c08ecc5aef1d47d8427d94575"}))}validateDisabled(n){a(this,n)}validateLabel(n){l(this,n,{required:!0})}validateLevel(n){c(this,n)}validateOn(n){p(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-details.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["validateDetailsCallbacks","component","value","watchValidator","Set","defaultStyleCss","KolDetailsDefaultStyle0","KolDetails","this","nonce","catchRef","ref","buttonWcRef","handleOnClick","event","_open","clearTimeout","toggleTimeout","setTimeout","tryToDispatchKoliBriEvent","host","_b","_a","state","_on","onToggle","call","Boolean","_label","_level","focus","kolFocus","render","_disabled","rootClass","props","id","label","open","disabled","level","onClick","class","HeadingProps","HeadingButtonProps","_icons","ContentProps","wrapperClass","animationClass","h","Host","key","KolCollapsibleFc","Object","assign","validateDisabled","validateLabel","required","validateLevel","watchHeadingLevel","validateOn","on","validateOpen","componentWillLoad"],"sources":["src/schema/props/details-callbacks.ts","src/components/details/style.scss?tag=kol-details&mode=default&encapsulation=shadow","src/components/details/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Events } from '../enums';\nimport type { EventValueOrEventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type DetailsCallbacksPropType<T> = {\n\t[Events.onToggle]?: EventValueOrEventCallback<MouseEvent, T>;\n};\n\n/**\n * Defines the callback functions for detail events.\n */\nexport type PropDetailsCallbacks<T> = {\n\ton: DetailsCallbacksPropType<T>;\n};\n\n/* validator */\nexport const validateDetailsCallbacks = (component: Generic.Element.Component, value?: DetailsCallbacksPropType<boolean>): void => {\n\twatchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['DetailsCallbacksPropType {Events.onToggle}']), value);\n};\n","@import '../@shared/mixins';\n@import '../style';\n@import '../host-display-block';\n@import '../../functional-components/Collapsible/collapsible';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.details {\n\t\t&__heading-button {\n\t\t\tdisplay: flex;\n\n\t\t\tbutton {\n\t\t\t\tmin-height: auto;\n\t\t\t}\n\n\t\t\tbutton .kol-span-wc .span-label {\n\t\t\t\tborder-bottom-color: grey;\n\t\t\t\tborder-bottom-style: solid;\n\t\t\t}\n\t\t}\n\n\t\t.open &__heading-button {\n\t\t\t.kol-icon::part(icon) {\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Method, Prop, State, Watch, type JSX } from '@stencil/core';\nimport type { DetailsCallbacksPropType, DetailsAPI, DetailsStates, DisabledPropType, FocusableElement, HeadingLevel, LabelPropType } from '../../schema';\nimport { validateDetailsCallbacks, validateDisabled, validateLabel, validateOpen } from '../../schema';\nimport KolCollapsibleFc, { type CollapsibleProps } from '../../functional-components/Collapsible';\nimport { nonce } from '../../utils/dev.utils';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { tryToDispatchKoliBriEvent } from '../../utils/events';\n\n/**\n * @slot - Der Inhalt, der in der Detailbeschreibung angezeigt wird.\n */\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements DetailsAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolDetailsElement;\n\n\tprivate readonly nonce = nonce();\n\tprivate buttonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.buttonWcRef = ref;\n\t};\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tawait this.buttonWcRef?.kolFocus();\n\t}\n\n\tprivate toggleTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate handleOnClick = (event: MouseEvent) => {\n\t\tthis._open = !this._open;\n\n\t\t/**\n\t\t * Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\n\t\tclearTimeout(this.toggleTimeout);\n\n\t\tthis.toggleTimeout = setTimeout(() => {\n\t\t\ttryToDispatchKoliBriEvent('toggle', this.host, this._open);\n\n\t\t\tthis.state._on?.onToggle?.(event, Boolean(this._open));\n\t\t}, 25);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { _open, _label, _disabled } = this.state;\n\t\tconst _level = 1;\n\n\t\tconst rootClass = 'details';\n\n\t\tconst props: CollapsibleProps = {\n\t\t\tid: this.nonce,\n\t\t\tlabel: _label,\n\t\t\topen: _open,\n\t\t\tdisabled: _disabled,\n\t\t\tlevel: _level,\n\t\t\tonClick: this.handleOnClick,\n\t\t\tclass: rootClass,\n\t\t\tHeadingProps: { class: `${rootClass}__heading` },\n\t\t\tHeadingButtonProps: {\n\t\t\t\tref: this.catchRef,\n\t\t\t\tclass: `${rootClass}__heading-button`,\n\t\t\t\t_icons: 'codicon codicon-chevron-right',\n\t\t\t},\n\t\t\tContentProps: {\n\t\t\t\tclass: `${rootClass}__content indented-text`,\n\t\t\t\twrapperClass: `${rootClass}__wrapper`,\n\t\t\t\tanimationClass: `${rootClass}__wrapper-animation`,\n\t\t\t},\n\t\t};\n\n\t\treturn (\n\t\t\t<Host class=\"kol-details\">\n\t\t\t\t<KolCollapsibleFc {...props}>\n\t\t\t\t\t<slot />\n\t\t\t\t</KolCollapsibleFc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Defines the callback functions for details.\n\t */\n\t@Prop() public _on?: DetailsCallbacksPropType<boolean>;\n\n\t/**\n\t * If set (to true) opens/expands the element, closes if not set (or set to false).\n\t * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: DetailsStates = {\n\t\t_label: '', // ⚠ required\n\t\t_level: 1,\n\t\t_on: {},\n\t};\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(on?: DetailsCallbacksPropType<boolean>) {\n\t\tvalidateDetailsCallbacks(this, on);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n}\n"],"mappings":";;;gnBAkBO,MAAMA,EAA2B,CAACC,EAAsCC,KAC9EC,EAAeF,EAAW,OAAQC,UAAiBA,IAAU,UAAYA,IAAU,MAAM,IAAIE,IAAI,CAAC,+CAAgDF,EAAM,ECnBzJ,MAAMG,EAAkB,m2LACxB,MAAAC,EAAeD,E,MCiBFE,EAAU,M,yBAGLC,KAAAC,MAAQA,IAGRD,KAAAE,SAAYC,IAC5BH,KAAKI,YAAcD,CAAG,EAmBfH,KAAAK,cAAiBC,IACxBN,KAAKO,OAASP,KAAKO,MASnBC,aAAaR,KAAKS,eAElBT,KAAKS,cAAgBC,YAAW,K,QAC/BC,EAA0B,SAAUX,KAAKY,KAAMZ,KAAKO,QAEpDM,GAAAC,EAAAd,KAAKe,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEG,YAAQ,MAAAJ,SAAA,SAAAA,EAAAK,KAAAJ,EAAGR,EAAOa,QAAQnB,KAAKO,OAAO,GACpD,GAAG,E,eA0C8B,M,kCAUE,E,8BAW0B,M,WAE1B,CACtCa,OAAQ,GACRC,OAAQ,EACRL,IAAK,G,CAhGC,WAAMM,SACNtB,KAAKuB,U,CAKL,cAAMA,G,aACNT,EAAAd,KAAKI,eAAW,MAAAU,SAAA,SAAAA,EAAES,W,CAwBlB,MAAAC,GACN,MAAMjB,MAAEA,EAAKa,OAAEA,EAAMK,UAAEA,GAAczB,KAAKe,MAC1C,MAAMM,EAAS,EAEf,MAAMK,EAAY,UAElB,MAAMC,EAA0B,CAC/BC,GAAI5B,KAAKC,MACT4B,MAAOT,EACPU,KAAMvB,EACNwB,SAAUN,EACVO,MAAOX,EACPY,QAASjC,KAAKK,cACd6B,MAAOR,EACPS,aAAc,CAAED,MAAO,GAAGR,cAC1BU,mBAAoB,CACnBjC,IAAKH,KAAKE,SACVgC,MAAO,GAAGR,oBACVW,OAAQ,iCAETC,aAAc,CACbJ,MAAO,GAAGR,2BACVa,aAAc,GAAGb,aACjBc,eAAgB,GAAGd,yBAIrB,OACCe,EAACC,EAAI,CAAAC,IAAA,2CAACT,MAAM,eACXO,EAACG,EAAgBC,OAAAC,OAAA,CAAAH,IAAA,4CAAKhB,GACrBc,EAAA,QAAAE,IAAA,8C,CAuCG,gBAAAI,CAAiBrD,GACvBqD,EAAiB/C,KAAMN,E,CAIjB,aAAAsD,CAActD,GACpBsD,EAAchD,KAAMN,EAAO,CAC1BuD,SAAU,M,CAKL,aAAAC,CAAcxD,GACpByD,EAAkBnD,KAAMN,E,CAIlB,UAAA0D,CAAWC,GACjB7D,EAAyBQ,KAAMqD,E,CAIzB,YAAAC,CAAa5D,GACnB4D,EAAatD,KAAMN,E,CAGb,iBAAA6D,GACNvD,KAAK+C,iBAAiB/C,KAAKyB,WAC3BzB,KAAKgD,cAAchD,KAAKoB,QACxBpB,KAAKkD,cAAclD,KAAKqB,QACxBrB,KAAKoD,WAAWpD,KAAKgB,KACrBhB,KAAKsD,aAAatD,KAAKO,M","ignoreList":[]}
+{"version":3,"names":["registerInstance","h","getElement","KolCollapsibleFc","watchValidator","validateDisabled","validateLabel","validateOpen","nonce","dispatchDomEvent","KolEvent","watchHeadingLevel","validateDetailsCallbacks","component","value","Set","defaultStyleCss","KolDetails","constructor","hostRef","this","catchRef","ref","buttonWcRef","handleOnClick","event","_open","clearTimeout","toggleTimeout","setTimeout","_a","_b","host","toggle","Boolean","state","_on","onToggle","call","_disabled","_level","_label","kolFocus","render","rootClass","props","id","label","open","disabled","level","onClick","class","HeadingProps","HeadingButtonProps","_icons","ContentProps","wrapperClass","animationClass","Object","assign","key","required","validateLevel","validateOn","on","componentWillLoad","watchers","style","default"],"sources":["0"],"mappings":";;;YAGcA,OAAkBC,OAAQC,MAAkB,kCAC5CC,MAAwB,wCACxBC,MAAsB,mCACtBC,MAAwB,qCACxBC,MAAqB,kCACrBC,MAAoB,iCACpBC,MAAa,iCACbC,OAAuBC,MAAgB,mCACvCC,MAAyB,iCAChC,gCACA,2BACA,sCACA,wBAEP,MAAMC,EAA2B,CAACC,EAAWC,KACzCV,EAAeS,EAAW,OAAQC,UAAiBA,IAAU,UAAYA,IAAU,MAAM,IAAIC,IAAI,CAAC,+CAAgDD,EAAM,EAG5J,MAAME,EAAkB,m3OAExB,MAAMC,EAAa,MACf,WAAAC,CAAYC,GACRnB,EAAiBoB,KAAMD,GACvBC,KAAKZ,MAAQA,IACbY,KAAKC,SAAYC,IACbF,KAAKG,YAAcD,CAAG,EAE1BF,KAAKI,cAAiBC,IAClBL,KAAKM,OAASN,KAAKM,MACnBC,aAAaP,KAAKQ,eAClBR,KAAKQ,cAAgBC,YAAW,KAC5B,IAAIC,EAAIC,EACR,GAAIX,KAAKY,KAAM,CACXvB,EAAiBW,KAAKY,KAAMtB,EAASuB,OAAQC,QAAQd,KAAKM,OAC9D,EACCK,GAAMD,EAAKV,KAAKe,MAAMC,OAAS,MAAQN,SAAY,OAAS,EAAIA,EAAGO,YAAc,MAAQN,SAAY,OAAS,EAAIA,EAAGO,KAAKR,EAAIL,EAAOS,QAAQd,KAAKM,OAAO,GAC3J,GAAG,EAEVN,KAAKmB,UAAY,MACjBnB,KAAKoB,OAAS,EACdpB,KAAKM,MAAQ,MACbN,KAAKe,MAAQ,CACTM,OAAQ,GACRD,OAAQ,EACRJ,IAAK,CAAC,EAEd,CACA,cAAMM,GACF,IAAIZ,SACIA,EAAKV,KAAKG,eAAiB,MAAQO,SAAY,OAAS,EAAIA,EAAGY,WAC3E,CACA,MAAAC,GACI,MAAMjB,MAAEA,EAAKe,OAAEA,EAAMF,UAAEA,EAASC,OAAEA,GAAWpB,KAAKe,MAClD,MAAMS,EAAY,cAClB,MAAMC,EAAQ,CACVC,GAAI1B,KAAKZ,MACTuC,MAAON,EACPO,KAAMtB,EACNuB,SAAUV,EACVW,MAAOV,EACPW,QAAS/B,KAAKI,cACd4B,MAAOR,EACPS,aAAc,CAAED,MAAO,GAAGR,cAC1BU,mBAAoB,CAChBhC,IAAKF,KAAKC,SACV+B,MAAO,GAAGR,oBACVW,OAAQ,iCAEZC,aAAc,CACVJ,MAAO,GAAGR,2BACVa,aAAc,GAAGb,aACjBc,eAAgB,GAAGd,yBAG3B,OAAQ3C,EAAEE,EAAkBwD,OAAOC,OAAO,CAAEC,IAAK,4CAA8ChB,GAAQ5C,EAAE,OAAQ,CAAE4D,IAAK,6CAC5H,CACA,gBAAAxD,CAAiBS,GACbT,EAAiBe,KAAMN,EAC3B,CACA,aAAAR,CAAcQ,GACVR,EAAcc,KAAMN,EAAO,CACvBgD,SAAU,MAElB,CACA,aAAAC,CAAcjD,GACVH,EAAkBS,KAAMN,EAC5B,CACA,UAAAkD,CAAWC,GACPrD,EAAyBQ,KAAM6C,EACnC,CACA,YAAA1D,CAAaO,GACTP,EAAaa,KAAMN,EACvB,CACA,iBAAAoD,GACI9C,KAAKf,iBAAiBe,KAAKmB,WAC3BnB,KAAKd,cAAcc,KAAKqB,QACxBrB,KAAK2C,cAAc3C,KAAKoB,QACxBpB,KAAK4C,WAAW5C,KAAKgB,KACrBhB,KAAKb,aAAaa,KAAKM,MAC3B,CACA,QAAIM,GAAS,OAAO9B,EAAWkB,KAAO,CACtC,mBAAW+C,GAAa,MAAO,CAC3B5B,UAAa,CAAC,oBACdE,OAAU,CAAC,iBACXD,OAAU,CAAC,iBACXJ,IAAO,CAAC,cACRV,MAAS,CAAC,gBACX,GAEPT,EAAWmD,MAAQ,CACfC,QAASrD,UAGJC","ignoreList":[]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"kol-drawer.entry.esm.js","sources":["src/components/drawer/style.scss?tag=kol-drawer&mode=default&encapsulation=shadow","src/components/drawer/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../../styles/kol-card-mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t@include kol-card;\n\n\t.kol-drawer {\n\t\t$root: &;\n\n\t\t&__dialog {\n\t\t\tpadding: 0;\n\t\t\tborder: none;\n\t\t}\n\n\t\t&__wrapper {\n\t\t\tposition: fixed;\n\t\t\toverflow: auto;\n\n\t\t\t&--left,\n\t\t\t&--right {\n\t\t\t\ttop: 0;\n\t\t\t\tmax-width: 100vw;\n\t\t\t\theight: 100vh;\n\n\t\t\t\t#{$root}__content {\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&--left {\n\t\t\t\tleft: 0;\n\t\t\t}\n\n\t\t\t&--right {\n\t\t\t\tright: 0;\n\t\t\t}\n\n\t\t\t&--bottom,\n\t\t\t&--top {\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100vw;\n\t\t\t\tmax-height: 100vh;\n\n\t\t\t\t#{$root}__content {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&--bottom {\n\t\t\t\tbottom: 0;\n\t\t\t}\n\n\t\t\t&--top {\n\t\t\t\ttop: 0;\n\t\t\t}\n\t\t}\n\n\t\t&__content {\n\t\t\tposition: relative;\n\t\t}\n\t}\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\nimport { KolCardWcTag } from '../../core/component-names';\nimport type { AlignPropType, DrawerAPI, DrawerStates, HasCloserPropType, KoliBriModalEventCallbacks, LabelPropType, OpenPropType } from '../../schema';\nimport { setState, validateAlign, validateHasCloser, validateLabel, validateOpen } from '../../schema';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { handleCancelOverlay } from '../../utils/tooltip-open-tracking';\n\n/**\n * @slot - The Content of drawer.\n */\n@Component({\n\ttag: 'kol-drawer',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDrawer implements DrawerAPI {\n\t@Element() private readonly host?: HTMLKolDetailsElement;\n\tprivate dialogElement?: HTMLDialogElement;\n\tprivate dialogWrapperElement?: HTMLKolCardWcElement;\n\n\t/**\n\t * Opens the drawer.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tasync open() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_open: true,\n\t\t};\n\t\tthis.dialogElement?.showModal();\n\t}\n\n\t/**\n\t * Closes the drawer.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tasync close() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_open: false,\n\t\t};\n\t\tconst wrapper = this.dialogWrapperElement;\n\t\tif (!wrapper) return;\n\t\tconst computedStyle = window.getComputedStyle(wrapper);\n\t\tif (computedStyle.animationName === 'none') {\n\t\t\tthis.handleCloseDialog();\n\t\t}\n\t}\n\n\tprivate getWrapperRef = (el: HTMLKolCardWcElement | undefined) => (this.dialogWrapperElement = el as HTMLKolCardWcElement);\n\tprivate renderDialogContent() {\n\t\tconst align = this.state._align as string;\n\t\treturn (\n\t\t\t<KolCardWcTag\n\t\t\t\tref={this.getWrapperRef}\n\t\t\t\tclass={clsx(`kol-drawer__wrapper`, `kol-drawer__wrapper--${align}`, {\n\t\t\t\t\t'kol-drawer__wrapper--open': this.state._open,\n\t\t\t\t\t'kol-drawer__wrapper--is-closing': this.state._open === false,\n\t\t\t\t})}\n\t\t\t\t_label={this.state._label}\n\t\t\t\t_hasCloser={this.state._hasCloser}\n\t\t\t\t_on={{\n\t\t\t\t\tonClose: () => {\n\t\t\t\t\t\tvoid this.close();\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div class=\"kol-drawer__content\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</KolCardWcTag>\n\t\t);\n\t}\n\n\tprivate getRef = (el: HTMLDialogElement | undefined) => {\n\t\tthis.dialogElement = el as HTMLDialogElement;\n\t\tsetTimeout(() => {\n\t\t\tvoid this.openOrCloseBasedOnState(); // handle initial state as soon as element is ready\n\t\t});\n\t};\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-drawer\">\n\t\t\t\t<dialog aria-label={this.state._label} class=\"kol-drawer__dialog\" onCancel={handleCancelOverlay} ref={this.getRef}>\n\t\t\t\t\t{this.renderDialogContent()}\n\t\t\t\t</dialog>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() public _open?: OpenPropType;\n\n\t/**\n\t * Defines the visual orientation of the component.\n\t */\n\t@Prop() public _align?: AlignPropType;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Specifies the EventCallback function to be called when the drawer is closing.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t@State() public state: DrawerStates = {\n\t\t_label: '', // ⚠ required\n\t\t_open: false,\n\t\t_align: 'left',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: OpenPropType) {\n\t\tif (typeof value === 'boolean') {\n\t\t\tvalidateOpen(this, value);\n\n\t\t\tif (this.dialogElement) {\n\t\t\t\t// handle property changes but not the initial validateOpen call\n\t\t\t\tvoid this.openOrCloseBasedOnState();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate async openOrCloseBasedOnState() {\n\t\tif (this.state._open) {\n\t\t\tawait this.open();\n\t\t} else {\n\t\t\tawait this.close();\n\t\t}\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriModalEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriModalEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function') {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriModalEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\tprivate handleCloseDialog() {\n\t\tthis.dialogElement?.close();\n\t\tthis._on?.onClose?.();\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\tprivate handleClose() {\n\t\tvoid (async () => {\n\t\t\tawait this.close();\n\t\t\tthis.handleCloseDialog();\n\t\t})();\n\t}\n\n\tprivate handleAnimationEnd(e: Event): void {\n\t\tconst animationEvent = e as AnimationEvent;\n\t\tif (animationEvent.animationName.includes('slideOut')) {\n\t\t\tthis.handleCloseDialog();\n\t\t}\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\tthis.dialogElement?.addEventListener('animationend', this.handleAnimationEnd.bind(this));\n\t\tthis.dialogElement?.addEventListener('close', this.handleClose.bind(this));\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.dialogElement?.removeEventListener('animationend', this.handleAnimationEnd.bind(this));\n\t\tthis.dialogElement?.removeEventListener('close', this.handleClose.bind(this));\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"names":[],"mappings":"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"}

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}from"./index-4c718166.js";import{v as i}from"./align-3f029493.js";import{b as o,s as a}from"./prop.validators-c5e6ad2d.js";import{v as s}from"./label-d70e7c34.js";import{v as l}from"./open-f7031548.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const r=(n,e)=>{o(n,"_modal",e)},d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .drawer__wrapper {\n    position: fixed;\n    width: auto;\n    overflow: auto;\n    background-color: white;\n  }\n  .drawer__wrapper--left {\n    top: 0;\n    left: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .drawer__wrapper--right {\n    top: 0;\n    right: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .drawer__wrapper--top {\n    left: 0;\n    top: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .drawer__wrapper--bottom {\n    left: 0;\n    bottom: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .drawer__content {\n    position: relative;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",h=d,c=class{constructor(e){n(this,e),this.getWrapperRef=n=>this.dialogWrapperElement=n,this.getRef=n=>this.dialogElement=n,this._open=void 0,this._align=void 0,this._label=void 0,this._modal=void 0,this._on=void 0,this.state={_label:"",_open:!1,_align:"left"}}async open(){var n,e;this.state=Object.assign(Object.assign({},this.state),{_open:!0}),this.state._modal?null===(n=this.dialogElement)||void 0===n||n.showModal():null===(e=this.dialogElement)||void 0===e||e.show()}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("div",{ref:this.getWrapperRef,class:`drawer__wrapper drawer__wrapper--${n} ${this.state._open?"drawer__wrapper--open":"is-closing"}`,"aria-label":this.state._label},e("div",{class:"drawer__content"},e("slot",null)))}render(){const n=this.state._modal;return e(t,{key:"0d09864696d1d178fbf93db7e5198147610afd1f",class:"kol-drawer drawer "+(n?"drawer--modal":""),ref:n=>this.hostElement=n},e("dialog",{key:"ed6d121734ab4f5a6ec5b8d7c8090509c7a94d80",class:"drawer__dialog",ref:this.getRef},this.renderDialogContent()))}validateLabel(n){s(this,n,{required:!0})}validateAlign(n){i(this,n)}validateModal(n){r(this,n)}async validateOpen(n){"boolean"==typeof n&&(l(this,n),n?await this.open():await this.close())}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"==typeof n.onClose&&(e.onClose=n.onClose),a(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)}handleClose(){}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))}async componentWillLoad(){this.validateLabel(this._label),await this.validateOpen(this._open),this.validateAlign(this._align),this.validateModal(this._modal),this.validateOn(this._on)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_modal:["validateModal"],_open:["validateOpen"],_on:["validateOn"]}}};c.style={default:h};export{c as kol_drawer};
+import{r as n,h as e,H as t,g as o}from"./index-DXabIfEM.js";import{c as i}from"./clsx-eK3rPvPS.js";import{g as a}from"./component-names-CkE54Ym7.js";import{s as r}from"./common-L1K0yh1S.js";import{v as l}from"./align-Bcqvz5vw.js";import{v as s}from"./has-closer-DENzUWH2.js";import{v as d}from"./label-ohY9ajP0.js";import{v as h}from"./open-BFQWty8w.js";import{d as c,K as p}from"./events-9-skLO0f.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}",b=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:"48deffbc981b1796cd881d8efe1e2410b39e08aa",class:"kol-drawer"},e("dialog",{key:"e63e6c9cb356b9ecb7a1ed87b5f82ef062335698","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"]}}};b.style={default:f};export{b as kol_drawer};

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

@@ -1 +1 @@
-{"version":3,"names":["validateModal","component","value","watchBoolean","defaultStyleCss","KolDrawerDefaultStyle0","KolDrawer","this","getWrapperRef","el","dialogWrapperElement","getRef","dialogElement","_label","_open","_align","open","state","Object","assign","_modal","_a","showModal","_b","show","close","wrapper","computedStyle","window","getComputedStyle","animationName","handleCloseDialog","renderDialogContent","align","h","ref","class","render","isModal","Host","key","hostElement","validateLabel","required","validateAlign","validateOpen","validateOn","callbacks","onClose","setState","_c","_on","call","handleClose","handleAnimationEnd","e","animationEvent","includes","componentDidLoad","addEventListener","bind","disconnectedCallback","removeEventListener","componentWillLoad"],"sources":["src/schema/props/modal.ts","src/components/drawer/style.scss?tag=kol-drawer&mode=default&encapsulation=shadow","src/components/drawer/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type ModalPropType = boolean;\n\n/**\n * Controls if a dialog is a modal.\n */\nexport type PropModal = {\n\tmodal: ModalPropType;\n};\n\n/* validator */\nexport const validateModal = (component: Generic.Element.Component, value?: ModalPropType): void => {\n\twatchBoolean(component, '_modal', value);\n};\n","@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.drawer {\n\t\t&__dialog {\n\t\t\tpadding: 0;\n\t\t\tborder: none;\n\t\t}\n\n\t\t&__wrapper {\n\t\t\tposition: fixed;\n\t\t\twidth: auto;\n\t\t\toverflow: auto;\n\t\t\tbackground-color: white;\n\n\t\t\t&--left {\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\theight: 100vh;\n\t\t\t\tmax-height: 100%;\n\t\t\t}\n\n\t\t\t&--right {\n\t\t\t\ttop: 0;\n\t\t\t\tright: 0;\n\t\t\t\theight: 100vh;\n\t\t\t\tmax-height: 100%;\n\t\t\t}\n\n\t\t\t&--top {\n\t\t\t\tleft: 0;\n\t\t\t\ttop: 0;\n\t\t\t\twidth: 100vw;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\n\t\t\t&--bottom {\n\t\t\t\tleft: 0;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100vw;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\n\t\t&__content {\n\t\t\tposition: relative;\n\t\t\tpadding: rem(16);\n\t\t}\n\t}\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport type { KoliBriModalEventCallbacks, LabelPropType, DrawerAPI, AlignPropType, OpenPropType, ModalPropType, DrawerStates } from '../../schema';\nimport { setState, validateLabel, validateOpen, validateAlign, validateModal } from '../../schema';\nimport { Component, Host, Method, Prop, State, Watch, h } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\n\n/**\n * @slot - The Content of drawer.\n */\n@Component({\n\ttag: 'kol-drawer',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDrawer implements DrawerAPI {\n\tpublic hostElement?: HTMLElement;\n\tprivate dialogElement?: HTMLDialogElement;\n\tprivate dialogWrapperElement?: HTMLDivElement;\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tasync open() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_open: true,\n\t\t};\n\t\tif (this.state._modal) {\n\t\t\tthis.dialogElement?.showModal();\n\t\t} else {\n\t\t\tthis.dialogElement?.show();\n\t\t}\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tasync close() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_open: false,\n\t\t};\n\t\tconst wrapper = this.dialogWrapperElement;\n\t\tif (!wrapper) return;\n\t\tconst computedStyle = window.getComputedStyle(wrapper);\n\t\tif (computedStyle.animationName === 'none') {\n\t\t\tthis.handleCloseDialog();\n\t\t}\n\t}\n\n\tprivate getWrapperRef = (el: HTMLDivElement | undefined) => (this.dialogWrapperElement = el as HTMLDivElement);\n\tprivate renderDialogContent() {\n\t\tconst align = this.state._align as string;\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={this.getWrapperRef}\n\t\t\t\tclass={`drawer__wrapper drawer__wrapper--${align} ${this.state._open ? 'drawer__wrapper--open' : 'is-closing'}`}\n\t\t\t\taria-label={this.state._label}\n\t\t\t>\n\t\t\t\t<div class=\"drawer__content\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate getRef = (el: HTMLDialogElement | undefined) => (this.dialogElement = el as HTMLDialogElement);\n\tpublic render(): JSX.Element {\n\t\tconst isModal = this.state._modal;\n\t\treturn (\n\t\t\t<Host class={`kol-drawer drawer ${isModal ? 'drawer--modal' : ''}`} ref={(el) => (this.hostElement = el as HTMLElement)}>\n\t\t\t\t<dialog class=\"drawer__dialog\" ref={this.getRef}>\n\t\t\t\t\t{this.renderDialogContent()}\n\t\t\t\t</dialog>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Specifies the default open state of the drawer.\n\t */\n\t@Prop() public _open?: OpenPropType;\n\n\t/**\n\t * Specifies the orientation of the drawer.\n\t */\n\t@Prop() public _align?: AlignPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Indicates whether the drawer is a modal.\n\t */\n\t@Prop() public _modal?: ModalPropType;\n\n\t/**\n\t * Specifies the EventCallback function to be called when the drawer is closing.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t@State() public state: DrawerStates = {\n\t\t_label: '', // ⚠ required\n\t\t_open: false,\n\t\t_align: 'left',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_modal')\n\tpublic validateModal(value?: ModalPropType): void {\n\t\tvalidateModal(this, value);\n\t}\n\n\t@Watch('_open')\n\tpublic async validateOpen(value?: OpenPropType): Promise<void> {\n\t\tif (typeof value === 'boolean') {\n\t\t\tvalidateOpen(this, value);\n\t\t\tvalue ? await this.open() : await this.close();\n\t\t}\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriModalEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriModalEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function') {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriModalEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\tprivate handleCloseDialog() {\n\t\tthis.dialogElement?.close();\n\t\tthis._on?.onClose?.();\n\t}\n\n\tprivate handleClose(): void {\n\t\tasync () => {\n\t\t\tawait this.close();\n\t\t\tthis.handleCloseDialog();\n\t\t};\n\t}\n\n\tprivate handleAnimationEnd(e: Event): void {\n\t\tconst animationEvent = e as AnimationEvent;\n\t\tif (animationEvent.animationName.includes('slideOut')) {\n\t\t\tthis.handleCloseDialog();\n\t\t}\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\tthis.dialogElement?.addEventListener('animationend', this.handleAnimationEnd.bind(this));\n\t\tthis.dialogElement?.addEventListener('close', this.handleClose.bind(this));\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.dialogElement?.removeEventListener('animationend', this.handleAnimationEnd.bind(this));\n\t\tthis.dialogElement?.removeEventListener('close', this.handleClose.bind(this));\n\t}\n\n\tpublic async componentWillLoad(): Promise<void> {\n\t\tthis.validateLabel(this._label);\n\t\tawait this.validateOpen(this._open);\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateModal(this._modal);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["registerInstance","h","Host","getElement","clsx","KolCardWcTag","setState","validateAlign","validateHasCloser","validateLabel","validateOpen","dispatchDomEvent","KolEvent","handleCancelOverlay","defaultStyleCss","KolDrawer","constructor","hostRef","this","getWrapperRef","el","dialogWrapperElement","getRef","dialogElement","setTimeout","openOrCloseBasedOnState","_hasCloser","state","_label","_open","_align","open","_a","Object","assign","showModal","close","wrapper","computedStyle","window","getComputedStyle","animationName","handleCloseDialog","renderDialogContent","align","ref","class","_on","onClose","render","key","onCancel","value","required","validateOn","callbacks","_b","_c","call","host","handleClose","handleAnimationEnd","e","animationEvent","includes","componentDidLoad","addEventListener","bind","disconnectedCallback","removeEventListener","componentWillLoad","watchers","style","default"],"sources":["0"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +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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"}