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

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as o,g as t}from"./index-BPtT34o3.js";import{b as i,e as l,g as r}from"./common-5ExJH6NU.js";import{t as a}from"./i18n-CSCkYcOW.js";import{d as s}from"./component-names-pgL1e5No.js";import{K as c}from"./Alert-BCOTrqr_.js";import{d,K as h}from"./events-DHTi_wtD.js";import"./i18n-B2d_exHc.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-COFh-Vc8.js";import"./bem-registry-DTQ0cuzY.js";import"./component-CL5w48zL.js";import"./Heading-CdhA3sYv.js";const f=(n,e)=>{i(n,"errorList",n=>Array.isArray(n)&&void 0===n.find(n=>!("string"==typeof n||"function"==typeof n)),new Set(["string","function"]),e)},m='@charset "UTF-8";\n/* 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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1774956515321"); /* IE9*/\n  src: url("kolicons.eot?t=1774956515321#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1774956515321") format("woff2"), url("kolicons.woff?t=1774956515321") format("woff"), url("kolicons.ttf?t=1774956515321") format("truetype"), url("kolicons.svg?t=1774956515321#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\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-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n  }\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}',p=class{constructor(e){n(this,e),this.translateErrorListMessage=a("kol-error-list-message"),this.translateErrorList=a("kol-error-list"),this.translateFormDescription=a("kol-form-description"),this.onSubmit=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onSubmit)&&(null===(t=this.state._on)||void 0===t||t.onSubmit(n)),this.host&&d(this.host,h.submit)},this.onReset=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onReset)&&(null===(t=this.state._on)||void 0===t||t.onReset(n)),this.host&&d(this.host,h.reset)},this.handleLinkClick=n=>{const e=document.querySelector(n);e&&"function"==typeof e.focus&&(e.scrollIntoView({behavior:"smooth"}),e.focus())},this.setBlockElement=n=>this.errorListBlock=n,this.setFirstLinkElement=n=>this.errorListFirstLink=n,this._requiredText=!0,this.state={}}renderErrorList(n){return e(c,{class:"kol-form__alert",ref:this.setBlockElement,type:"error",variant:"card",label:this.translateErrorListMessage},e("nav",{"aria-label":this.translateErrorList},e("ul",null,null==n?void 0:n.map((n,t)=>e("li",{key:t},e(s,{class:"kol-form__link",_href:"",_label:n.message,_on:{onClick:"string"==typeof n.selector?()=>this.handleLinkClick(String(n.selector)):n.selector},ref:0===t?this.setFirstLinkElement:void 0}))))))}renderFormElement(){return e("form",{class:"kol-form",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,noValidate:!0},!0===this.state._requiredText?e("p",null,e("div",{class:"kol-form__mandatory-fields-hint"},this.translateFormDescription)):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?e("p",null,e("div",{class:"kol-form__mandatory-fields-hint"},this.state._requiredText)):null,e("slot",null))}render(){const n=Array.isArray(this._errorList)&&this._errorList.length>0;return e(o,{key:"10b2859942b9091d12299546b72f97dfb28573c0"},n&&this.renderErrorList(this._errorList),this.renderFormElement())}scrollToErrorList(){var n;null===(n=this.errorListBlock)||void 0===n||n.scrollIntoView({behavior:"smooth",block:"start"}),setTimeout(()=>{var n,e;null===(e=null===(n=this.errorListFirstLink)||void 0===n?void 0:n.querySelector("a"))||void 0===e||e.focus()},250)}async focusErrorList(){return this.scrollToErrorList(),Promise.resolve()}validateOn(n){"object"==typeof n&&null!==n&&(this.state=Object.assign(Object.assign({},this.state),{_on:n}))}validateRequiredText(n){"boolean"==typeof n?l(this,"_requiredText",n):r(this,"_requiredText",n)}validateErrorList(n){f(this,n)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}get host(){return t(this)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}};p.style={default:m};export{p as kol_form};
+import{r as n,h as e,H as t,g as o}from"./index-C8rYknb2.js";import{b as i,e as l,g as r}from"./common-BqV6Zb30.js";import{t as a}from"./i18n-BVaUp6qp.js";import{c as s}from"./component-names-Dy77vq43.js";import{K as c}from"./Alert-Dwi0SIbu.js";import{d,K as h}from"./events-DHTi_wtD.js";import"./i18n-B2d_exHc.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-COFh-Vc8.js";import"./bem-registry-Bux_TllX.js";import"./component-C5-fCuhA.js";import"./Heading-hNm0EJy2.js";const f=(n,e)=>{i(n,"errorList",n=>Array.isArray(n)&&void 0===n.find(n=>!("string"==typeof n||"function"==typeof n)),new Set(["string","function"]),e)},m='@charset "UTF-8";\n/* 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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775118370120"); /* IE9*/\n  src: url("kolicons.eot?t=1775118370120#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775118370120") format("woff2"), url("kolicons.woff?t=1775118370120") format("woff"), url("kolicons.ttf?t=1775118370120") format("truetype"), url("kolicons.svg?t=1775118370120#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\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-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n  }\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}',p=class{constructor(e){n(this,e),this.translateErrorListMessage=a("kol-error-list-message"),this.translateErrorList=a("kol-error-list"),this.translateFormDescription=a("kol-form-description"),this.onSubmit=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onSubmit)&&(null===(t=this.state._on)||void 0===t||t.onSubmit(n)),this.host&&d(this.host,h.submit)},this.onReset=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onReset)&&(null===(t=this.state._on)||void 0===t||t.onReset(n)),this.host&&d(this.host,h.reset)},this.handleLinkClick=n=>{const e=document.querySelector(n);e&&"function"==typeof e.focus&&(e.scrollIntoView({behavior:"smooth"}),e.focus())},this.setBlockElement=n=>this.errorListBlock=n,this.setFirstLinkElement=n=>this.errorListFirstLink=n,this._requiredText=!0,this.state={}}renderErrorList(n){return e(c,{class:"kol-form__alert",ref:this.setBlockElement,type:"error",variant:"card",label:this.translateErrorListMessage},e("nav",{"aria-label":this.translateErrorList},e("ul",null,null==n?void 0:n.map((n,t)=>e("li",{key:t},e(s,{class:"kol-form__link",_href:"",_label:n.message,_on:{onClick:"string"==typeof n.selector?()=>this.handleLinkClick(String(n.selector)):n.selector},ref:0===t?this.setFirstLinkElement:void 0}))))))}renderFormElement(){return e("form",{class:"kol-form",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,noValidate:!0},!0===this.state._requiredText?e("p",null,e("div",{class:"kol-form__mandatory-fields-hint"},this.translateFormDescription)):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?e("p",null,e("div",{class:"kol-form__mandatory-fields-hint"},this.state._requiredText)):null,e("slot",null))}render(){const n=Array.isArray(this._errorList)&&this._errorList.length>0;return e(t,{key:"7b951c4f6fd030191546f23c0e31e85bdac6df77"},n&&this.renderErrorList(this._errorList),this.renderFormElement())}scrollToErrorList(){var n;null===(n=this.errorListBlock)||void 0===n||n.scrollIntoView({behavior:"smooth",block:"start"}),setTimeout(()=>{var n,e;null===(e=null===(n=this.errorListFirstLink)||void 0===n?void 0:n.querySelector("a"))||void 0===e||e.focus()},250)}async focusErrorList(){return this.scrollToErrorList(),Promise.resolve()}validateOn(n){"object"==typeof n&&null!==n&&(this.state=Object.assign(Object.assign({},this.state),{_on:n}))}validateRequiredText(n){"boolean"==typeof n?l(this,"_requiredText",n):r(this,"_requiredText",n)}validateErrorList(n){f(this,n)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}get host(){return o(this)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}};p.style={default:m};export{p as kol_form};

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

@@ -1 +1 @@
-{"version":3,"file":"kol-heading.entry.esm.js","sources":["src/internal/props/label-with-expert-slot.ts","src/internal/props/secondary-headline.ts","src/internal/functional-components/heading/component.tsx","src/internal/functional-components/heading/api.tsx","src/internal/functional-components/heading/controller.ts","src/components/heading/style.scss?tag=kol-heading&mode=default&encapsulation=shadow","src/components/heading/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type LabelWithExpertSlotProp = SimpleProp<'label', string>;\nexport const labelWithExpertSlotProp = createPropDefinition<LabelWithExpertSlotProp>('label', '', normalizeString);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type SecondaryHeadlineProp = SimpleProp<'secondaryHeadline', string>;\nexport const secondaryHeadlineProp = createPropDefinition<SecondaryHeadlineProp>('secondaryHeadline', '', normalizeString);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport clsx from '../../../utils/clsx';\nimport type { HeadingLevel } from '../../props';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { HeadingApi } from './api';\n\ntype HeadlineTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'strong';\n\nfunction getHeadlineTag(level: HeadingLevel | number): HeadlineTag {\n\treturn level >= 1 && level <= 6 ? (`h${level}` as HeadlineTag) : 'strong';\n}\n\nexport const HeadingFC: FC<FunctionalComponentProps<HeadingApi>> = (props) => {\n\tconst { label, level, secondaryHeadline } = props;\n\tconst HeadlineTag = getHeadlineTag(level);\n\n\tif (!secondaryHeadline) {\n\t\treturn (\n\t\t\t<HeadlineTag class={clsx('kol-headline', `kol-headline--${HeadlineTag}`, 'kol-headline--single')}>\n\t\t\t\t{label}\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</HeadlineTag>\n\t\t);\n\t}\n\n\treturn (\n\t\t<hgroup class=\"kol-heading-group\">\n\t\t\t<HeadlineTag class={clsx('kol-headline', `kol-headline--${HeadlineTag}`, 'kol-headline--group', 'kol-headline--primary')}>\n\t\t\t\t{label}\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</HeadlineTag>\n\t\t\t<p class=\"kol-headline kol-headline--group kol-headline--secondary\">{secondaryHeadline}</p>\n\t\t</hgroup>\n\t);\n};\n","import { labelWithExpertSlotProp, levelProp, secondaryHeadlineProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const headingPropsConfig = {\n\toptional: [levelProp, secondaryHeadlineProp],\n\trequired: [labelWithExpertSlotProp],\n} as const satisfies PropsConfigShape;\n\nexport type HeadingApi = ApiFromConfig<typeof headingPropsConfig>;\n","import { labelWithExpertSlotProp, levelProp, secondaryHeadlineProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';\nimport type { HeadingApi } from './api';\nimport { headingPropsConfig } from './api';\n\nexport class HeadingController extends BaseController<HeadingApi> implements ControllerInterface<HeadingApi> {\n\tpublic constructor(setState: SetStateFn<HeadingApi>, getState: GetStateFn<HeadingApi>) {\n\t\tsuper(headingPropsConfig, setState, getState);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<HeadingApi>): void {\n\t\tconst { label, level, secondaryHeadline } = props;\n\t\tthis.watchLabel(label);\n\t\tthis.watchLevel(level);\n\t\tthis.watchSecondaryHeadline(secondaryHeadline);\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelWithExpertSlotProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n\n\tpublic watchLevel(value?: number): void {\n\t\tlevelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('level', v);\n\t\t});\n\t}\n\n\tpublic watchSecondaryHeadline(value?: string): void {\n\t\tsecondaryHeadlineProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('secondaryHeadline', v);\n\t\t});\n\t}\n}\n","@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-headline {\n\t\t&--secondary {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\n\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { HeadingApi } from '../../internal/functional-components/heading/api';\nimport { HeadingFC } from '../../internal/functional-components/heading/component';\nimport { HeadingController } from '../../internal/functional-components/heading/controller';\nimport type { HeadingLevel, LabelWithExpertSlotPropType } from '../../schema';\n\n/**\n *\n * @slot - Inhalt der Überschrift.\n */\n@Component({\n\ttag: 'kol-heading',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolHeading extends BaseWebComponent<HeadingApi> implements WebComponentInterface<HeadingApi> {\n\tprivate readonly ctrl: HeadingController = new HeadingController(this.setState, this.getState);\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@Watch('_label')\n\tpublic watchLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\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@Watch('_level')\n\tpublic watchLevel(value?: HeadingLevel): void {\n\t\tthis.ctrl.watchLevel(value);\n\t}\n\n\t/**\n\t * Defines the text of the secondary headline.\n\t */\n\t@Prop() public _secondaryHeadline?: string;\n\n\t@Watch('_secondaryHeadline')\n\tpublic watchSecondaryHeadline(value?: string): void {\n\t\tthis.ctrl.watchSecondaryHeadline(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tlabel: this._label,\n\t\t\tlevel: this._level,\n\t\t\tsecondaryHeadline: this._secondaryHeadline,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<HeadingFC\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tlevel={this.ctrl.getRenderProp('level')}\n\t\t\t\t\tsecondaryHeadline={this.ctrl.getRenderProp('secondaryHeadline')}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kol-heading.entry.esm.js","sources":["src/internal/props/label-with-expert-slot.ts","src/internal/props/secondary-headline.ts","src/internal/functional-components/heading/component.tsx","src/internal/functional-components/heading/api.tsx","src/internal/functional-components/heading/controller.ts","src/components/heading/style.scss?tag=kol-heading&mode=default&encapsulation=shadow","src/components/heading/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type LabelWithExpertSlotProp = SimpleProp<'label', string>;\nexport const labelWithExpertSlotProp = createPropDefinition<LabelWithExpertSlotProp>('label', '', normalizeString);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type SecondaryHeadlineProp = SimpleProp<'secondaryHeadline', string>;\nexport const secondaryHeadlineProp = createPropDefinition<SecondaryHeadlineProp>('secondaryHeadline', '', normalizeString);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport clsx from '../../../utils/clsx';\nimport type { HeadingLevel } from '../../props';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { HeadingApi } from './api';\n\ntype HeadlineTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'strong';\n\nfunction getHeadlineTag(level: HeadingLevel | number): HeadlineTag {\n\treturn level >= 1 && level <= 6 ? (`h${level}` as HeadlineTag) : 'strong';\n}\n\nexport const HeadingFC: FC<FunctionalComponentProps<HeadingApi>> = (props) => {\n\tconst { label, level, secondaryHeadline } = props;\n\tconst HeadlineTag = getHeadlineTag(level);\n\n\tif (!secondaryHeadline) {\n\t\treturn (\n\t\t\t<HeadlineTag class={clsx('kol-headline', `kol-headline--${HeadlineTag}`, 'kol-headline--single')}>\n\t\t\t\t{label}\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</HeadlineTag>\n\t\t);\n\t}\n\n\treturn (\n\t\t<hgroup class=\"kol-heading-group\">\n\t\t\t<HeadlineTag class={clsx('kol-headline', `kol-headline--${HeadlineTag}`, 'kol-headline--group', 'kol-headline--primary')}>\n\t\t\t\t{label}\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</HeadlineTag>\n\t\t\t<p class=\"kol-headline kol-headline--group kol-headline--secondary\">{secondaryHeadline}</p>\n\t\t</hgroup>\n\t);\n};\n","import { labelWithExpertSlotProp, levelProp, secondaryHeadlineProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const headingPropsConfig = {\n\toptional: [levelProp, secondaryHeadlineProp],\n\trequired: [labelWithExpertSlotProp],\n} as const satisfies PropsConfigShape;\n\nexport type HeadingApi = ApiFromConfig<typeof headingPropsConfig>;\n","import { labelWithExpertSlotProp, levelProp, secondaryHeadlineProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { HeadingApi } from './api';\nimport { headingPropsConfig } from './api';\n\nexport class HeadingController extends BaseController<HeadingApi> implements ControllerInterface<HeadingApi> {\n\tpublic constructor(stateAccess: StateAccess<HeadingApi>) {\n\t\tsuper(stateAccess, headingPropsConfig);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<HeadingApi>): void {\n\t\tconst { label, level, secondaryHeadline } = props;\n\t\tthis.watchLabel(label);\n\t\tthis.watchLevel(level);\n\t\tthis.watchSecondaryHeadline(secondaryHeadline);\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelWithExpertSlotProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n\n\tpublic watchLevel(value?: number): void {\n\t\tlevelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('level', v);\n\t\t});\n\t}\n\n\tpublic watchSecondaryHeadline(value?: string): void {\n\t\tsecondaryHeadlineProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('secondaryHeadline', v);\n\t\t});\n\t}\n}\n","@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-headline {\n\t\t&--secondary {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\n\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { HeadingApi } from '../../internal/functional-components/heading/api';\nimport { HeadingFC } from '../../internal/functional-components/heading/component';\nimport { HeadingController } from '../../internal/functional-components/heading/controller';\nimport type { HeadingLevel, LabelWithExpertSlotPropType } from '../../schema';\n\n/**\n *\n * @slot - Inhalt der Überschrift.\n */\n@Component({\n\ttag: 'kol-heading',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolHeading implements WebComponentInterface<HeadingApi> {\n\tprivate readonly ctrl = new HeadingController(BaseWebComponent.stateLess);\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@Watch('_label')\n\tpublic watchLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\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@Watch('_level')\n\tpublic watchLevel(value?: HeadingLevel): void {\n\t\tthis.ctrl.watchLevel(value);\n\t}\n\n\t/**\n\t * Defines the text of the secondary headline.\n\t */\n\t@Prop() public _secondaryHeadline?: string;\n\n\t@Watch('_secondaryHeadline')\n\tpublic watchSecondaryHeadline(value?: string): void {\n\t\tthis.ctrl.watchSecondaryHeadline(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tlabel: this._label,\n\t\t\tlevel: this._level,\n\t\t\tsecondaryHeadline: this._secondaryHeadline,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<HeadingFC\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tlevel={this.ctrl.getRenderProp('level')}\n\t\t\t\t\tsecondaryHeadline={this.ctrl.getRenderProp('secondaryHeadline')}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as n,r as e,H as t}from"./index-BPtT34o3.js";import{B as o,a as i}from"./base-web-component-BnYjYRBQ.js";import{c as l}from"./clsx-COFh-Vc8.js";import"./common-5ExJH6NU.js";import{l as a}from"./level-BxYUNJ1-.js";import{c as s,n as r}from"./normalizers-KEHwXLG5.js";import"./_Uint8Array-UP73qmmG.js";import"./isArray-CcrBs4JM.js";import"./isObject-BJgq02Md.js";const d=s("label","",r),h=s("secondaryHeadline","",r);function c(e){return e>=1&&e<=6?`h${e}`:"strong"}const p=e=>{const{label:t,level:o,secondaryHeadline:i}=e,a=c(o);return i?n("hgroup",{class:"kol-heading-group"},n(a,{class:l("kol-headline",`kol-headline--${a}`,"kol-headline--group","kol-headline--primary")},t,n("slot",{name:"expert",slot:"expert"})),n("p",{class:"kol-headline kol-headline--group kol-headline--secondary"},i)):n(a,{class:l("kol-headline",`kol-headline--${a}`,"kol-headline--single")},t,n("slot",{name:"expert",slot:"expert"}))},m={optional:[a,h],required:[d]};class b extends o{constructor(e,n){super(m,e,n)}componentWillLoad(e){const{label:n,level:t,secondaryHeadline:o}=e;this.watchLabel(n),this.watchLevel(t),this.watchSecondaryHeadline(o)}watchLabel(e){d.apply(e,e=>{this.setRenderProp("label",e)})}watchLevel(e){a.apply(e,e=>{this.setRenderProp("level",e)})}watchSecondaryHeadline(e){h.apply(e,e=>{this.setRenderProp("secondaryHeadline",e)})}}const u="/*\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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-headline--secondary {\n    margin: 0;\n  }\n}",f=class extends i{constructor(n){super(),e(this,n),this.ctrl=new b(this.setState,this.getState),this._level=0}watchLabel(e){this.ctrl.watchLabel(e)}watchLevel(e){this.ctrl.watchLevel(e)}watchSecondaryHeadline(e){this.ctrl.watchSecondaryHeadline(e)}componentWillLoad(){this.ctrl.componentWillLoad({label:this._label,level:this._level,secondaryHeadline:this._secondaryHeadline})}render(){return n(t,{key:"4658c454a187944eb4ed83888eb2b22f5391f8cc"},n(p,{key:"47d57bcfb79c15dd67eba92a76983a9b847d14e0",label:this.ctrl.getRenderProp("label"),level:this.ctrl.getRenderProp("level"),secondaryHeadline:this.ctrl.getRenderProp("secondaryHeadline")}))}static get watchers(){return{_label:["watchLabel"],_level:["watchLevel"],_secondaryHeadline:["watchSecondaryHeadline"]}}};f.style={default:u};export{f as kol_heading};
+import{h as n,r as e,H as t}from"./index-C8rYknb2.js";import{B as o}from"./variant-quote-CHD0qMkY.js";import{c as i}from"./clsx-COFh-Vc8.js";import"./common-BqV6Zb30.js";import{l}from"./level-Bwrb_jzT.js";import{c as a,n as s}from"./normalizers-DnkJhVYZ.js";import{B as r}from"./base-controller-CXhqh4cR.js";import"./_Uint8Array-kJHDjtoP.js";import"./isArray-CcrBs4JM.js";const d=a("label","",s),h=a("secondaryHeadline","",s);function c(e){return e>=1&&e<=6?`h${e}`:"strong"}const p=e=>{const{label:t,level:o,secondaryHeadline:l}=e,a=c(o);return l?n("hgroup",{class:"kol-heading-group"},n(a,{class:i("kol-headline",`kol-headline--${a}`,"kol-headline--group","kol-headline--primary")},t,n("slot",{name:"expert",slot:"expert"})),n("p",{class:"kol-headline kol-headline--group kol-headline--secondary"},l)):n(a,{class:i("kol-headline",`kol-headline--${a}`,"kol-headline--single")},t,n("slot",{name:"expert",slot:"expert"}))},m={optional:[l,h],required:[d]};class b extends r{constructor(e){super(e,m)}componentWillLoad(e){const{label:n,level:t,secondaryHeadline:o}=e;this.watchLabel(n),this.watchLevel(t),this.watchSecondaryHeadline(o)}watchLabel(e){d.apply(e,e=>{this.setRenderProp("label",e)})}watchLevel(e){l.apply(e,e=>{this.setRenderProp("level",e)})}watchSecondaryHeadline(e){h.apply(e,e=>{this.setRenderProp("secondaryHeadline",e)})}}const u="/*\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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-headline--secondary {\n    margin: 0;\n  }\n}",f=class{constructor(n){e(this,n),this.ctrl=new b(o.stateLess),this._level=0}watchLabel(e){this.ctrl.watchLabel(e)}watchLevel(e){this.ctrl.watchLevel(e)}watchSecondaryHeadline(e){this.ctrl.watchSecondaryHeadline(e)}componentWillLoad(){this.ctrl.componentWillLoad({label:this._label,level:this._level,secondaryHeadline:this._secondaryHeadline})}render(){return n(t,{key:"5d87ccb29dc05fdbd165bf482d18e80fbaa62b7d"},n(p,{key:"3d4d078165c93bc620c850644b4fcced6e4390ca",label:this.ctrl.getRenderProp("label"),level:this.ctrl.getRenderProp("level"),secondaryHeadline:this.ctrl.getRenderProp("secondaryHeadline")}))}static get watchers(){return{_label:["watchLabel"],_level:["watchLevel"],_secondaryHeadline:["watchSecondaryHeadline"]}}};f.style={default:u};export{f as kol_heading};

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

@@ -1 +1 @@
-{"version":3,"names":["h","registerInstance","Host","BaseController","BaseWebComponent","clsx","levelProp","createPropDefinition","normalizeString","labelWithExpertSlotProp","secondaryHeadlineProp","getHeadlineTag","level","HeadingFC","props","label","secondaryHeadline","HeadlineTag","class","name","slot","headingPropsConfig","optional","required","HeadingController","constructor","setState","getState","super","componentWillLoad","this","watchLabel","watchLevel","watchSecondaryHeadline","value","apply","v","setRenderProp","defaultStyleCss","KolHeading","hostRef","ctrl","_level","_label","_secondaryHeadline","render","key","getRenderProp","watchers","style","default"],"sources":["0"],"mappings":";;;YAGSA,OAAQC,OAAuBC,MAAY,kCACtCC,OAAqBC,MAAwB,+CAC7CC,MAAY,2BACnB,mCACOC,MAAiB,kCACjBC,OAA2BC,MAAuB,kCACzD,kCACA,8BACA,yBAEP,MAAMC,EAA0BF,EAAqB,QAAS,GAAIC,GAElE,MAAME,EAAwBH,EAAqB,oBAAqB,GAAIC,GAE5E,SAASG,EAAeC,GACpB,OAAOA,GAAS,GAAKA,GAAS,EAAI,IAAIA,IAAU,QACpD,CACA,MAAMC,EAAaC,IACf,MAAMC,MAAEA,EAAKH,MAAEA,EAAKI,kBAAEA,GAAsBF,EAC5C,MAAMG,EAAcN,EAAeC,GACnC,IAAKI,EAAmB,CACpB,OAAQhB,EAAEiB,EAAa,CAAEC,MAAOb,EAAK,eAAgB,iBAAiBY,IAAe,yBAA2BF,EAAOf,EAAE,OAAQ,CAAEmB,KAAM,SAAUC,KAAM,WAC7J,CACA,OAAQpB,EAAE,SAAU,CAAEkB,MAAO,qBAAuBlB,EAAEiB,EAAa,CAAEC,MAAOb,EAAK,eAAgB,iBAAiBY,IAAe,sBAAuB,0BAA4BF,EAAOf,EAAE,OAAQ,CAAEmB,KAAM,SAAUC,KAAM,YAAcpB,EAAE,IAAK,CAAEkB,MAAO,4DAA8DF,GAAoB,EAGjV,MAAMK,EAAqB,CACvBC,SAAU,CAAChB,EAAWI,GACtBa,SAAU,CAACd,IAGf,MAAMe,UAA0BrB,EAC5B,WAAAsB,CAAYC,EAAUC,GAClBC,MAAMP,EAAoBK,EAAUC,EACxC,CACA,iBAAAE,CAAkBf,GACd,MAAMC,MAAEA,EAAKH,MAAEA,EAAKI,kBAAEA,GAAsBF,EAC5CgB,KAAKC,WAAWhB,GAChBe,KAAKE,WAAWpB,GAChBkB,KAAKG,uBAAuBjB,EAChC,CACA,UAAAe,CAAWG,GACPzB,EAAwB0B,MAAMD,GAAQE,IAClCN,KAAKO,cAAc,QAASD,EAAE,GAEtC,CACA,UAAAJ,CAAWE,GACP5B,EAAU6B,MAAMD,GAAQE,IACpBN,KAAKO,cAAc,QAASD,EAAE,GAEtC,CACA,sBAAAH,CAAuBC,GACnBxB,EAAsByB,MAAMD,GAAQE,IAChCN,KAAKO,cAAc,oBAAqBD,EAAE,GAElD,EAGJ,MAAME,EAAkB,60KAExB,MAAMC,EAAa,cAAcnC,EAC7B,WAAAqB,CAAYe,GACRZ,QACA3B,EAAiB6B,KAAMU,GACvBV,KAAKW,KAAO,IAAIjB,EAAkBM,KAAKJ,SAAUI,KAAKH,UACtDG,KAAKY,OAAS,CAClB,CACA,UAAAX,CAAWG,GACPJ,KAAKW,KAAKV,WAAWG,EACzB,CACA,UAAAF,CAAWE,GACPJ,KAAKW,KAAKT,WAAWE,EACzB,CACA,sBAAAD,CAAuBC,GACnBJ,KAAKW,KAAKR,uBAAuBC,EACrC,CACA,iBAAAL,GACIC,KAAKW,KAAKZ,kBAAkB,CACxBd,MAAOe,KAAKa,OACZ/B,MAAOkB,KAAKY,OACZ1B,kBAAmBc,KAAKc,oBAEhC,CACA,MAAAC,GACI,OAAQ7C,EAAEE,EAAM,CAAE4C,IAAK,4CAA8C9C,EAAEa,EAAW,CAAEiC,IAAK,2CAA4C/B,MAAOe,KAAKW,KAAKM,cAAc,SAAUnC,MAAOkB,KAAKW,KAAKM,cAAc,SAAU/B,kBAAmBc,KAAKW,KAAKM,cAAc,uBACtQ,CACA,mBAAWC,GAAa,MAAO,CAC3BL,OAAU,CAAC,cACXD,OAAU,CAAC,cACXE,mBAAsB,CAAC,0BACxB,GAEPL,EAAWU,MAAQ,CACfC,QAASZ,UAGJC","ignoreList":[]}
+{"version":3,"names":["h","registerInstance","Host","BaseWebComponent","clsx","levelProp","createPropDefinition","normalizeString","BaseController","labelWithExpertSlotProp","secondaryHeadlineProp","getHeadlineTag","level","HeadingFC","props","label","secondaryHeadline","HeadlineTag","class","name","slot","headingPropsConfig","optional","required","HeadingController","constructor","stateAccess","super","componentWillLoad","this","watchLabel","watchLevel","watchSecondaryHeadline","value","apply","v","setRenderProp","defaultStyleCss","KolHeading","hostRef","ctrl","stateLess","_level","_label","_secondaryHeadline","render","key","getRenderProp","watchers","style","default"],"sources":["0"],"mappings":";;;YAGSA,OAAQC,OAAuBC,MAAY,kCACtCC,MAAwB,0CACxBC,MAAY,2BACnB,8BACOC,MAAiB,kCACjBC,OAA2BC,MAAuB,wCAClDC,MAAsB,sCAC7B,kCACA,wBAEP,MAAMC,EAA0BH,EAAqB,QAAS,GAAIC,GAElE,MAAMG,EAAwBJ,EAAqB,oBAAqB,GAAIC,GAE5E,SAASI,EAAeC,GACpB,OAAOA,GAAS,GAAKA,GAAS,EAAI,IAAIA,IAAU,QACpD,CACA,MAAMC,EAAaC,IACf,MAAMC,MAAEA,EAAKH,MAAEA,EAAKI,kBAAEA,GAAsBF,EAC5C,MAAMG,EAAcN,EAAeC,GACnC,IAAKI,EAAmB,CACpB,OAAQhB,EAAEiB,EAAa,CAAEC,MAAOd,EAAK,eAAgB,iBAAiBa,IAAe,yBAA2BF,EAAOf,EAAE,OAAQ,CAAEmB,KAAM,SAAUC,KAAM,WAC7J,CACA,OAAQpB,EAAE,SAAU,CAAEkB,MAAO,qBAAuBlB,EAAEiB,EAAa,CAAEC,MAAOd,EAAK,eAAgB,iBAAiBa,IAAe,sBAAuB,0BAA4BF,EAAOf,EAAE,OAAQ,CAAEmB,KAAM,SAAUC,KAAM,YAAcpB,EAAE,IAAK,CAAEkB,MAAO,4DAA8DF,GAAoB,EAGjV,MAAMK,EAAqB,CACvBC,SAAU,CAACjB,EAAWK,GACtBa,SAAU,CAACd,IAGf,MAAMe,UAA0BhB,EAC5B,WAAAiB,CAAYC,GACRC,MAAMD,EAAaL,EACvB,CACA,iBAAAO,CAAkBd,GACd,MAAMC,MAAEA,EAAKH,MAAEA,EAAKI,kBAAEA,GAAsBF,EAC5Ce,KAAKC,WAAWf,GAChBc,KAAKE,WAAWnB,GAChBiB,KAAKG,uBAAuBhB,EAChC,CACA,UAAAc,CAAWG,GACPxB,EAAwByB,MAAMD,GAAQE,IAClCN,KAAKO,cAAc,QAASD,EAAE,GAEtC,CACA,UAAAJ,CAAWE,GACP5B,EAAU6B,MAAMD,GAAQE,IACpBN,KAAKO,cAAc,QAASD,EAAE,GAEtC,CACA,sBAAAH,CAAuBC,GACnBvB,EAAsBwB,MAAMD,GAAQE,IAChCN,KAAKO,cAAc,oBAAqBD,EAAE,GAElD,EAGJ,MAAME,EAAkB,60KAExB,MAAMC,EAAa,MACf,WAAAb,CAAYc,GACRtC,EAAiB4B,KAAMU,GACvBV,KAAKW,KAAO,IAAIhB,EAAkBrB,EAAiBsC,WACnDZ,KAAKa,OAAS,CAClB,CACA,UAAAZ,CAAWG,GACPJ,KAAKW,KAAKV,WAAWG,EACzB,CACA,UAAAF,CAAWE,GACPJ,KAAKW,KAAKT,WAAWE,EACzB,CACA,sBAAAD,CAAuBC,GACnBJ,KAAKW,KAAKR,uBAAuBC,EACrC,CACA,iBAAAL,GACIC,KAAKW,KAAKZ,kBAAkB,CACxBb,MAAOc,KAAKc,OACZ/B,MAAOiB,KAAKa,OACZ1B,kBAAmBa,KAAKe,oBAEhC,CACA,MAAAC,GACI,OAAQ7C,EAAEE,EAAM,CAAE4C,IAAK,4CAA8C9C,EAAEa,EAAW,CAAEiC,IAAK,2CAA4C/B,MAAOc,KAAKW,KAAKO,cAAc,SAAUnC,MAAOiB,KAAKW,KAAKO,cAAc,SAAU/B,kBAAmBa,KAAKW,KAAKO,cAAc,uBACtQ,CACA,mBAAWC,GAAa,MAAO,CAC3BL,OAAU,CAAC,cACXD,OAAU,CAAC,cACXE,mBAAsB,CAAC,0BACxB,GAEPN,EAAWW,MAAQ,CACfC,QAASb,UAGJC","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"kol-icon.entry.esm.js","sources":["src/internal/props/icons.ts","src/internal/functional-components/icon/api.tsx","src/internal/functional-components/icon/controller.ts","src/components/icon/style.scss?tag=kol-icon&mode=default&encapsulation=shadow","src/components/icon/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Icons prop for icon class names\n *\n * Description:\n * Specifies the icon(s) to display via CSS class names (e.g., icon fonts). Icons are\n * visual indicators that supplement or replace text content.\n *\n * Usage (according to WCAG 2.1 and WAI-ARIA):\n * - Decorative icons: Must be hidden from assistive technologies (aria-hidden=\"true\")\n * - Informative icons: Must have a text alternative (WCAG 1.1.1 Non-text Content)\n *   - Use the label prop or aria-label to provide an accessible name\n * - Icons must not be the sole means of conveying information (WCAG 1.3.3 Sensory Characteristics)\n * - Icon colors must have sufficient contrast against their background (WCAG 1.4.11 Non-text Contrast, 3:1 ratio)\n * - Icons used in interactive elements must meet minimum target size (WCAG 2.5.8 Target Size)\n *\n * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html\n * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html\n * @see https://www.w3.org/WAI/WCAG21/Understanding/sensory-characteristics.html\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-hidden\n */\nexport type IconsProp = SimpleProp<'icons', string>;\nexport const iconsProp = createPropDefinition<IconsProp>('icons', 'kolicon-logo', normalizeString);\n","import { iconsProp, labelProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const iconPropsConfig = {\n\trequired: [iconsProp, labelProp],\n} as const satisfies PropsConfigShape;\n\nexport type IconApi = ApiFromConfig<typeof iconPropsConfig>;\n","import { iconsProp, labelProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, GetStateFn, ResolvedProps, SetStateFn } from '../generic-types';\nimport type { IconApi } from './api';\nimport { iconPropsConfig } from './api';\n\nexport class IconController extends BaseController<IconApi> implements ControllerInterface<IconApi> {\n\tpublic constructor(setState: SetStateFn<IconApi>, getState: GetStateFn<IconApi>) {\n\t\tsuper(iconPropsConfig, setState, getState);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedProps<IconApi>): void {\n\t\tconst { icons, label } = props;\n\t\tthis.watchIcons(icons);\n\t\tthis.watchLabel(label);\n\t}\n\n\tpublic watchIcons(value?: string): void {\n\t\ticonsProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('icons', v);\n\t\t});\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n}\n","@use '../@shared/icon.mixin' as *;\n\n@layer kol-component {\n\t@include kol-icon-styles();\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { IconApi } from '../../internal/functional-components/icon/api';\nimport { IconFC } from '../../internal/functional-components/icon/component';\nimport { IconController } from '../../internal/functional-components/icon/controller';\n\n/**\n * The **Icon** component allows icons from included icon fonts to be displayed at any position.\n */\n@Component({\n\ttag: 'kol-icon',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolIcon extends BaseWebComponent<IconApi> implements WebComponentInterface<IconApi> {\n\tprivate readonly ctrl = new IconController(this.setState, this.getState);\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop()\n\tpublic _icons!: string;\n\n\t@Watch('_icons')\n\tpublic watchIcons(value?: string): void {\n\t\tthis.ctrl.watchIcons(value);\n\t}\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()\n\tpublic _label!: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\ticons: this._icons,\n\t\t\tlabel: this._label,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<IconFC icons={this.ctrl.getRenderProp('icons')} label={this.ctrl.getRenderProp('label')} />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAyBO,MAAM,SAAS,GAAG,oBAAoB,CAAY,OAAO,EAAE,cAAc,EAAE,eAAe,CAAC;;ACtB3F,MAAM,eAAe,GAAG;AAC9B,IAAA,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;CACI;;ACC/B,MAAO,cAAe,SAAQ,cAAuB,CAAA;IAC1D,WAAmB,CAAA,QAA6B,EAAE,QAA6B,EAAA;AAC9E,QAAA,KAAK,CAAC,eAAe,EAAE,QAAQ,EAAE,QAAQ,CAAC;;AAGpC,IAAA,iBAAiB,CAAC,KAA6B,EAAA;AACrD,QAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK;AAC9B,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AACtB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;;AAGhB,IAAA,UAAU,CAAC,KAAc,EAAA;QAC/B,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,KAAI;AAC5B,YAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;AAC/B,SAAC,CAAC;;AAGI,IAAA,UAAU,CAAC,KAAc,EAAA;QAC/B,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,KAAI;AAC5B,YAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;AAC/B,SAAC,CAAC;;AAEH;;AC5BD,MAAM,eAAe,GAAG,2hFAA2hF;;MCkBtiF,OAAQ,GAAA,cAAQ,gBAAyB,CAAA;;;;AACpC,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;;AASjE,IAAA,UAAU,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;;AAUrB,IAAA,UAAU,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;;IAGrB,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;YAC3B,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,KAAK,EAAE,IAAI,CAAC,MAAM;AAClB,SAAA,CAAC;;IAGI,MAAM,GAAA;QACZ,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAC,CAAA,MAAM,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EAAA,CAAI,CACtF;;;;;;;;;;;;;"}
+{"version":3,"file":"kol-icon.entry.esm.js","sources":["src/internal/props/icons.ts","src/internal/functional-components/icon/api.tsx","src/internal/functional-components/icon/controller.ts","src/components/icon/style.scss?tag=kol-icon&mode=default&encapsulation=shadow","src/components/icon/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Icons prop for icon class names\n *\n * Description:\n * Specifies the icon(s) to display via CSS class names (e.g., icon fonts). Icons are\n * visual indicators that supplement or replace text content.\n *\n * Usage (according to WCAG 2.1 and WAI-ARIA):\n * - Decorative icons: Must be hidden from assistive technologies (aria-hidden=\"true\")\n * - Informative icons: Must have a text alternative (WCAG 1.1.1 Non-text Content)\n *   - Use the label prop or aria-label to provide an accessible name\n * - Icons must not be the sole means of conveying information (WCAG 1.3.3 Sensory Characteristics)\n * - Icon colors must have sufficient contrast against their background (WCAG 1.4.11 Non-text Contrast, 3:1 ratio)\n * - Icons used in interactive elements must meet minimum target size (WCAG 2.5.8 Target Size)\n *\n * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html\n * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html\n * @see https://www.w3.org/WAI/WCAG21/Understanding/sensory-characteristics.html\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-hidden\n */\nexport type IconsProp = SimpleProp<'icons', string>;\nexport const iconsProp = createPropDefinition<IconsProp>('icons', 'kolicon-logo', normalizeString);\n","import { iconsProp, labelProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const iconPropsConfig = {\n\trequired: [iconsProp, labelProp],\n} as const satisfies PropsConfigShape;\n\nexport type IconApi = ApiFromConfig<typeof iconPropsConfig>;\n","import { iconsProp, labelProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedProps, StateAccess } from '../generic-types';\nimport type { IconApi } from './api';\nimport { iconPropsConfig } from './api';\n\nexport class IconController extends BaseController<IconApi> implements ControllerInterface<IconApi> {\n\tpublic constructor(stateAccess: StateAccess<IconApi>) {\n\t\tsuper(stateAccess, iconPropsConfig);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedProps<IconApi>): void {\n\t\tconst { icons, label } = props;\n\t\tthis.watchIcons(icons);\n\t\tthis.watchLabel(label);\n\t}\n\n\tpublic watchIcons(value?: string): void {\n\t\ticonsProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('icons', v);\n\t\t});\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n}\n","@use '../@shared/icon.mixin' as *;\n\n@layer kol-component {\n\t@include kol-icon-styles();\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { IconApi } from '../../internal/functional-components/icon/api';\nimport { IconFC } from '../../internal/functional-components/icon/component';\nimport { IconController } from '../../internal/functional-components/icon/controller';\n\n/**\n * The **Icon** component allows icons from included icon fonts to be displayed at any position.\n */\n@Component({\n\ttag: 'kol-icon',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolIcon implements WebComponentInterface<IconApi> {\n\tprivate readonly ctrl = new IconController(BaseWebComponent.stateLess);\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop()\n\tpublic _icons!: string;\n\n\t@Watch('_icons')\n\tpublic watchIcons(value?: string): void {\n\t\tthis.ctrl.watchIcons(value);\n\t}\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()\n\tpublic _label!: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\ticons: this._icons,\n\t\t\tlabel: this._label,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<IconFC icons={this.ctrl.getRenderProp('icons')} label={this.ctrl.getRenderProp('label')} />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAyBO,MAAM,SAAS,GAAG,oBAAoB,CAAY,OAAO,EAAE,cAAc,EAAE,eAAe,CAAC;;ACtB3F,MAAM,eAAe,GAAG;AAC9B,IAAA,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;CACI;;ACC/B,MAAO,cAAe,SAAQ,cAAuB,CAAA;AAC1D,IAAA,WAAA,CAAmB,WAAiC,EAAA;AACnD,QAAA,KAAK,CAAC,WAAW,EAAE,eAAe,CAAC;;AAG7B,IAAA,iBAAiB,CAAC,KAA6B,EAAA;AACrD,QAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK;AAC9B,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AACtB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;;AAGhB,IAAA,UAAU,CAAC,KAAc,EAAA;QAC/B,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,KAAI;AAC5B,YAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;AAC/B,SAAC,CAAC;;AAGI,IAAA,UAAU,CAAC,KAAc,EAAA;QAC/B,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,KAAI;AAC5B,YAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;AAC/B,SAAC,CAAC;;AAEH;;AC5BD,MAAM,eAAe,GAAG,2hFAA2hF;;MCkBtiF,OAAO,GAAA,MAAA;AAPpB,IAAA,WAAA,CAAA,OAAA,EAAA;;QAQkB,IAAI,CAAA,IAAA,GAAG,IAAI,cAAc,CAAC,gBAAgB,CAAC,SAAS,CAAC;AAsCtE;AA7BO,IAAA,UAAU,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;;AAUrB,IAAA,UAAU,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;;IAGrB,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;YAC3B,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,KAAK,EAAE,IAAI,CAAC,MAAM;AAClB,SAAA,CAAC;;IAGI,MAAM,GAAA;QACZ,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAC,CAAA,MAAM,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EAAA,CAAI,CACtF;;;;;;;;;;;;;"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as o,H as e}from"./index-BPtT34o3.js";import{B as t,a as c}from"./base-web-component-BnYjYRBQ.js";import{I as i}from"./component-CL5w48zL.js";import"./common-5ExJH6NU.js";import{c as r,n as s}from"./normalizers-KEHwXLG5.js";import{l}from"./label-YKsDbE5K.js";import"./tslib.es6-CxX45GIN.js";import"./bem-registry-DTQ0cuzY.js";import"./clsx-COFh-Vc8.js";import"./_Uint8Array-UP73qmmG.js";import"./isArray-CcrBs4JM.js";import"./isObject-BJgq02Md.js";const a=r("icons","kolicon-logo",s),f={required:[a,l]};class b extends t{constructor(n,o){super(f,n,o)}componentWillLoad(n){const{icons:o,label:e}=n;this.watchIcons(o),this.watchLabel(e)}watchIcons(n){a.apply(n,n=>{this.setRenderProp("icons",n)})}watchLabel(n){l.apply(n,n=>{this.setRenderProp("label",n)})}}const k='@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1774956515321"); /* IE9*/\n  src: url("kolicons.eot?t=1774956515321#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1774956515321") format("woff2"), url("kolicons.woff?t=1774956515321") format("woff"), url("kolicons.ttf?t=1774956515321") format("truetype"), url("kolicons.svg?t=1774956515321#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}',h=class extends c{constructor(o){super(),n(this,o),this.ctrl=new b(this.setState,this.getState)}watchIcons(n){this.ctrl.watchIcons(n)}watchLabel(n){this.ctrl.watchLabel(n)}componentWillLoad(){this.ctrl.componentWillLoad({icons:this._icons,label:this._label})}render(){return o(e,{key:"eec010ecae679aa60be2e9a20c87fb817a84f562"},o(i,{key:"e0fdbd3ec1dfa9b95d3a5da034af895af36ec848",icons:this.ctrl.getRenderProp("icons"),label:this.ctrl.getRenderProp("label")}))}static get watchers(){return{_icons:["watchIcons"],_label:["watchLabel"]}}};h.style={default:k};export{h as kol_icon};
+import{r as n,h as o,H as e}from"./index-C8rYknb2.js";import{B as t}from"./variant-quote-CHD0qMkY.js";import{I as c}from"./component-C5-fCuhA.js";import"./common-BqV6Zb30.js";import{c as i,n as r}from"./normalizers-DnkJhVYZ.js";import{l}from"./label-BEOW9ltS.js";import{B as s}from"./base-controller-CXhqh4cR.js";import"./tslib.es6-CxX45GIN.js";import"./bem-registry-Bux_TllX.js";import"./clsx-COFh-Vc8.js";import"./_Uint8Array-kJHDjtoP.js";import"./isArray-CcrBs4JM.js";const a=i("icons","kolicon-logo",r),f={required:[a,l]};class k extends s{constructor(n){super(n,f)}componentWillLoad(n){const{icons:o,label:e}=n;this.watchIcons(o),this.watchLabel(e)}watchIcons(n){a.apply(n,n=>{this.setRenderProp("icons",n)})}watchLabel(n){l.apply(n,n=>{this.setRenderProp("label",n)})}}const b='@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775118370120"); /* IE9*/\n  src: url("kolicons.eot?t=1775118370120#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775118370120") format("woff2"), url("kolicons.woff?t=1775118370120") format("woff"), url("kolicons.ttf?t=1775118370120") format("truetype"), url("kolicons.svg?t=1775118370120#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}',h=class{constructor(o){n(this,o),this.ctrl=new k(t.stateLess)}watchIcons(n){this.ctrl.watchIcons(n)}watchLabel(n){this.ctrl.watchLabel(n)}componentWillLoad(){this.ctrl.componentWillLoad({icons:this._icons,label:this._label})}render(){return o(e,{key:"af39984255995f183c5dce6bc5a6433b84940131"},o(c,{key:"1a03c1c01121ec2cc03ade18bc299a00bee5f0cd",icons:this.ctrl.getRenderProp("icons"),label:this.ctrl.getRenderProp("label")}))}static get watchers(){return{_icons:["watchIcons"],_label:["watchLabel"]}}};h.style={default:b};export{h as kol_icon};

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

@@ -1 +1 @@
-{"version":3,"names":["registerInstance","h","Host","BaseController","BaseWebComponent","IconFC","createPropDefinition","normalizeString","labelProp","iconsProp","iconPropsConfig","required","IconController","constructor","setState","getState","super","componentWillLoad","props","icons","label","this","watchIcons","watchLabel","value","apply","v","setRenderProp","defaultStyleCss","KolIcon","hostRef","ctrl","_icons","_label","render","key","getRenderProp","watchers","style","default"],"sources":["0"],"mappings":";;;YAGcA,OAAkBC,OAAQC,MAAY,kCACtCC,OAAqBC,MAAwB,+CAC7CC,MAAc,gCACrB,mCACOC,OAA2BC,MAAuB,mCAClDC,MAAiB,4BACxB,gCACA,mCACA,2BACA,kCACA,8BACA,yBAEP,MAAMC,EAAYH,EAAqB,QAAS,eAAgBC,GAEhE,MAAMG,EAAkB,CACpBC,SAAU,CAACF,EAAWD,IAG1B,MAAMI,UAAuBT,EACzB,WAAAU,CAAYC,EAAUC,GAClBC,MAAMN,EAAiBI,EAAUC,EACrC,CACA,iBAAAE,CAAkBC,GACd,MAAMC,MAAEA,EAAKC,MAAEA,GAAUF,EACzBG,KAAKC,WAAWH,GAChBE,KAAKE,WAAWH,EACpB,CACA,UAAAE,CAAWE,GACPf,EAAUgB,MAAMD,GAAQE,IACpBL,KAAKM,cAAc,QAASD,EAAE,GAEtC,CACA,UAAAH,CAAWC,GACPhB,EAAUiB,MAAMD,GAAQE,IACpBL,KAAKM,cAAc,QAASD,EAAE,GAEtC,EAGJ,MAAME,EAAkB,08EAExB,MAAMC,EAAU,cAAczB,EAC1B,WAAAS,CAAYiB,GACRd,QACAhB,EAAiBqB,KAAMS,GACvBT,KAAKU,KAAO,IAAInB,EAAeS,KAAKP,SAAUO,KAAKN,SACvD,CACA,UAAAO,CAAWE,GACPH,KAAKU,KAAKT,WAAWE,EACzB,CACA,UAAAD,CAAWC,GACPH,KAAKU,KAAKR,WAAWC,EACzB,CACA,iBAAAP,GACII,KAAKU,KAAKd,kBAAkB,CACxBE,MAAOE,KAAKW,OACZZ,MAAOC,KAAKY,QAEpB,CACA,MAAAC,GACI,OAAQjC,EAAEC,EAAM,CAAEiC,IAAK,4CAA8ClC,EAAEI,EAAQ,CAAE8B,IAAK,2CAA4ChB,MAAOE,KAAKU,KAAKK,cAAc,SAAUhB,MAAOC,KAAKU,KAAKK,cAAc,WAC9M,CACA,mBAAWC,GAAa,MAAO,CAC3BL,OAAU,CAAC,cACXC,OAAU,CAAC,cACZ,GAEPJ,EAAQS,MAAQ,CACZC,QAASX,UAGJC","ignoreList":[]}
+{"version":3,"names":["registerInstance","h","Host","BaseWebComponent","IconFC","createPropDefinition","normalizeString","labelProp","BaseController","iconsProp","iconPropsConfig","required","IconController","constructor","stateAccess","super","componentWillLoad","props","icons","label","this","watchIcons","watchLabel","value","apply","v","setRenderProp","defaultStyleCss","KolIcon","hostRef","ctrl","stateLess","_icons","_label","render","key","getRenderProp","watchers","style","default"],"sources":["0"],"mappings":";;;YAGcA,OAAkBC,OAAQC,MAAY,kCACtCC,MAAwB,0CACxBC,MAAc,gCACrB,mCACOC,OAA2BC,MAAuB,mCAClDC,MAAiB,kCACjBC,MAAsB,sCAC7B,gCACA,mCACA,2BACA,kCACA,wBAEP,MAAMC,EAAYJ,EAAqB,QAAS,eAAgBC,GAEhE,MAAMI,EAAkB,CACpBC,SAAU,CAACF,EAAWF,IAG1B,MAAMK,UAAuBJ,EACzB,WAAAK,CAAYC,GACRC,MAAMD,EAAaJ,EACvB,CACA,iBAAAM,CAAkBC,GACd,MAAMC,MAAEA,EAAKC,MAAEA,GAAUF,EACzBG,KAAKC,WAAWH,GAChBE,KAAKE,WAAWH,EACpB,CACA,UAAAE,CAAWE,GACPd,EAAUe,MAAMD,GAAQE,IACpBL,KAAKM,cAAc,QAASD,EAAE,GAEtC,CACA,UAAAH,CAAWC,GACPhB,EAAUiB,MAAMD,GAAQE,IACpBL,KAAKM,cAAc,QAASD,EAAE,GAEtC,EAGJ,MAAME,EAAkB,08EAExB,MAAMC,EAAU,MACZ,WAAAf,CAAYgB,GACR7B,EAAiBoB,KAAMS,GACvBT,KAAKU,KAAO,IAAIlB,EAAeT,EAAiB4B,UACpD,CACA,UAAAV,CAAWE,GACPH,KAAKU,KAAKT,WAAWE,EACzB,CACA,UAAAD,CAAWC,GACPH,KAAKU,KAAKR,WAAWC,EACzB,CACA,iBAAAP,GACII,KAAKU,KAAKd,kBAAkB,CACxBE,MAAOE,KAAKY,OACZb,MAAOC,KAAKa,QAEpB,CACA,MAAAC,GACI,OAAQjC,EAAEC,EAAM,CAAEiC,IAAK,4CAA8ClC,EAAEG,EAAQ,CAAE+B,IAAK,2CAA4CjB,MAAOE,KAAKU,KAAKM,cAAc,SAAUjB,MAAOC,KAAKU,KAAKM,cAAc,WAC9M,CACA,mBAAWC,GAAa,MAAO,CAC3BL,OAAU,CAAC,cACXC,OAAU,CAAC,cACZ,GAEPL,EAAQU,MAAQ,CACZC,QAASZ,UAGJC","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"kol-image.entry.esm.js","sources":["src/internal/props/alt.ts","src/internal/props/sizes.ts","src/internal/props/srcset.ts","src/internal/functional-components/image/component.tsx","src/internal/functional-components/image/api.tsx","src/internal/functional-components/image/controller.ts","src/components/image/style.scss?tag=kol-image&mode=default&encapsulation=shadow","src/components/image/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Alt text prop for images\n *\n * Description:\n * Alt text is essential for image accessibility. It is read by screen readers and improves the user experience\n * for people with visual impairments.\n *\n * Usage (according to WCAG 2.1):\n * - Descriptive text: alt=\"A person sitting at a desk\"\n * - Decorative image: alt=\"\" (empty string) - signals to screen readers that the image is decorative\n * - Avoid: alt=\"image\", alt=\"no alt text\" (too vague)\n *\n * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html\n */\nexport type AltProp = SimpleProp<'alt', string>;\nexport const altProp = createPropDefinition<AltProp>(\n\t'alt',\n\t'', // Default: empty string allows decorative images\n\tnormalizeString,\n\t(v) => typeof v === 'string', // Accepts all strings (including '')\n);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Sizes prop for responsive image source selection\n *\n * Description:\n * The sizes attribute defines a set of media conditions and corresponding image display sizes.\n * It works together with srcset to help the browser select the optimal image source for the\n * current viewport and layout.\n *\n * Usage (according to W3C HTML specification):\n * - Media condition with size: sizes=\"(max-width: 600px) 100vw, 50vw\"\n * - Single size: sizes=\"100vw\"\n * - Must be paired with a srcset attribute using width descriptors (e.g., \"image.jpg 800w\")\n * - If omitted, defaults to \"100vw\" (whole viewport width)\n *\n * Accessibility:\n * - Responsive images support users who zoom or use small screens (WCAG 1.4.4 Resize Text)\n * - The correct image size preserves readability and avoids content overflow (WCAG 1.4.10 Reflow)\n *\n * @see https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-sizes\n * @see https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html\n * @see https://www.w3.org/WAI/WCAG21/Understanding/reflow.html\n */\nexport type SizesProp = SimpleProp<'sizes', string>;\nexport const sizesProp = createPropDefinition<SizesProp>('sizes', '', normalizeString);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Srcset prop for responsive images\n *\n * Description:\n * The srcset attribute defines a set of image sources with descriptors, allowing the browser\n * to select the most appropriate image based on screen size, resolution, or viewport width.\n * Used together with the sizes attribute for art direction and performance optimization.\n *\n * Usage (according to W3C HTML specification):\n * - Width descriptor: srcset=\"small.jpg 480w, large.jpg 1024w\"\n * - Pixel density descriptor: srcset=\"image-1x.jpg 1x, image-2x.jpg 2x\"\n * - Must be used with a src fallback for browsers that do not support srcset\n *\n * Accessibility:\n * - The selected image must still meet all accessibility requirements (alt text, contrast)\n * - Responsive images help users with low bandwidth or small screens (WCAG 1.4.4 Resize Text)\n *\n * @see https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset\n * @see https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html\n */\nexport type SrcsetProp = SimpleProp<'srcset', string>;\nexport const srcsetProp = createPropDefinition<SrcsetProp>('srcset', '', normalizeString);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { ImageApi } from './api';\n\nexport const ImageFC: FC<FunctionalComponentProps<ImageApi>> = (props) => {\n\tconst { alt, loading, sizes, src, srcset } = props;\n\n\treturn <img class=\"kol-image\" alt={alt} loading={loading} sizes={sizes || undefined} src={src} srcset={srcset || undefined} />;\n};\n","import { altProp, loadingProp, sizesProp, srcProp, srcsetProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const imagePropsConfig = {\n\toptional: [loadingProp, sizesProp, srcsetProp],\n\trequired: [altProp, srcProp],\n} as const satisfies PropsConfigShape;\n\nexport type ImageApi = ApiFromConfig<typeof imagePropsConfig>;\n","import type { LoadingType } from '../../props';\nimport { altProp, loadingProp, sizesProp, srcProp, srcsetProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';\nimport type { ImageApi } from './api';\nimport { imagePropsConfig } from './api';\n\nexport class ImageController extends BaseController<ImageApi> implements ControllerInterface<ImageApi> {\n\tpublic constructor(setState: SetStateFn<ImageApi>, getState: GetStateFn<ImageApi>) {\n\t\tsuper(imagePropsConfig, setState, getState);\n\t}\n\tpublic componentWillLoad(props: ResolvedInputProps<ImageApi>): void {\n\t\tconst { alt, loading, sizes, src, srcset } = props;\n\t\tthis.watchAlt(alt);\n\t\tthis.watchLoading(loading);\n\t\tthis.watchSizes(sizes);\n\t\tthis.watchSrc(src);\n\t\tthis.watchSrcset(srcset);\n\t}\n\n\tpublic watchAlt(value?: string): void {\n\t\taltProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('alt', v);\n\t\t});\n\t}\n\n\tpublic watchLoading(value?: LoadingType): void {\n\t\tloadingProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('loading', v);\n\t\t});\n\t}\n\n\tpublic watchSizes(value?: string): void {\n\t\tsizesProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('sizes', v);\n\t\t});\n\t}\n\n\tpublic watchSrc(value?: string): void {\n\t\tsrcProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('src', v);\n\t\t});\n\t}\n\n\tpublic watchSrcset(value?: string): void {\n\t\tsrcsetProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('srcset', v);\n\t\t});\n\t}\n}\n","@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-image {\n\t\tdisplay: inline-block;\n\t\tmax-width: 100%;\n\t\tmax-height: 100%;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { ImageApi } from '../../internal/functional-components/image/api';\nimport { ImageFC } from '../../internal/functional-components/image/component';\nimport { ImageController } from '../../internal/functional-components/image/controller';\nimport type { LoadingType } from '../../internal/props';\n\n/**\n * The **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text.\n */\n@Component({\n\ttag: 'kol-image',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolImage extends BaseWebComponent<ImageApi> implements WebComponentInterface<ImageApi> {\n\tprivate readonly ctrl = new ImageController(this.setState, this.getState);\n\n\t/**\n\t * Sets the alternative text of the image.\n\t */\n\t@Prop()\n\tpublic _alt!: string;\n\n\t@Watch('_alt')\n\tpublic watchAlt(value?: string): void {\n\t\tthis.ctrl.watchAlt(value);\n\t}\n\n\t/**\n\t * Defines the loading mode for the image.\n\t */\n\t@Prop()\n\tpublic _loading?: LoadingType;\n\n\t@Watch('_loading')\n\tpublic watchLoading(value?: LoadingType): void {\n\t\tthis.ctrl.watchLoading(value);\n\t}\n\n\t/**\n\t * Defines the image sizes for different screen resolutions, supporting _srcset.\n\t */\n\t@Prop()\n\tpublic _sizes?: string;\n\n\t@Watch('_sizes')\n\tpublic watchSizes(value?: string): void {\n\t\tthis.ctrl.watchSizes(value);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop()\n\tpublic _src!: string;\n\n\t@Watch('_src')\n\tpublic watchSrc(value?: string): void {\n\t\tthis.ctrl.watchSrc(value);\n\t}\n\n\t/**\n\t * Sets a list of source URLs with widths of the images.\n\t */\n\t@Prop()\n\tpublic _srcset?: string;\n\n\t@Watch('_srcset')\n\tpublic watchSrcset(value?: string): void {\n\t\tthis.ctrl.watchSrcset(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\talt: this._alt,\n\t\t\tloading: this._loading,\n\t\t\tsizes: this._sizes,\n\t\t\tsrc: this._src,\n\t\t\tsrcset: this._srcset,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<ImageFC\n\t\t\t\t\talt={this.ctrl.getRenderProp('alt')}\n\t\t\t\t\tloading={this.ctrl.getRenderProp('loading')}\n\t\t\t\t\tsizes={this.ctrl.getRenderProp('sizes')}\n\t\t\t\t\tsrc={this.ctrl.getRenderProp('src')}\n\t\t\t\t\tsrcset={this.ctrl.getRenderProp('srcset')}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kol-image.entry.esm.js","sources":["src/internal/props/alt.ts","src/internal/props/sizes.ts","src/internal/props/srcset.ts","src/internal/functional-components/image/component.tsx","src/internal/functional-components/image/api.tsx","src/internal/functional-components/image/controller.ts","src/components/image/style.scss?tag=kol-image&mode=default&encapsulation=shadow","src/components/image/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Alt text prop for images\n *\n * Description:\n * Alt text is essential for image accessibility. It is read by screen readers and improves the user experience\n * for people with visual impairments.\n *\n * Usage (according to WCAG 2.1):\n * - Descriptive text: alt=\"A person sitting at a desk\"\n * - Decorative image: alt=\"\" (empty string) - signals to screen readers that the image is decorative\n * - Avoid: alt=\"image\", alt=\"no alt text\" (too vague)\n *\n * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html\n */\nexport type AltProp = SimpleProp<'alt', string>;\nexport const altProp = createPropDefinition<AltProp>(\n\t'alt',\n\t'', // Default: empty string allows decorative images\n\tnormalizeString,\n\t(v) => typeof v === 'string', // Accepts all strings (including '')\n);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Sizes prop for responsive image source selection\n *\n * Description:\n * The sizes attribute defines a set of media conditions and corresponding image display sizes.\n * It works together with srcset to help the browser select the optimal image source for the\n * current viewport and layout.\n *\n * Usage (according to W3C HTML specification):\n * - Media condition with size: sizes=\"(max-width: 600px) 100vw, 50vw\"\n * - Single size: sizes=\"100vw\"\n * - Must be paired with a srcset attribute using width descriptors (e.g., \"image.jpg 800w\")\n * - If omitted, defaults to \"100vw\" (whole viewport width)\n *\n * Accessibility:\n * - Responsive images support users who zoom or use small screens (WCAG 1.4.4 Resize Text)\n * - The correct image size preserves readability and avoids content overflow (WCAG 1.4.10 Reflow)\n *\n * @see https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-sizes\n * @see https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html\n * @see https://www.w3.org/WAI/WCAG21/Understanding/reflow.html\n */\nexport type SizesProp = SimpleProp<'sizes', string>;\nexport const sizesProp = createPropDefinition<SizesProp>('sizes', '', normalizeString);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Srcset prop for responsive images\n *\n * Description:\n * The srcset attribute defines a set of image sources with descriptors, allowing the browser\n * to select the most appropriate image based on screen size, resolution, or viewport width.\n * Used together with the sizes attribute for art direction and performance optimization.\n *\n * Usage (according to W3C HTML specification):\n * - Width descriptor: srcset=\"small.jpg 480w, large.jpg 1024w\"\n * - Pixel density descriptor: srcset=\"image-1x.jpg 1x, image-2x.jpg 2x\"\n * - Must be used with a src fallback for browsers that do not support srcset\n *\n * Accessibility:\n * - The selected image must still meet all accessibility requirements (alt text, contrast)\n * - Responsive images help users with low bandwidth or small screens (WCAG 1.4.4 Resize Text)\n *\n * @see https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset\n * @see https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html\n */\nexport type SrcsetProp = SimpleProp<'srcset', string>;\nexport const srcsetProp = createPropDefinition<SrcsetProp>('srcset', '', normalizeString);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { ImageApi } from './api';\n\nexport const ImageFC: FC<FunctionalComponentProps<ImageApi>> = (props) => {\n\tconst { alt, loading, sizes, src, srcset } = props;\n\n\treturn <img class=\"kol-image\" alt={alt} loading={loading} sizes={sizes || undefined} src={src} srcset={srcset || undefined} />;\n};\n","import { altProp, loadingProp, sizesProp, srcProp, srcsetProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const imagePropsConfig = {\n\toptional: [loadingProp, sizesProp, srcsetProp],\n\trequired: [altProp, srcProp],\n} as const satisfies PropsConfigShape;\n\nexport type ImageApi = ApiFromConfig<typeof imagePropsConfig>;\n","import type { LoadingType } from '../../props';\nimport { altProp, loadingProp, sizesProp, srcProp, srcsetProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { ImageApi } from './api';\nimport { imagePropsConfig } from './api';\n\nexport class ImageController extends BaseController<ImageApi> implements ControllerInterface<ImageApi> {\n\tpublic constructor(stateAccess: StateAccess<ImageApi>) {\n\t\tsuper(stateAccess, imagePropsConfig);\n\t}\n\tpublic componentWillLoad(props: ResolvedInputProps<ImageApi>): void {\n\t\tconst { alt, loading, sizes, src, srcset } = props;\n\t\tthis.watchAlt(alt);\n\t\tthis.watchLoading(loading);\n\t\tthis.watchSizes(sizes);\n\t\tthis.watchSrc(src);\n\t\tthis.watchSrcset(srcset);\n\t}\n\n\tpublic watchAlt(value?: string): void {\n\t\taltProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('alt', v);\n\t\t});\n\t}\n\n\tpublic watchLoading(value?: LoadingType): void {\n\t\tloadingProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('loading', v);\n\t\t});\n\t}\n\n\tpublic watchSizes(value?: string): void {\n\t\tsizesProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('sizes', v);\n\t\t});\n\t}\n\n\tpublic watchSrc(value?: string): void {\n\t\tsrcProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('src', v);\n\t\t});\n\t}\n\n\tpublic watchSrcset(value?: string): void {\n\t\tsrcsetProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('srcset', v);\n\t\t});\n\t}\n}\n","@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-image {\n\t\tdisplay: inline-block;\n\t\tmax-width: 100%;\n\t\tmax-height: 100%;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { ImageApi } from '../../internal/functional-components/image/api';\nimport { ImageFC } from '../../internal/functional-components/image/component';\nimport { ImageController } from '../../internal/functional-components/image/controller';\nimport type { LoadingType } from '../../internal/props';\n\n/**\n * The **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text.\n */\n@Component({\n\ttag: 'kol-image',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolImage implements WebComponentInterface<ImageApi> {\n\tprivate readonly ctrl = new ImageController(BaseWebComponent.stateLess);\n\n\t/**\n\t * Sets the alternative text of the image.\n\t */\n\t@Prop()\n\tpublic _alt!: string;\n\n\t@Watch('_alt')\n\tpublic watchAlt(value?: string): void {\n\t\tthis.ctrl.watchAlt(value);\n\t}\n\n\t/**\n\t * Defines the loading mode for the image.\n\t */\n\t@Prop()\n\tpublic _loading?: LoadingType;\n\n\t@Watch('_loading')\n\tpublic watchLoading(value?: LoadingType): void {\n\t\tthis.ctrl.watchLoading(value);\n\t}\n\n\t/**\n\t * Defines the image sizes for different screen resolutions, supporting _srcset.\n\t */\n\t@Prop()\n\tpublic _sizes?: string;\n\n\t@Watch('_sizes')\n\tpublic watchSizes(value?: string): void {\n\t\tthis.ctrl.watchSizes(value);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop()\n\tpublic _src!: string;\n\n\t@Watch('_src')\n\tpublic watchSrc(value?: string): void {\n\t\tthis.ctrl.watchSrc(value);\n\t}\n\n\t/**\n\t * Sets a list of source URLs with widths of the images.\n\t */\n\t@Prop()\n\tpublic _srcset?: string;\n\n\t@Watch('_srcset')\n\tpublic watchSrcset(value?: string): void {\n\t\tthis.ctrl.watchSrcset(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\talt: this._alt,\n\t\t\tloading: this._loading,\n\t\t\tsizes: this._sizes,\n\t\t\tsrc: this._src,\n\t\t\tsrcset: this._srcset,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<ImageFC\n\t\t\t\t\talt={this.ctrl.getRenderProp('alt')}\n\t\t\t\t\tloading={this.ctrl.getRenderProp('loading')}\n\t\t\t\t\tsizes={this.ctrl.getRenderProp('sizes')}\n\t\t\t\t\tsrc={this.ctrl.getRenderProp('src')}\n\t\t\t\t\tsrcset={this.ctrl.getRenderProp('srcset')}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as n,r as e,H as t}from"./index-BPtT34o3.js";import{l as i,B as s,a as o}from"./base-web-component-BnYjYRBQ.js";import"./common-5ExJH6NU.js";import{c as a,n as l}from"./normalizers-KEHwXLG5.js";import{s as r}from"./src-ZNAInwRj.js";import"./_Uint8Array-UP73qmmG.js";import"./isArray-CcrBs4JM.js";import"./isObject-BJgq02Md.js";const c=a("alt","",l,n=>"string"==typeof n),h=a("sizes","",l),d=a("srcset","",l),m=e=>{const{alt:t,loading:i,sizes:s,src:o,srcset:a}=e;return n("img",{class:"kol-image",alt:t,loading:i,sizes:s||void 0,src:o,srcset:a||void 0})},p={optional:[i,h,d],required:[c,r]};class f extends s{constructor(n,e){super(p,n,e)}componentWillLoad(n){const{alt:e,loading:t,sizes:i,src:s,srcset:o}=n;this.watchAlt(e),this.watchLoading(t),this.watchSizes(i),this.watchSrc(s),this.watchSrcset(o)}watchAlt(n){c.apply(n,n=>{this.setRenderProp("alt",n)})}watchLoading(n){i.apply(n,n=>{this.setRenderProp("loading",n)})}watchSizes(n){h.apply(n,n=>{this.setRenderProp("sizes",n)})}watchSrc(n){r.apply(n,n=>{this.setRenderProp("src",n)})}watchSrcset(n){d.apply(n,n=>{this.setRenderProp("srcset",n)})}}const u="/*\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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-image {\n    display: inline-block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n}",b=class extends o{constructor(n){super(),e(this,n),this.ctrl=new f(this.setState,this.getState)}watchAlt(n){this.ctrl.watchAlt(n)}watchLoading(n){this.ctrl.watchLoading(n)}watchSizes(n){this.ctrl.watchSizes(n)}watchSrc(n){this.ctrl.watchSrc(n)}watchSrcset(n){this.ctrl.watchSrcset(n)}componentWillLoad(){this.ctrl.componentWillLoad({alt:this._alt,loading:this._loading,sizes:this._sizes,src:this._src,srcset:this._srcset})}render(){return n(t,{key:"e90814ed3ba4d21ab39290bff603a04a5b122ece"},n(m,{key:"9221ca31432cb4192ff006375934b3a52a0243f9",alt:this.ctrl.getRenderProp("alt"),loading:this.ctrl.getRenderProp("loading"),sizes:this.ctrl.getRenderProp("sizes"),src:this.ctrl.getRenderProp("src"),srcset:this.ctrl.getRenderProp("srcset")}))}static get watchers(){return{_alt:["watchAlt"],_loading:["watchLoading"],_sizes:["watchSizes"],_src:["watchSrc"],_srcset:["watchSrcset"]}}};b.style={default:u};export{b as kol_image};
+import{h as n,r as e,H as t}from"./index-C8rYknb2.js";import{l as i,B as o}from"./variant-quote-CHD0qMkY.js";import"./common-BqV6Zb30.js";import{c as s,n as a}from"./normalizers-DnkJhVYZ.js";import{s as l}from"./src-D1LGDerl.js";import{B as r}from"./base-controller-CXhqh4cR.js";import"./_Uint8Array-kJHDjtoP.js";import"./isArray-CcrBs4JM.js";const c=s("alt","",a,n=>"string"==typeof n),h=s("sizes","",a),d=s("srcset","",a),m=e=>{const{alt:t,loading:i,sizes:o,src:s,srcset:a}=e;return n("img",{class:"kol-image",alt:t,loading:i,sizes:o||void 0,src:s,srcset:a||void 0})},p={optional:[i,h,d],required:[c,l]};class f extends r{constructor(n){super(n,p)}componentWillLoad(n){const{alt:e,loading:t,sizes:i,src:o,srcset:s}=n;this.watchAlt(e),this.watchLoading(t),this.watchSizes(i),this.watchSrc(o),this.watchSrcset(s)}watchAlt(n){c.apply(n,n=>{this.setRenderProp("alt",n)})}watchLoading(n){i.apply(n,n=>{this.setRenderProp("loading",n)})}watchSizes(n){h.apply(n,n=>{this.setRenderProp("sizes",n)})}watchSrc(n){l.apply(n,n=>{this.setRenderProp("src",n)})}watchSrcset(n){d.apply(n,n=>{this.setRenderProp("srcset",n)})}}const u="/*\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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-image {\n    display: inline-block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n}",b=class{constructor(n){e(this,n),this.ctrl=new f(o.stateLess)}watchAlt(n){this.ctrl.watchAlt(n)}watchLoading(n){this.ctrl.watchLoading(n)}watchSizes(n){this.ctrl.watchSizes(n)}watchSrc(n){this.ctrl.watchSrc(n)}watchSrcset(n){this.ctrl.watchSrcset(n)}componentWillLoad(){this.ctrl.componentWillLoad({alt:this._alt,loading:this._loading,sizes:this._sizes,src:this._src,srcset:this._srcset})}render(){return n(t,{key:"2890d8504d0a2d5b3e96d8adcaa27323ce486898"},n(m,{key:"a26c7a71503fc0b9df8d8a510af015f752917316",alt:this.ctrl.getRenderProp("alt"),loading:this.ctrl.getRenderProp("loading"),sizes:this.ctrl.getRenderProp("sizes"),src:this.ctrl.getRenderProp("src"),srcset:this.ctrl.getRenderProp("srcset")}))}static get watchers(){return{_alt:["watchAlt"],_loading:["watchLoading"],_sizes:["watchSizes"],_src:["watchSrc"],_srcset:["watchSrcset"]}}};b.style={default:u};export{b as kol_image};

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

@@ -1 +1 @@
-{"version":3,"names":["h","registerInstance","Host","loadingProp","BaseController","BaseWebComponent","createPropDefinition","normalizeString","srcProp","altProp","v","sizesProp","srcsetProp","ImageFC","props","alt","loading","sizes","src","srcset","class","undefined","imagePropsConfig","optional","required","ImageController","constructor","setState","getState","super","componentWillLoad","this","watchAlt","watchLoading","watchSizes","watchSrc","watchSrcset","value","apply","setRenderProp","defaultStyleCss","KolImage","hostRef","ctrl","_alt","_loading","_sizes","_src","_srcset","render","key","getRenderProp","watchers","style","default"],"sources":["0"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["h","registerInstance","Host","loadingProp","BaseWebComponent","createPropDefinition","normalizeString","srcProp","BaseController","altProp","v","sizesProp","srcsetProp","ImageFC","props","alt","loading","sizes","src","srcset","class","undefined","imagePropsConfig","optional","required","ImageController","constructor","stateAccess","super","componentWillLoad","this","watchAlt","watchLoading","watchSizes","watchSrc","watchSrcset","value","apply","setRenderProp","defaultStyleCss","KolImage","hostRef","ctrl","stateLess","_alt","_loading","_sizes","_src","_srcset","render","key","getRenderProp","watchers","style","default"],"sources":["0"],"mappings":";;;YAGSA,OAAQC,OAAuBC,MAAY,kCACtCC,OAAkBC,MAAwB,oCACjD,mCACOC,OAA2BC,MAAuB,wCAClDC,MAAe,gCACfC,MAAsB,sCAC7B,kCACA,wBAEP,MAAMC,EAAUJ,EAAqB,MAAO,GAAIC,GAAkBI,UAAaA,IAAM,WAErF,MAAMC,EAAYN,EAAqB,QAAS,GAAIC,GAEpD,MAAMM,EAAaP,EAAqB,SAAU,GAAIC,GAEtD,MAAMO,EAAWC,IACb,MAAMC,IAAEA,EAAGC,QAAEA,EAAOC,MAAEA,EAAKC,IAAEA,EAAGC,OAAEA,GAAWL,EAC7C,OAAOd,EAAE,MAAO,CAAEoB,MAAO,YAAaL,IAAKA,EAAKC,QAASA,EAASC,MAAOA,GAASI,UAAWH,IAAKA,EAAKC,OAAQA,GAAUE,WAAY,EAGzI,MAAMC,EAAmB,CACrBC,SAAU,CAACpB,EAAaQ,EAAWC,GACnCY,SAAU,CAACf,EAASF,IAGxB,MAAMkB,UAAwBjB,EAC1B,WAAAkB,CAAYC,GACRC,MAAMD,EAAaL,EACvB,CACA,iBAAAO,CAAkBf,GACd,MAAMC,IAAEA,EAAGC,QAAEA,EAAOC,MAAEA,EAAKC,IAAEA,EAAGC,OAAEA,GAAWL,EAC7CgB,KAAKC,SAAShB,GACde,KAAKE,aAAahB,GAClBc,KAAKG,WAAWhB,GAChBa,KAAKI,SAAShB,GACdY,KAAKK,YAAYhB,EACrB,CACA,QAAAY,CAASK,GACL3B,EAAQ4B,MAAMD,GAAQ1B,IAClBoB,KAAKQ,cAAc,MAAO5B,EAAE,GAEpC,CACA,YAAAsB,CAAaI,GACTjC,EAAYkC,MAAMD,GAAQ1B,IACtBoB,KAAKQ,cAAc,UAAW5B,EAAE,GAExC,CACA,UAAAuB,CAAWG,GACPzB,EAAU0B,MAAMD,GAAQ1B,IACpBoB,KAAKQ,cAAc,QAAS5B,EAAE,GAEtC,CACA,QAAAwB,CAASE,GACL7B,EAAQ8B,MAAMD,GAAQ1B,IAClBoB,KAAKQ,cAAc,MAAO5B,EAAE,GAEpC,CACA,WAAAyB,CAAYC,GACRxB,EAAWyB,MAAMD,GAAQ1B,IACrBoB,KAAKQ,cAAc,SAAU5B,EAAE,GAEvC,EAGJ,MAAM6B,EAAkB,w3KAExB,MAAMC,EAAW,MACb,WAAAd,CAAYe,GACRxC,EAAiB6B,KAAMW,GACvBX,KAAKY,KAAO,IAAIjB,EAAgBrB,EAAiBuC,UACrD,CACA,QAAAZ,CAASK,GACLN,KAAKY,KAAKX,SAASK,EACvB,CACA,YAAAJ,CAAaI,GACTN,KAAKY,KAAKV,aAAaI,EAC3B,CACA,UAAAH,CAAWG,GACPN,KAAKY,KAAKT,WAAWG,EACzB,CACA,QAAAF,CAASE,GACLN,KAAKY,KAAKR,SAASE,EACvB,CACA,WAAAD,CAAYC,GACRN,KAAKY,KAAKP,YAAYC,EAC1B,CACA,iBAAAP,GACIC,KAAKY,KAAKb,kBAAkB,CACxBd,IAAKe,KAAKc,KACV5B,QAASc,KAAKe,SACd5B,MAAOa,KAAKgB,OACZ5B,IAAKY,KAAKiB,KACV5B,OAAQW,KAAKkB,SAErB,CACA,MAAAC,GACI,OAAQjD,EAAEE,EAAM,CAAEgD,IAAK,4CAA8ClD,EAAEa,EAAS,CAAEqC,IAAK,2CAA4CnC,IAAKe,KAAKY,KAAKS,cAAc,OAAQnC,QAASc,KAAKY,KAAKS,cAAc,WAAYlC,MAAOa,KAAKY,KAAKS,cAAc,SAAUjC,IAAKY,KAAKY,KAAKS,cAAc,OAAQhC,OAAQW,KAAKY,KAAKS,cAAc,YACvU,CACA,mBAAWC,GAAa,MAAO,CAC3BR,KAAQ,CAAC,YACTC,SAAY,CAAC,gBACbC,OAAU,CAAC,cACXC,KAAQ,CAAC,YACTC,QAAW,CAAC,eACb,GAEPR,EAASa,MAAQ,CACbC,QAASf,UAGJC","ignoreList":[]}