@public-ui/components 4.1.2-rc.9 → 4.1.2

package/dist/cjs/kol-modal.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-DAruRs4C.js"),componentNames=require("./component-names-5KS_pYRF.js");require("./common-CyOOsddt.js");const defaultStyleCss='@charset "UTF-8";\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/* 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@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775124354743"); /* IE9*/\n  src: url("kolicons.eot?t=1775124354743#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775124354743") format("woff2"), url("kolicons.woff?t=1775124354743") format("woff"), url("kolicons.ttf?t=1775124354743") format("truetype"), url("kolicons.svg?t=1775124354743#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.kol-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n\n.kol-card .kol-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n.kol-card :host {\n  display: inline-block;\n}\n.kol-card .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-card .kol-button::before {\n  /* Render zero-width character as first element to set the baseline correctly. */\n  content: "​";\n}\n.kol-card .kol-button__text {\n  flex: 1 0 100%;\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  display: grid;\n  height: 100%;\n  overflow: visible;\n  grid-template-areas: "header  close" "content content";\n  grid-template-columns: 1fr min-content;\n  grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n  align-self: start;\n  grid-area: header;\n}\n.kol-card__content {\n  align-self: stretch;\n  grid-area: content;\n}\n.kol-card__close-button {\n  grid-area: close;\n}\n\n@layer kol-component {\n  .kol-dialog,\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-dialog::backdrop,\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-dialog__close-button,\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}',KolModal=class{constructor(n){index.registerInstance(this,n),this.catchRef=n=>{this.dialogRef=n},this._width="100%",this._variant="blank"}async openModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.openModal())}async closeModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.closeModal())}render(){return index.h(componentNames.KolDialogWcTag,{key:"75ab887117449d69f906a712cad107bc2ddb78b7",ref:this.catchRef,_label:this._label,_on:this._on,_variant:this._variant,_width:this._width},index.h("slot",{key:"b12b97e9b2b23717c36ede3feb8b7908806c0981"}))}};KolModal.style={default:defaultStyleCss},exports.kol_modal=KolModal;
+"use strict";var index=require("./index-Dph1AncT.js"),componentNames=require("./component-names-5KS_pYRF.js");require("./common-CyOOsddt.js");const defaultStyleCss='@charset "UTF-8";\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/* 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@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775135018085"); /* IE9*/\n  src: url("kolicons.eot?t=1775135018085#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775135018085") format("woff2"), url("kolicons.woff?t=1775135018085") format("woff"), url("kolicons.ttf?t=1775135018085") format("truetype"), url("kolicons.svg?t=1775135018085#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.kol-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n\n.kol-card .kol-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n.kol-card :host {\n  display: inline-block;\n}\n.kol-card .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-card .kol-button::before {\n  /* Render zero-width character as first element to set the baseline correctly. */\n  content: "​";\n}\n.kol-card .kol-button__text {\n  flex: 1 0 100%;\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  display: grid;\n  height: 100%;\n  overflow: visible;\n  grid-template-areas: "header  close" "content content";\n  grid-template-columns: 1fr min-content;\n  grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n  align-self: start;\n  grid-area: header;\n}\n.kol-card__content {\n  align-self: stretch;\n  grid-area: content;\n}\n.kol-card__close-button {\n  grid-area: close;\n}\n\n@layer kol-component {\n  .kol-dialog,\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-dialog::backdrop,\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-dialog__close-button,\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}',KolModal=class{constructor(n){index.registerInstance(this,n),this.catchRef=n=>{this.dialogRef=n},this._width="100%",this._variant="blank"}async openModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.openModal())}async closeModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.closeModal())}render(){return index.h(componentNames.KolDialogWcTag,{key:"75ab887117449d69f906a712cad107bc2ddb78b7",ref:this.catchRef,_label:this._label,_on:this._on,_variant:this._variant,_width:this._width},index.h("slot",{key:"b12b97e9b2b23717c36ede3feb8b7908806c0981"}))}};KolModal.style={default:defaultStyleCss},exports.kol_modal=KolModal;

package/dist/cjs/kol-nav.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-DAruRs4C.js"),common=require("./common-CyOOsddt.js"),hideLabel=require("./hide-label-D5C7_wBP.js"),label=require("./label-BpdiumjJ.js"),componentNames=require("./component-names-5KS_pYRF.js"),i18n=require("./i18n-DevJo9yF.js"),clsx=require("./clsx-Bm_HQUnh.js"),dev_utils=require("./dev.utils-Dm-X_NQd.js"),uniqueNavLabels=require("./unique-nav-labels-DJBlAxpe.js"),validation=require("./validation-CJn2v37b.js");require("./i18n-CgUN6lev.js");const validateCollapsible=(n,e)=>{common.watchBoolean(n,"_collapsible",e)},validateHasCompactButton=(n,e)=>{common.watchBoolean(n,"_hasCompactButton",e)},validateHasIconsWhenExpanded=(n,e)=>{common.watchBoolean(n,"_hasIconsWhenExpanded",e)},defaultStyleCss='/* 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@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775124354743"); /* IE9*/\n  src: url("kolicons.eot?t=1775124354743#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775124354743") format("woff2"), url("kolicons.woff?t=1775124354743") format("woff"), url("kolicons.ttf?t=1775124354743") format("truetype"), url("kolicons.svg?t=1775124354743#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  .kol-nav {\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__navigation .kol-span {\n    width: 100%;\n    justify-content: flex-start;\n  }\n  .kol-nav__navigation .kol-span__container {\n    width: 100%;\n  }\n  .kol-nav__navigation .kol-span__container .kol-span__label {\n    flex: 1;\n  }\n  .kol-nav__list {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    flex-direction: column;\n    list-style: none;\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-button {\n    text-align: left;\n  }\n}',entryIsLink=n=>"string"==typeof n._href,entryIsButton=n=>{var e;return void 0===n._href&&"function"==typeof(null===(e=n._on)||void 0===e?void 0:e.onClick)},KolNav=class{constructor(n){index.registerInstance(this,n),this.navId="kol-nav-"+dev_utils.nonce(),this.listId=this.navId+"-list",this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>index.h("ul",{class:clsx.clsx("kol-nav__list",{"kol-nav__list--nested":n.deep>0,"kol-nav__list--vertical":0!==n.deep}),id:n.deep>0?n.id:void 0},n.links.map((e,t)=>this.li(n.collapsible,n.deep,t,e,n.id))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_expandedChildren:[]}}expandChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,n]})}collapseChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter(e=>e!==n)})}buildIconObject(n,e,t){const i={left:"",right:""};return this.state._hasIconsWhenExpanded&&t&&(i.left=t),this.state._hideLabel&&(i.left=t||"kolicon-link"),n&&(i.right=e?"kolicon-minus":"kolicon-plus"),i}entry(n,e,t,i,o){var a;const l="string"==typeof t._icons?t._icons:"string"==typeof(null===(a=t._icons)||void 0===a?void 0:a.left)?t._icons.left:void 0,s=this.buildIconObject(n&&e,i,l);return index.h("div",{class:"kol-nav__entry-wrapper"},entryIsLink(t)?index.h(componentNames.KolLinkWcTag,Object.assign({class:clsx.clsx("kol-nav__entry kol-nav__entry--link",{"kol-nav__entry--collapsible":n})},t,{_hideLabel:this.state._hideLabel,_icons:s,_ariaControls:n&&e&&i?o:void 0,_ariaExpanded:n&&e?i:void 0})):index.h(componentNames.KolButtonWcTag,{class:clsx.clsx("kol-nav__entry kol-nav__entry--button",{"kol-nav__entry--collapsible":n}),_label:t._label,_hideLabel:this.state._hideLabel,_icons:s,_ariaControls:n&&e&&i?o:void 0,_ariaExpanded:n&&e?i:void 0,_on:{onClick:(n,e)=>{entryIsButton(t)&&"function"==typeof t._on.onClick&&t._on.onClick(n,e),this.handleToggleExpansionClick(t._children)}}}))}li(n,e,t,i,o){const a=!!i._active,l=Array.isArray(i._children)&&i._children.length>0,s=Boolean(i._children&&this.state._expandedChildren.includes(i._children)),r=o+"_"+e+"_"+t;return index.h("li",{class:clsx.clsx("kol-nav__list-item",{"kol-nav__list-item--active":a,"kol-nav__list-item--expanded":s,"kol-nav__list-item--has-children":l}),key:t},this.entry(n,l,i,s,r),s&&index.h(this.linkList,{collapsible:n,deep:e+1,links:i._children||[],id:r}))}initializeExpandedChildren(){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[]});const n=e=>{if(e._active)return e._children&&this.expandChildren(e._children),!0;if(e._children)for(const t of e._children)if(n(t))return this.expandChildren(e._children),!0;return!1};this.state._links.forEach(n)}render(){const n=!0===this.state._collapsible;return index.h("div",{key:"c1700bec53b26e42211871e3d525ef00cf1dd618",class:clsx.clsx("kol-nav",{"kol-nav--is-compact":this.state._hideLabel})},index.h("nav",{key:"1a3128937f3fec152978fb8f7ce80ef504a30408","aria-label":this.state._label,class:"kol-nav__navigation",id:this.navId},index.h(this.linkList,{key:"a5a465f49f1f466124386c437fc20d736813ecc8",collapsible:n,deep:0,links:this.state._links,id:this.listId})),this.state._hasCompactButton&&index.h("div",{key:"34c29991127a3fde4855cf9a5d8cef559c7781fe",class:"kol-nav__compact"},index.h(componentNames.KolButtonWcTag,{key:"4673a9a316306643aac69e9bd025fd85e899c7e6",class:"kol-nav__toggle-button",_ariaControls:this.navId,_ariaExpanded:!this.state._hideLabel,_icons:this.state._hideLabel?"kolicon-chevron-right":"kolicon-chevron-left",_hideLabel:!0,_label:i18n.translate(this.state._hideLabel?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!this.state._hideLabel})}},_tooltipAlign:"right"})))}validateCollapsible(n){validateCollapsible(this,n)}validateHasCompactButton(n){validateHasCompactButton(this,n)}validateHasIconsWhenExpanded(n){validateHasIconsWhenExpanded(this,n)}validateHideLabel(n){hideLabel.validateHideLabel(this,n)}validateLabel(n,e,t=!1){t||uniqueNavLabels.removeNavLabel(this.state._label),label.validateLabel(this,n,{required:!0}),common.a11yHintLabelingLandmarks(n),uniqueNavLabels.addNavLabel(this.state._label)}validateLinks(n){validation.watchNavLinks("KolNav",this,n),common.devHint("[KolNav] The navigation structure is not yet validated recursively."),this.initializeExpandedChildren()}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.initializeExpandedChildren()}disconnectedCallback(){uniqueNavLabels.removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"]}}};KolNav.style={default:defaultStyleCss},exports.kol_nav=KolNav;
+"use strict";var index=require("./index-Dph1AncT.js"),common=require("./common-CyOOsddt.js"),hideLabel=require("./hide-label-D5C7_wBP.js"),label=require("./label-BpdiumjJ.js"),componentNames=require("./component-names-5KS_pYRF.js"),i18n=require("./i18n-DevJo9yF.js"),clsx=require("./clsx-Bm_HQUnh.js"),dev_utils=require("./dev.utils-ciOZUMnv.js"),uniqueNavLabels=require("./unique-nav-labels-DJBlAxpe.js"),validation=require("./validation-CJn2v37b.js");require("./i18n-CgUN6lev.js");const validateCollapsible=(n,e)=>{common.watchBoolean(n,"_collapsible",e)},validateHasCompactButton=(n,e)=>{common.watchBoolean(n,"_hasCompactButton",e)},validateHasIconsWhenExpanded=(n,e)=>{common.watchBoolean(n,"_hasIconsWhenExpanded",e)},defaultStyleCss='/* 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@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775135018085"); /* IE9*/\n  src: url("kolicons.eot?t=1775135018085#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775135018085") format("woff2"), url("kolicons.woff?t=1775135018085") format("woff"), url("kolicons.ttf?t=1775135018085") format("truetype"), url("kolicons.svg?t=1775135018085#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  .kol-nav {\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__navigation .kol-span {\n    width: 100%;\n    justify-content: flex-start;\n  }\n  .kol-nav__navigation .kol-span__container {\n    width: 100%;\n  }\n  .kol-nav__navigation .kol-span__container .kol-span__label {\n    flex: 1;\n  }\n  .kol-nav__list {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    flex-direction: column;\n    list-style: none;\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-button {\n    text-align: left;\n  }\n}',entryIsLink=n=>"string"==typeof n._href,entryIsButton=n=>{var e;return void 0===n._href&&"function"==typeof(null===(e=n._on)||void 0===e?void 0:e.onClick)},KolNav=class{constructor(n){index.registerInstance(this,n),this.navId="kol-nav-"+dev_utils.nonce(),this.listId=this.navId+"-list",this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>index.h("ul",{class:clsx.clsx("kol-nav__list",{"kol-nav__list--nested":n.deep>0,"kol-nav__list--vertical":0!==n.deep}),id:n.deep>0?n.id:void 0},n.links.map((e,t)=>this.li(n.collapsible,n.deep,t,e,n.id))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_expandedChildren:[]}}expandChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,n]})}collapseChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter(e=>e!==n)})}buildIconObject(n,e,t){const i={left:"",right:""};return this.state._hasIconsWhenExpanded&&t&&(i.left=t),this.state._hideLabel&&(i.left=t||"kolicon-link"),n&&(i.right=e?"kolicon-minus":"kolicon-plus"),i}entry(n,e,t,i,o){var a;const l="string"==typeof t._icons?t._icons:"string"==typeof(null===(a=t._icons)||void 0===a?void 0:a.left)?t._icons.left:void 0,s=this.buildIconObject(n&&e,i,l);return index.h("div",{class:"kol-nav__entry-wrapper"},entryIsLink(t)?index.h(componentNames.KolLinkWcTag,Object.assign({class:clsx.clsx("kol-nav__entry kol-nav__entry--link",{"kol-nav__entry--collapsible":n})},t,{_hideLabel:this.state._hideLabel,_icons:s,_ariaControls:n&&e&&i?o:void 0,_ariaExpanded:n&&e?i:void 0})):index.h(componentNames.KolButtonWcTag,{class:clsx.clsx("kol-nav__entry kol-nav__entry--button",{"kol-nav__entry--collapsible":n}),_label:t._label,_hideLabel:this.state._hideLabel,_icons:s,_ariaControls:n&&e&&i?o:void 0,_ariaExpanded:n&&e?i:void 0,_on:{onClick:(n,e)=>{entryIsButton(t)&&"function"==typeof t._on.onClick&&t._on.onClick(n,e),this.handleToggleExpansionClick(t._children)}}}))}li(n,e,t,i,o){const a=!!i._active,l=Array.isArray(i._children)&&i._children.length>0,s=Boolean(i._children&&this.state._expandedChildren.includes(i._children)),r=o+"_"+e+"_"+t;return index.h("li",{class:clsx.clsx("kol-nav__list-item",{"kol-nav__list-item--active":a,"kol-nav__list-item--expanded":s,"kol-nav__list-item--has-children":l}),key:t},this.entry(n,l,i,s,r),s&&index.h(this.linkList,{collapsible:n,deep:e+1,links:i._children||[],id:r}))}initializeExpandedChildren(){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[]});const n=e=>{if(e._active)return e._children&&this.expandChildren(e._children),!0;if(e._children)for(const t of e._children)if(n(t))return this.expandChildren(e._children),!0;return!1};this.state._links.forEach(n)}render(){const n=!0===this.state._collapsible;return index.h("div",{key:"c1700bec53b26e42211871e3d525ef00cf1dd618",class:clsx.clsx("kol-nav",{"kol-nav--is-compact":this.state._hideLabel})},index.h("nav",{key:"1a3128937f3fec152978fb8f7ce80ef504a30408","aria-label":this.state._label,class:"kol-nav__navigation",id:this.navId},index.h(this.linkList,{key:"a5a465f49f1f466124386c437fc20d736813ecc8",collapsible:n,deep:0,links:this.state._links,id:this.listId})),this.state._hasCompactButton&&index.h("div",{key:"34c29991127a3fde4855cf9a5d8cef559c7781fe",class:"kol-nav__compact"},index.h(componentNames.KolButtonWcTag,{key:"4673a9a316306643aac69e9bd025fd85e899c7e6",class:"kol-nav__toggle-button",_ariaControls:this.navId,_ariaExpanded:!this.state._hideLabel,_icons:this.state._hideLabel?"kolicon-chevron-right":"kolicon-chevron-left",_hideLabel:!0,_label:i18n.translate(this.state._hideLabel?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!this.state._hideLabel})}},_tooltipAlign:"right"})))}validateCollapsible(n){validateCollapsible(this,n)}validateHasCompactButton(n){validateHasCompactButton(this,n)}validateHasIconsWhenExpanded(n){validateHasIconsWhenExpanded(this,n)}validateHideLabel(n){hideLabel.validateHideLabel(this,n)}validateLabel(n,e,t=!1){t||uniqueNavLabels.removeNavLabel(this.state._label),label.validateLabel(this,n,{required:!0}),common.a11yHintLabelingLandmarks(n),uniqueNavLabels.addNavLabel(this.state._label)}validateLinks(n){validation.watchNavLinks("KolNav",this,n),common.devHint("[KolNav] The navigation structure is not yet validated recursively."),this.initializeExpandedChildren()}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.initializeExpandedChildren()}disconnectedCallback(){uniqueNavLabels.removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"]}}};KolNav.style={default:defaultStyleCss},exports.kol_nav=KolNav;

package/dist/cjs/kol-pagination-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-DAruRs4C.js"),common=require("./common-CyOOsddt.js"),customClass=require("./custom-class-DKbltqfW.js"),label=require("./label-BpdiumjJ.js"),tooltipAlign=require("./tooltip-align-BB5EsHsG.js"),componentNames=require("./component-names-5KS_pYRF.js"),i18n=require("./i18n-DevJo9yF.js"),dev_utils=require("./dev.utils-Dm-X_NQd.js"),events=require("./events-Cd8febUV.js"),uniqueNavLabels=require("./unique-nav-labels-DJBlAxpe.js");require("./align-DLZnj4_m.js"),require("./i18n-CgUN6lev.js");const validateMax=(t,e,a)=>{common.watchNumber(t,"_max",e,a)},leftDoubleArrowIcon={left:"kolicon-chevron-double-left"},leftSingleArrow={left:"kolicon-chevron-left"},rightSingleArrowIcon={right:"kolicon-chevron-right"},rightDoubleArrowIcon={right:"kolicon-chevron-double-right"};function getUserLanguage(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}const userLanguage=getUserLanguage(),NUMBER_FORMATTER=new Intl.NumberFormat(userLanguage,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),KolPaginationWc=class{constructor(t){index.registerInstance(this,t),this.translatePageFirst=i18n.translate("kol-page-first"),this.translatePageBack=i18n.translate("kol-page-back"),this.translatePageNext=i18n.translate("kol-page-next"),this.translatePageLast=i18n.translate("kol-page-last"),this.translateEntriesPerSite=i18n.translate("kol-entries-per-site"),this.translatePage=i18n.translate("kol-page"),this.translatePagination=i18n.translate("kol-pagination"),this.calcCount=(t,e=1)=>Math.ceil(t/e),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this._boundaryCount=1,this._hasButtons=!0,this._pageSize=1,this._pageSizeOptions=[],this._siblingCount=1,this._tooltipAlign="top",this.state={_boundaryCount:1,_label:this.translatePagination,_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0},this.onClick=(t,e)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,e),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.click,e),this.onChangePage(t,e)},this.onChangePage=(t,e)=>{const a=setTimeout(()=>{clearTimeout(a),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,e),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.changePage,e)})},this.onChangePageSize=(t,e)=>{if("number"==typeof(e=parseInt(e))&&e>0&&this._pageSize!==e){this._pageSize=e;const a=setTimeout(()=>{clearTimeout(a),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.changePageSize,this._pageSize)})}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,e)=>{let a=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;const s=e.has("_pageSizeOptions")?e.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(s)&&s.length>0){const t=s.find(t=>t.value===a);a=void 0===t?s[0].value:t.value,e.set("_pageSize",a)}const i=e.has("_page")?e.get("_page"):this.state._page,n=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,i,e.get("_pageSize"),n)},this.syncPage=(t,e,a,s)=>{if(s>0){const i=this.calcCount(s,a);i>0&&(e>i?(t.set("_page",i),this.onChangePage(common.STATE_CHANGE_EVENT,i)):e<1&&(t.set("_page",1),this.onChangePage(common.STATE_CHANGE_EVENT,1)))}},this.beforePageSizeOptions=(t,e)=>{const a=[];if(Array.isArray(t))for(const e of t)"number"==typeof e&&a.push({label:`${e}`,value:e});e.set("_pageSizeOptions",a),this.beforePageSize(a,e)}}getPageStart(){return(this.state._page-1)*this.state._pageSize+1+""}getPageEnd(){return this.state._page*this.state._pageSize+""}render(){var t;let e=!1;const a=this.getCount(),s=Array.from(Array(a).keys()).map(t=>t+1).map(t=>t<=this.state._boundaryCount||t>a-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(e=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===e?(e=!1,index.h("li",{key:dev_utils.nonce()},index.h("span",{class:"kol-pagination__separator","aria-hidden":"true"}))):null);return index.h(index.Host,{class:"kol-pagination"},index.h("span",{role:"status","aria-live":"polite",class:"kol-pagination__entries"},i18n.translate("kol-table-visible-range",{placeholders:{start:this.getPageStart(),end:this.getPageEnd(),total:this.state._max.toString()}})),index.h("nav",{class:"kol-pagination__navigation","aria-label":this.state._label},index.h("ul",{class:"kol-pagination__navigation-list"},this.state._hasButtons.first&&index.h("li",null,index.h(componentNames.KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--first",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:leftDoubleArrowIcon,_hideLabel:!0,_label:this.translatePageFirst,_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&index.h("li",null,index.h(componentNames.KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--previous",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:leftSingleArrow,_hideLabel:!0,_label:this.translatePageBack,_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),s,this.state._hasButtons.next&&index.h("li",null,index.h(componentNames.KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--next",_customClass:this.state._customClass,_disabled:a<=this.state._page,_icons:rightSingleArrowIcon,_hideLabel:!0,_label:this.translatePageNext,_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&index.h("li",null,index.h(componentNames.KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--last",_customClass:this.state._customClass,_disabled:a<=this.state._page,_icons:rightDoubleArrowIcon,_hideLabel:!0,_label:this.translatePageLast,_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&index.h("div",{class:"page-size"},index.h(componentNames.KolSelectWcTag,{class:"kol-pagination__page-size-select",_label:this.translateEntriesPerSite,_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:this.state._pageSize})))}getUnselectedPageButton(t){const e=NUMBER_FORMATTER.format(t),a=`${this.translatePage} ${e}`;return index.h("li",{key:dev_utils.nonce()},index.h(componentNames.KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--numbers",_ariaDescription:a,_customClass:this.state._customClass,_label:e,_on:{onClick:e=>{this.onClick(e,t)}}}))}getSelectedPageButton(t){const e=NUMBER_FORMATTER.format(t),a=`${this.translatePage} ${e}`;return index.h("li",{key:dev_utils.nonce()},index.h(componentNames.KolButtonWcTag,{"aria-current":"page",class:"kol-pagination__button kol-pagination__button--selected selected",_ariaDescription:a,_customClass:this.state._customClass,_disabled:!0,_label:e}))}validateBoundaryCount(t){common.watchNumber(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){customClass.validateCustomClass(this,t)}validateLabel(t,e,a=!1){a||uniqueNavLabels.removeNavLabel(this.state._label),label.validateLabel(this,t),uniqueNavLabels.addNavLabel(this.state._label)}validateHasButtons(t){common.watchValidator(this,"_hasButtons",t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t,new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,e)=>{if("boolean"==typeof t)e.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=common.parseJson(t)}catch(t){e.delete("_hasButtons")}"object"==typeof t&&null!==t&&e.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){common.watchNumber(this,"_page",t,{hooks:{beforePatch:(t,e)=>{const a=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize,s=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,t,a,s)}}})}validatePageSize(t){common.watchNumber(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){common.watchJsonArrayString(this,"_pageSizeOptions",t=>"number"==typeof t,t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){common.watchNumber(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){validateMax(this,t,{hooks:{beforePatch:(t,e)=>{const a=e.has("_page")?e.get("_page"):this.state._page,s=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;this.syncPage(e,a,s,t)}}})}validateTooltipAlign(t){tooltipAlign.validateTooltipAlign(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){uniqueNavLabels.removeNavLabel(this.state._label)}get host(){return index.getElement(this)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}};exports.kol_pagination_wc=KolPaginationWc;
+"use strict";var index=require("./index-Dph1AncT.js"),common=require("./common-CyOOsddt.js"),customClass=require("./custom-class-DKbltqfW.js"),label=require("./label-BpdiumjJ.js"),tooltipAlign=require("./tooltip-align-BB5EsHsG.js"),componentNames=require("./component-names-5KS_pYRF.js"),i18n=require("./i18n-DevJo9yF.js"),dev_utils=require("./dev.utils-ciOZUMnv.js"),events=require("./events-Cd8febUV.js"),uniqueNavLabels=require("./unique-nav-labels-DJBlAxpe.js");require("./align-DLZnj4_m.js"),require("./i18n-CgUN6lev.js");const validateMax=(t,e,a)=>{common.watchNumber(t,"_max",e,a)},leftDoubleArrowIcon={left:"kolicon-chevron-double-left"},leftSingleArrow={left:"kolicon-chevron-left"},rightSingleArrowIcon={right:"kolicon-chevron-right"},rightDoubleArrowIcon={right:"kolicon-chevron-double-right"};function getUserLanguage(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}const userLanguage=getUserLanguage(),NUMBER_FORMATTER=new Intl.NumberFormat(userLanguage,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),KolPaginationWc=class{constructor(t){index.registerInstance(this,t),this.translatePageFirst=i18n.translate("kol-page-first"),this.translatePageBack=i18n.translate("kol-page-back"),this.translatePageNext=i18n.translate("kol-page-next"),this.translatePageLast=i18n.translate("kol-page-last"),this.translateEntriesPerSite=i18n.translate("kol-entries-per-site"),this.translatePage=i18n.translate("kol-page"),this.translatePagination=i18n.translate("kol-pagination"),this.calcCount=(t,e=1)=>Math.ceil(t/e),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this._boundaryCount=1,this._hasButtons=!0,this._pageSize=1,this._pageSizeOptions=[],this._siblingCount=1,this._tooltipAlign="top",this.state={_boundaryCount:1,_label:this.translatePagination,_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0},this.onClick=(t,e)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,e),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.click,e),this.onChangePage(t,e)},this.onChangePage=(t,e)=>{const a=setTimeout(()=>{clearTimeout(a),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,e),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.changePage,e)})},this.onChangePageSize=(t,e)=>{if("number"==typeof(e=parseInt(e))&&e>0&&this._pageSize!==e){this._pageSize=e;const a=setTimeout(()=>{clearTimeout(a),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.changePageSize,this._pageSize)})}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,e)=>{let a=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;const s=e.has("_pageSizeOptions")?e.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(s)&&s.length>0){const t=s.find(t=>t.value===a);a=void 0===t?s[0].value:t.value,e.set("_pageSize",a)}const i=e.has("_page")?e.get("_page"):this.state._page,n=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,i,e.get("_pageSize"),n)},this.syncPage=(t,e,a,s)=>{if(s>0){const i=this.calcCount(s,a);i>0&&(e>i?(t.set("_page",i),this.onChangePage(common.STATE_CHANGE_EVENT,i)):e<1&&(t.set("_page",1),this.onChangePage(common.STATE_CHANGE_EVENT,1)))}},this.beforePageSizeOptions=(t,e)=>{const a=[];if(Array.isArray(t))for(const e of t)"number"==typeof e&&a.push({label:`${e}`,value:e});e.set("_pageSizeOptions",a),this.beforePageSize(a,e)}}getPageStart(){return(this.state._page-1)*this.state._pageSize+1+""}getPageEnd(){return this.state._page*this.state._pageSize+""}render(){var t;let e=!1;const a=this.getCount(),s=Array.from(Array(a).keys()).map(t=>t+1).map(t=>t<=this.state._boundaryCount||t>a-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(e=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===e?(e=!1,index.h("li",{key:dev_utils.nonce()},index.h("span",{class:"kol-pagination__separator","aria-hidden":"true"}))):null);return index.h(index.Host,{class:"kol-pagination"},index.h("span",{role:"status","aria-live":"polite",class:"kol-pagination__entries"},i18n.translate("kol-table-visible-range",{placeholders:{start:this.getPageStart(),end:this.getPageEnd(),total:this.state._max.toString()}})),index.h("nav",{class:"kol-pagination__navigation","aria-label":this.state._label},index.h("ul",{class:"kol-pagination__navigation-list"},this.state._hasButtons.first&&index.h("li",null,index.h(componentNames.KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--first",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:leftDoubleArrowIcon,_hideLabel:!0,_label:this.translatePageFirst,_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&index.h("li",null,index.h(componentNames.KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--previous",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:leftSingleArrow,_hideLabel:!0,_label:this.translatePageBack,_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),s,this.state._hasButtons.next&&index.h("li",null,index.h(componentNames.KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--next",_customClass:this.state._customClass,_disabled:a<=this.state._page,_icons:rightSingleArrowIcon,_hideLabel:!0,_label:this.translatePageNext,_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&index.h("li",null,index.h(componentNames.KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--last",_customClass:this.state._customClass,_disabled:a<=this.state._page,_icons:rightDoubleArrowIcon,_hideLabel:!0,_label:this.translatePageLast,_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&index.h("div",{class:"page-size"},index.h(componentNames.KolSelectWcTag,{class:"kol-pagination__page-size-select",_label:this.translateEntriesPerSite,_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:this.state._pageSize})))}getUnselectedPageButton(t){const e=NUMBER_FORMATTER.format(t),a=`${this.translatePage} ${e}`;return index.h("li",{key:dev_utils.nonce()},index.h(componentNames.KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--numbers",_ariaDescription:a,_customClass:this.state._customClass,_label:e,_on:{onClick:e=>{this.onClick(e,t)}}}))}getSelectedPageButton(t){const e=NUMBER_FORMATTER.format(t),a=`${this.translatePage} ${e}`;return index.h("li",{key:dev_utils.nonce()},index.h(componentNames.KolButtonWcTag,{"aria-current":"page",class:"kol-pagination__button kol-pagination__button--selected selected",_ariaDescription:a,_customClass:this.state._customClass,_disabled:!0,_label:e}))}validateBoundaryCount(t){common.watchNumber(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){customClass.validateCustomClass(this,t)}validateLabel(t,e,a=!1){a||uniqueNavLabels.removeNavLabel(this.state._label),label.validateLabel(this,t),uniqueNavLabels.addNavLabel(this.state._label)}validateHasButtons(t){common.watchValidator(this,"_hasButtons",t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t,new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,e)=>{if("boolean"==typeof t)e.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=common.parseJson(t)}catch(t){e.delete("_hasButtons")}"object"==typeof t&&null!==t&&e.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){common.watchNumber(this,"_page",t,{hooks:{beforePatch:(t,e)=>{const a=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize,s=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,t,a,s)}}})}validatePageSize(t){common.watchNumber(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){common.watchJsonArrayString(this,"_pageSizeOptions",t=>"number"==typeof t,t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){common.watchNumber(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){validateMax(this,t,{hooks:{beforePatch:(t,e)=>{const a=e.has("_page")?e.get("_page"):this.state._page,s=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;this.syncPage(e,a,s,t)}}})}validateTooltipAlign(t){tooltipAlign.validateTooltipAlign(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){uniqueNavLabels.removeNavLabel(this.state._label)}get host(){return index.getElement(this)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}};exports.kol_pagination_wc=KolPaginationWc;

package/dist/cjs/kol-pagination.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-DAruRs4C.js"),componentNames=require("./component-names-5KS_pYRF.js");require("./common-CyOOsddt.js");const defaultStyleCss='@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@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775124354743"); /* IE9*/\n  src: url("kolicons.eot?t=1775124354743#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775124354743") format("woff2"), url("kolicons.woff?t=1775124354743") format("woff"), url("kolicons.ttf?t=1775124354743") format("truetype"), url("kolicons.svg?t=1775124354743#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  :host {\n    display: block;\n  }\n}\n@layer kol-component {\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  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: "✓ ";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\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-pagination {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    container: paging/inline-size;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: "•••";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\n  }\n  @container paging (width < 600px) {\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n      display: none;\n    }\n  }\n}',KolPagination=class{constructor(n){index.registerInstance(this,n),this._boundaryCount=1,this._hasButtons=!0,this._pageSize=1,this._pageSizeOptions=[],this._siblingCount=1,this._tooltipAlign="top"}render(){return index.h(componentNames.KolPaginationWcTag,{key:"30a11ebf44cb4a4bb32c9ba95dfd0c156bbe406d",_boundaryCount:this._boundaryCount,_label:this._label,_customClass:this._customClass,_on:this._on,_hasButtons:this._hasButtons,_page:this._page,_pageSize:this._pageSize,_pageSizeOptions:this._pageSizeOptions,_siblingCount:this._siblingCount,_tooltipAlign:this._tooltipAlign,_max:this._max})}};KolPagination.style={default:defaultStyleCss},exports.kol_pagination=KolPagination;
+"use strict";var index=require("./index-Dph1AncT.js"),componentNames=require("./component-names-5KS_pYRF.js");require("./common-CyOOsddt.js");const defaultStyleCss='@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@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775135018085"); /* IE9*/\n  src: url("kolicons.eot?t=1775135018085#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775135018085") format("woff2"), url("kolicons.woff?t=1775135018085") format("woff"), url("kolicons.ttf?t=1775135018085") format("truetype"), url("kolicons.svg?t=1775135018085#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  :host {\n    display: block;\n  }\n}\n@layer kol-component {\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  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: "✓ ";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\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-pagination {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    container: paging/inline-size;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: "•••";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\n  }\n  @container paging (width < 600px) {\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n      display: none;\n    }\n  }\n}',KolPagination=class{constructor(n){index.registerInstance(this,n),this._boundaryCount=1,this._hasButtons=!0,this._pageSize=1,this._pageSizeOptions=[],this._siblingCount=1,this._tooltipAlign="top"}render(){return index.h(componentNames.KolPaginationWcTag,{key:"30a11ebf44cb4a4bb32c9ba95dfd0c156bbe406d",_boundaryCount:this._boundaryCount,_label:this._label,_customClass:this._customClass,_on:this._on,_hasButtons:this._hasButtons,_page:this._page,_pageSize:this._pageSize,_pageSizeOptions:this._pageSizeOptions,_siblingCount:this._siblingCount,_tooltipAlign:this._tooltipAlign,_max:this._max})}};KolPagination.style={default:defaultStyleCss},exports.kol_pagination=KolPagination;

package/dist/cjs/kol-popover-button-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-DAruRs4C.js"),componentNames=require("./component-names-5KS_pYRF.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),clsx=require("./clsx-Bm_HQUnh.js"),alignFloatingElements=require("./align-floating-elements-DUp-he6s.js");require("./common-CyOOsddt.js");var inline=require("./inline-B7iAl0VU.js"),align=require("./align-DLZnj4_m.js"),dev_utils=require("./dev.utils-Dm-X_NQd.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js");const validatePopoverAlign=(e,t)=>{align.validateAlignment(e,"_popoverAlign",t)},PopoverFC=e=>{const{align:t="bottom",popoverRef:o,arrowRef:i,class:s}=e,n=tslib_es6.__rest(e,["align","popoverRef","arrowRef","class"]);return index.h("div",Object.assign({},n,{class:clsx.clsx("kol-popover",s),ref:o,popover:"auto"}),index.h("div",{class:clsx.clsx("kol-popover__arrow",`kol-popover__arrow--${t}`),ref:i}),index.h("slot",null))};class PopoverController{constructor(){this.show=!1,this.align="bottom",this.setPopoverElementRef=e=>{this.popoverElement=e,this.arrowElement=null==e?void 0:e.querySelector(".kol-popover__arrow")},this.setTriggerElement=e=>{this.triggerElement=e},this.setAlign=e=>{this.align=e},this.alignPopover=async()=>{this.popoverElement&&this.triggerElement&&await alignFloatingElements.alignFloatingElements({align:this.align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement})},this.setupAutoUpdate=()=>{this.popoverElement&&this.triggerElement&&!this.cleanupAutoUpdate&&(this.cleanupAutoUpdate=alignFloatingElements.autoUpdate(this.triggerElement,this.popoverElement,()=>{this.alignPopover()}))}}setShow(e){if(this.show=e,!this.popoverElement)return;const t=()=>{var e;if(!this.popoverElement)return;const t=this.popoverElement.matches(":popover-open");if(this.show){if(!t)try{this.popoverElement.showPopover(),this.setupAutoUpdate(),this.alignPopover()}catch(e){}}else if(t)try{this.popoverElement.hidePopover(),null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.cleanupAutoUpdate=void 0}catch(e){}};this.popoverElement.isConnected?t():requestAnimationFrame(()=>{t()})}destroy(){var e;null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.cleanupAutoUpdate=void 0,this.popoverElement=void 0,this.arrowElement=void 0,this.triggerElement=void 0}}const KolPopoverButtonWc=class{constructor(e){index.registerInstance(this,e),this.popoverCtrl=new PopoverController,this.popoverId=`popover-${dev_utils.nonce()}`,this.setPopoverElementRef=e=>{this.popoverElement=e,this.popoverCtrl.setPopoverElementRef(e)},this.setButtonElementRef=e=>{this.refButton=e,e&&this.popoverCtrl.setTriggerElement(e)},this.on={onClick:()=>{this.popoverCtrl.setShow(!this.popoverOpen)}},this.state={_label:"",_popoverAlign:"bottom",_inline:!1},this.popoverOpen=!1,this.handleToggle=e=>{this.popoverOpen="open"===e.newState},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){this.popoverCtrl.setShow(!1)}async showPopover(){this.popoverCtrl.setShow(!0)}async focus(){return elementFocus.setFocus(this.refButton)}async click(){return elementClick.setClick(this.refButton)}render(){return index.h(index.Fragment,null,index.h(componentNames.KolButtonWcTag,{key:"17ed80f521a13276600c48b716f51b8ccbf986ba",class:clsx.clsx("kol-popover-button",{"kol-popover-button--open":this.popoverOpen,"kol-popover-button--inline":!0===this.state._inline,"kol-popover-button--standalone":!1===this.state._inline}),_accessKey:this._accessKey,_ariaControls:this.popoverId,_ariaDescription:this._ariaDescription,_ariaExpanded:this.popoverOpen,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_inline:this._inline,_label:this._label,_name:this._name,_on:this.on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant,ref:this.setButtonElementRef},index.h("slot",{key:"49e2ea1cc4bbb5148344f30042d2faca053147fa",name:"expert",slot:"expert"})),index.h(PopoverFC,{key:"ee7f7762598b2862e180aeaf292b5ee519539587",align:this.state._popoverAlign||"bottom",popoverRef:this.setPopoverElementRef,class:"kol-popover-button__popover",id:this.popoverId},index.h("slot",{key:"2a0d85c0f994fa2e8cdd04e11c83943145faa4b8"})))}validateInline(e){inline.validateInline(this,e,{defaultValue:!1})}validatePopoverAlign(e){validatePopoverAlign(this,e),e&&this.popoverCtrl.setAlign(e)}componentWillLoad(){this.validateInline(this._inline),this.validatePopoverAlign(this._popoverAlign)}componentDidRender(){this.popoverElement&&this.popoverElement.addEventListener("toggle",this.handleToggle),this.state._popoverAlign&&this.popoverCtrl.setAlign(this.state._popoverAlign)}disconnectedCallback(){this.popoverElement&&this.popoverElement.removeEventListener("toggle",this.handleToggle),this.popoverCtrl.destroy(),this.popoverElement=void 0}static get watchers(){return{_inline:["validateInline"],_popoverAlign:["validatePopoverAlign"]}}};exports.kol_popover_button_wc=KolPopoverButtonWc;
+"use strict";var index=require("./index-Dph1AncT.js"),componentNames=require("./component-names-5KS_pYRF.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),clsx=require("./clsx-Bm_HQUnh.js"),alignFloatingElements=require("./align-floating-elements-DUp-he6s.js");require("./common-CyOOsddt.js");var inline=require("./inline-B7iAl0VU.js"),align=require("./align-DLZnj4_m.js"),dev_utils=require("./dev.utils-ciOZUMnv.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js");const validatePopoverAlign=(e,t)=>{align.validateAlignment(e,"_popoverAlign",t)},PopoverFC=e=>{const{align:t="bottom",popoverRef:o,arrowRef:i,class:s}=e,n=tslib_es6.__rest(e,["align","popoverRef","arrowRef","class"]);return index.h("div",Object.assign({},n,{class:clsx.clsx("kol-popover",s),ref:o,popover:"auto"}),index.h("div",{class:clsx.clsx("kol-popover__arrow",`kol-popover__arrow--${t}`),ref:i}),index.h("slot",null))};class PopoverController{constructor(){this.show=!1,this.align="bottom",this.setPopoverElementRef=e=>{this.popoverElement=e,this.arrowElement=null==e?void 0:e.querySelector(".kol-popover__arrow")},this.setTriggerElement=e=>{this.triggerElement=e},this.setAlign=e=>{this.align=e},this.alignPopover=async()=>{this.popoverElement&&this.triggerElement&&await alignFloatingElements.alignFloatingElements({align:this.align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement})},this.setupAutoUpdate=()=>{this.popoverElement&&this.triggerElement&&!this.cleanupAutoUpdate&&(this.cleanupAutoUpdate=alignFloatingElements.autoUpdate(this.triggerElement,this.popoverElement,()=>{this.alignPopover()}))}}setShow(e){if(this.show=e,!this.popoverElement)return;const t=()=>{var e;if(!this.popoverElement)return;const t=this.popoverElement.matches(":popover-open");if(this.show){if(!t)try{this.popoverElement.showPopover(),this.setupAutoUpdate(),this.alignPopover()}catch(e){}}else if(t)try{this.popoverElement.hidePopover(),null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.cleanupAutoUpdate=void 0}catch(e){}};this.popoverElement.isConnected?t():requestAnimationFrame(()=>{t()})}destroy(){var e;null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.cleanupAutoUpdate=void 0,this.popoverElement=void 0,this.arrowElement=void 0,this.triggerElement=void 0}}const KolPopoverButtonWc=class{constructor(e){index.registerInstance(this,e),this.popoverCtrl=new PopoverController,this.popoverId=`popover-${dev_utils.nonce()}`,this.setPopoverElementRef=e=>{this.popoverElement=e,this.popoverCtrl.setPopoverElementRef(e)},this.setButtonElementRef=e=>{this.refButton=e,e&&this.popoverCtrl.setTriggerElement(e)},this.on={onClick:()=>{this.popoverCtrl.setShow(!this.popoverOpen)}},this.state={_label:"",_popoverAlign:"bottom",_inline:!1},this.popoverOpen=!1,this.handleToggle=e=>{this.popoverOpen="open"===e.newState},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){this.popoverCtrl.setShow(!1)}async showPopover(){this.popoverCtrl.setShow(!0)}async focus(){return elementFocus.setFocus(this.refButton)}async click(){return elementClick.setClick(this.refButton)}render(){return index.h(index.Fragment,null,index.h(componentNames.KolButtonWcTag,{key:"17ed80f521a13276600c48b716f51b8ccbf986ba",class:clsx.clsx("kol-popover-button",{"kol-popover-button--open":this.popoverOpen,"kol-popover-button--inline":!0===this.state._inline,"kol-popover-button--standalone":!1===this.state._inline}),_accessKey:this._accessKey,_ariaControls:this.popoverId,_ariaDescription:this._ariaDescription,_ariaExpanded:this.popoverOpen,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_inline:this._inline,_label:this._label,_name:this._name,_on:this.on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant,ref:this.setButtonElementRef},index.h("slot",{key:"49e2ea1cc4bbb5148344f30042d2faca053147fa",name:"expert",slot:"expert"})),index.h(PopoverFC,{key:"ee7f7762598b2862e180aeaf292b5ee519539587",align:this.state._popoverAlign||"bottom",popoverRef:this.setPopoverElementRef,class:"kol-popover-button__popover",id:this.popoverId},index.h("slot",{key:"2a0d85c0f994fa2e8cdd04e11c83943145faa4b8"})))}validateInline(e){inline.validateInline(this,e,{defaultValue:!1})}validatePopoverAlign(e){validatePopoverAlign(this,e),e&&this.popoverCtrl.setAlign(e)}componentWillLoad(){this.validateInline(this._inline),this.validatePopoverAlign(this._popoverAlign)}componentDidRender(){this.popoverElement&&this.popoverElement.addEventListener("toggle",this.handleToggle),this.state._popoverAlign&&this.popoverCtrl.setAlign(this.state._popoverAlign)}disconnectedCallback(){this.popoverElement&&this.popoverElement.removeEventListener("toggle",this.handleToggle),this.popoverCtrl.destroy(),this.popoverElement=void 0}static get watchers(){return{_inline:["validateInline"],_popoverAlign:["validatePopoverAlign"]}}};exports.kol_popover_button_wc=KolPopoverButtonWc;

package/dist/cjs/kol-popover-button.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-DAruRs4C.js"),componentNames=require("./component-names-5KS_pYRF.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js");require("./common-CyOOsddt.js");const defaultStyleCss='@charset "UTF-8";\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/* 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@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775124354743"); /* IE9*/\n  src: url("kolicons.eot?t=1775124354743#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775124354743") format("woff2"), url("kolicons.woff?t=1775124354743") format("woff"), url("kolicons.ttf?t=1775124354743") format("truetype"), url("kolicons.svg?t=1775124354743#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-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-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-popover {\n    opacity: 0;\n    transition: 0.2s ease-out opacity;\n  }\n  .kol-popover-button--open + .kol-popover {\n    opacity: 1;\n  }\n  .kol-popover-button--open .kol-button__tooltip {\n    display: none;\n  }\n  .kol-popover-button--inline {\n    display: inline-block;\n  }\n  .kol-popover-button--inline .kol-button {\n    min-width: 0;\n    min-height: 1em;\n  }\n}',KolPopoverButton=class{constructor(n){index.registerInstance(this,n),this.setRef=n=>{this.ref=n},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){var n;null===(n=this.ref)||void 0===n||n.hidePopover()}async showPopover(){var n;null===(n=this.ref)||void 0===n||n.showPopover()}async click(){return elementClick.delegateClick(this.host,async()=>elementClick.setClick(this.ref))}async focus(){return elementFocus.delegateFocus(this.host,()=>elementFocus.setFocus(this.ref))}render(){return index.h(componentNames.KolPopoverButtonWcTag,{key:"570f027230cdd8838a327ce163e7b48bd7f15f74",ref:this.setRef,_accessKey:this._accessKey,_ariaDescription:this._ariaDescription,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_inline:this._inline,_label:this._label,_name:this._name,_popoverAlign:this._popoverAlign,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},index.h("slot",{key:"78152f059a109ec56a6da1b2de88294b46ff26d5",name:"expert",slot:"expert"}),index.h("slot",{key:"b8d44dcf115a7be0ce93865bc5152a4906760d62"}))}get host(){return index.getElement(this)}};KolPopoverButton.style={default:defaultStyleCss},exports.kol_popover_button=KolPopoverButton;
+"use strict";var index=require("./index-Dph1AncT.js"),componentNames=require("./component-names-5KS_pYRF.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js");require("./common-CyOOsddt.js");const defaultStyleCss='@charset "UTF-8";\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/* 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@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775135018085"); /* IE9*/\n  src: url("kolicons.eot?t=1775135018085#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775135018085") format("woff2"), url("kolicons.woff?t=1775135018085") format("woff"), url("kolicons.ttf?t=1775135018085") format("truetype"), url("kolicons.svg?t=1775135018085#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-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-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-popover {\n    opacity: 0;\n    transition: 0.2s ease-out opacity;\n  }\n  .kol-popover-button--open + .kol-popover {\n    opacity: 1;\n  }\n  .kol-popover-button--open .kol-button__tooltip {\n    display: none;\n  }\n  .kol-popover-button--inline {\n    display: inline-block;\n  }\n  .kol-popover-button--inline .kol-button {\n    min-width: 0;\n    min-height: 1em;\n  }\n}',KolPopoverButton=class{constructor(n){index.registerInstance(this,n),this.setRef=n=>{this.ref=n},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){var n;null===(n=this.ref)||void 0===n||n.hidePopover()}async showPopover(){var n;null===(n=this.ref)||void 0===n||n.showPopover()}async click(){return elementClick.delegateClick(this.host,async()=>elementClick.setClick(this.ref))}async focus(){return elementFocus.delegateFocus(this.host,()=>elementFocus.setFocus(this.ref))}render(){return index.h(componentNames.KolPopoverButtonWcTag,{key:"570f027230cdd8838a327ce163e7b48bd7f15f74",ref:this.setRef,_accessKey:this._accessKey,_ariaDescription:this._ariaDescription,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_inline:this._inline,_label:this._label,_name:this._name,_popoverAlign:this._popoverAlign,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},index.h("slot",{key:"78152f059a109ec56a6da1b2de88294b46ff26d5",name:"expert",slot:"expert"}),index.h("slot",{key:"b8d44dcf115a7be0ce93865bc5152a4906760d62"}))}get host(){return index.getElement(this)}};KolPopoverButton.style={default:defaultStyleCss},exports.kol_popover_button=KolPopoverButton;

package/dist/cjs/kol-progress.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-DAruRs4C.js"),variantQuote=require("./variant-quote-iZVwULXH.js"),i18n=require("./i18n-DevJo9yF.js");require("./common-CyOOsddt.js");var label=require("./label-B0RK7DQ1.js"),unit=require("./unit--BgFwr6T.js"),normalizers=require("./normalizers-CLRF8il-.js"),baseController=require("./base-controller-DAzsTqX9.js");require("./i18n-CgUN6lev.js"),require("./_Uint8Array-BAQUGozM.js"),require("./isArray-BOIOdEQh.js");const clampedNumberValueProp=normalizers.createDependentPropDefinition("value",0,(e,n)=>{const r=normalizers.normalizeNumber(e);return r<n.min?n.min:r>n.max?n.max:r},e=>e>=0),progressVariantOptions=["bar","cycle"],variantProgressProp=normalizers.createPropDefinition("variant","bar",e=>{const n=normalizers.normalizeString(e);if(progressVariantOptions.includes(n))return n;throw new Error(`Invalid progress variant: ${n}`)},()=>!0),FULL_CIRCLE=342,CycleSvg=({max:e,value:n})=>index.h("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},index.h("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),index.h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),index.h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(n/e*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),BarSvg=({max:e,value:n})=>{const r=n/e*100;return index.h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},index.h("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100%"}),index.h("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100%"}),index.h("rect",{class:"kol-progress__bar-progress",x:"3",y:"3",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${r}% - 4px)`}}))},createProgressSVG=(e,n,r)=>{switch(e){case"cycle":return index.h(CycleSvg,{max:n,value:r});case"bar":return index.h(BarSvg,{max:n,value:r});default:throw new Error(`Progress variant ${e} not implemented.`)}},ProgressFC=e=>{const{label:n,max:r,unit:t,value:a,variant:o,liveValue:i}=e,l="%"===t,s=l?`${Math.round(i/r*100)}`:i,c=l?Math.round(a/r*100):a,d=`${`${(l?100:r)+1}`.length}ch`,h=l?i18n.translate("kol-live-value",{placeholders:{value:String(s),unit:t}}):i18n.translate("kol-live-value-bounded",{placeholders:{value:String(s),max:String(r),unit:t}});return index.h("div",{class:"kol-progress"},index.h("div",{"aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===o,"kol-progress__bar":"bar"===o}},"bar"===o&&n&&index.h("div",{class:"kol-progress__bar-label"},n),createProgressSVG(o,r,a),"cycle"===o&&index.h("div",{class:"kol-progress__cycle-text"},n&&index.h("div",{class:"kol-progress__cycle-label"},n),index.h("div",{class:"kol-progress__cycle-value"},`${c} ${t}`)),"bar"===o&&index.h("div",{class:"kol-progress__bar-value",style:{width:d}},c),"bar"===o&&index.h("div",{class:"kol-progress__bar-unit"},t)),index.h("progress",{class:"visually-hidden","aria-busy":a<r?"true":"false",max:r,value:a}),index.h("span",{"aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},h))},progressPropsConfig={optional:[label.labelProp,unit.unitProp,variantProgressProp],required:[unit.maxProp,clampedNumberValueProp]};class ProgressController extends baseController.BaseController{constructor(e){super(e,progressPropsConfig)}componentWillLoad(e){const{label:n,max:r,unit:t,value:a,variant:o}=e;this.watchLabel(n),this.watchMax(r),this.watchUnit(t),this.watchValue(a),this.watchVariant(o),this.setState("liveValue",this.getRenderProp("value")),this.startLiveValueInterval()}watchLabel(e){label.labelProp.apply(e,e=>{this.setRenderProp("label",e)})}watchMax(e){unit.maxProp.apply(e,e=>{this.setRenderProp("max",e),this.watchValue(this.getRawProp("value"))})}watchUnit(e){unit.unitProp.apply(e,e=>{this.setRenderProp("unit",e)})}watchValue(e){this.setRawProp("value",e),clampedNumberValueProp.apply(e,e=>{this.setRenderProp("value",e)},{min:0,max:this.getRenderProp("max")})}watchVariant(e){variantProgressProp.apply(e,e=>{this.setRenderProp("variant",e)})}startLiveValueInterval(){this.interval=setInterval(()=>{const e=this.getRenderProp("value");this.setState("liveValue",e)},5e3)}destroy(){this.interval&&(clearInterval(this.interval),this.interval=void 0)}}const defaultStyleCss="/* 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  .kol-progress__bar {\n    display: grid;\n    align-items: center;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    grid-template-columns: 1fr auto;\n  }\n  .kol-progress__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-progress__bar svg {\n    grid-area: BAR;\n  }\n  .kol-progress__bar-value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-progress__bar-unit {\n    grid-area: UNIT;\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: #0075ff;\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle {\n    display: grid;\n    align-content: center;\n    justify-items: center;\n    grid-template-areas: \"ALL\";\n    grid-template-columns: auto;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: x-small;\n    text-align: center;\n  }\n  .kol-progress__cycle-text * {\n    background-color: white;\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    transform: rotate(-90deg);\n    transform-origin: 50% 50%;\n    fill: transparent;\n    stroke: #0075ff;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",KolProgress=class extends variantQuote.BaseWebComponent{constructor(e){super(),index.registerInstance(this,e),this.ctrl=new ProgressController(this.stateAccess),this.liveValue=0}watchLabel(e){this.ctrl.watchLabel(e)}watchMax(e){this.ctrl.watchMax(e)}watchUnit(e){this.ctrl.watchUnit(e)}watchValue(e){this.ctrl.watchValue(e)}watchVariant(e){this.ctrl.watchVariant(e)}componentWillLoad(){this.ctrl.componentWillLoad({label:this._label,max:this._max,unit:this._unit,value:this._value,variant:this._variant})}disconnectedCallback(){this.ctrl.destroy()}render(){return index.h(index.Host,{key:"70710a5592ba3177b7d4e657c36ee496c92fb879"},index.h(ProgressFC,{key:"19414781e2a8b8b4daa4df4ca0734afcc7507830",label:this.ctrl.getRenderProp("label"),max:this.ctrl.getRenderProp("max"),unit:this.ctrl.getRenderProp("unit"),value:this.ctrl.getRenderProp("value"),variant:this.ctrl.getRenderProp("variant"),liveValue:this.liveValue}))}static get watchers(){return{_label:["watchLabel"],_max:["watchMax"],_unit:["watchUnit"],_value:["watchValue"],_variant:["watchVariant"]}}};KolProgress.style={default:defaultStyleCss},exports.kol_progress=KolProgress;
+"use strict";var index=require("./index-Dph1AncT.js"),variantQuote=require("./variant-quote-iZVwULXH.js"),i18n=require("./i18n-DevJo9yF.js");require("./common-CyOOsddt.js");var label=require("./label-B0RK7DQ1.js"),unit=require("./unit--BgFwr6T.js"),normalizers=require("./normalizers-CLRF8il-.js"),baseController=require("./base-controller-DAzsTqX9.js");require("./i18n-CgUN6lev.js"),require("./_Uint8Array-BAQUGozM.js"),require("./isArray-BOIOdEQh.js");const clampedNumberValueProp=normalizers.createDependentPropDefinition("value",0,(e,n)=>{const r=normalizers.normalizeNumber(e);return r<n.min?n.min:r>n.max?n.max:r},e=>e>=0),progressVariantOptions=["bar","cycle"],variantProgressProp=normalizers.createPropDefinition("variant","bar",e=>{const n=normalizers.normalizeString(e);if(progressVariantOptions.includes(n))return n;throw new Error(`Invalid progress variant: ${n}`)},()=>!0),FULL_CIRCLE=342,CycleSvg=({max:e,value:n})=>index.h("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},index.h("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),index.h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),index.h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(n/e*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),BarSvg=({max:e,value:n})=>{const r=n/e*100;return index.h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},index.h("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100%"}),index.h("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100%"}),index.h("rect",{class:"kol-progress__bar-progress",x:"3",y:"3",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${r}% - 4px)`}}))},createProgressSVG=(e,n,r)=>{switch(e){case"cycle":return index.h(CycleSvg,{max:n,value:r});case"bar":return index.h(BarSvg,{max:n,value:r});default:throw new Error(`Progress variant ${e} not implemented.`)}},ProgressFC=e=>{const{label:n,max:r,unit:t,value:a,variant:o,liveValue:i}=e,l="%"===t,s=l?`${Math.round(i/r*100)}`:i,c=l?Math.round(a/r*100):a,d=`${`${(l?100:r)+1}`.length}ch`,h=l?i18n.translate("kol-live-value",{placeholders:{value:String(s),unit:t}}):i18n.translate("kol-live-value-bounded",{placeholders:{value:String(s),max:String(r),unit:t}});return index.h("div",{class:"kol-progress"},index.h("div",{"aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===o,"kol-progress__bar":"bar"===o}},"bar"===o&&n&&index.h("div",{class:"kol-progress__bar-label"},n),createProgressSVG(o,r,a),"cycle"===o&&index.h("div",{class:"kol-progress__cycle-text"},n&&index.h("div",{class:"kol-progress__cycle-label"},n),index.h("div",{class:"kol-progress__cycle-value"},`${c} ${t}`)),"bar"===o&&index.h("div",{class:"kol-progress__bar-value",style:{width:d}},c),"bar"===o&&index.h("div",{class:"kol-progress__bar-unit"},t)),index.h("progress",{class:"visually-hidden","aria-busy":a<r?"true":"false",max:r,value:a}),index.h("span",{"aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},h))},progressPropsConfig={optional:[label.labelProp,unit.unitProp,variantProgressProp],required:[unit.maxProp,clampedNumberValueProp]};class ProgressController extends baseController.BaseController{constructor(e){super(e,progressPropsConfig)}componentWillLoad(e){const{label:n,max:r,unit:t,value:a,variant:o}=e;this.watchLabel(n),this.watchMax(r),this.watchUnit(t),this.watchValue(a),this.watchVariant(o),this.setState("liveValue",this.getRenderProp("value")),this.startLiveValueInterval()}watchLabel(e){label.labelProp.apply(e,e=>{this.setRenderProp("label",e)})}watchMax(e){unit.maxProp.apply(e,e=>{this.setRenderProp("max",e),this.watchValue(this.getRawProp("value"))})}watchUnit(e){unit.unitProp.apply(e,e=>{this.setRenderProp("unit",e)})}watchValue(e){this.setRawProp("value",e),clampedNumberValueProp.apply(e,e=>{this.setRenderProp("value",e)},{min:0,max:this.getRenderProp("max")})}watchVariant(e){variantProgressProp.apply(e,e=>{this.setRenderProp("variant",e)})}startLiveValueInterval(){this.interval=setInterval(()=>{const e=this.getRenderProp("value");this.setState("liveValue",e)},5e3)}destroy(){this.interval&&(clearInterval(this.interval),this.interval=void 0)}}const defaultStyleCss="/* 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  .kol-progress__bar {\n    display: grid;\n    align-items: center;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    grid-template-columns: 1fr auto;\n  }\n  .kol-progress__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-progress__bar svg {\n    grid-area: BAR;\n  }\n  .kol-progress__bar-value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-progress__bar-unit {\n    grid-area: UNIT;\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: #0075ff;\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle {\n    display: grid;\n    align-content: center;\n    justify-items: center;\n    grid-template-areas: \"ALL\";\n    grid-template-columns: auto;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: x-small;\n    text-align: center;\n  }\n  .kol-progress__cycle-text * {\n    background-color: white;\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    transform: rotate(-90deg);\n    transform-origin: 50% 50%;\n    fill: transparent;\n    stroke: #0075ff;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",KolProgress=class extends variantQuote.BaseWebComponent{constructor(e){super(),index.registerInstance(this,e),this.ctrl=new ProgressController(this.stateAccess),this.liveValue=0}watchLabel(e){this.ctrl.watchLabel(e)}watchMax(e){this.ctrl.watchMax(e)}watchUnit(e){this.ctrl.watchUnit(e)}watchValue(e){this.ctrl.watchValue(e)}watchVariant(e){this.ctrl.watchVariant(e)}componentWillLoad(){this.ctrl.componentWillLoad({label:this._label,max:this._max,unit:this._unit,value:this._value,variant:this._variant})}disconnectedCallback(){this.ctrl.destroy()}render(){return index.h(index.Host,{key:"70710a5592ba3177b7d4e657c36ee496c92fb879"},index.h(ProgressFC,{key:"19414781e2a8b8b4daa4df4ca0734afcc7507830",label:this.ctrl.getRenderProp("label"),max:this.ctrl.getRenderProp("max"),unit:this.ctrl.getRenderProp("unit"),value:this.ctrl.getRenderProp("value"),variant:this.ctrl.getRenderProp("variant"),liveValue:this.liveValue}))}static get watchers(){return{_label:["watchLabel"],_max:["watchMax"],_unit:["watchUnit"],_value:["watchValue"],_variant:["watchVariant"]}}};KolProgress.style={default:defaultStyleCss},exports.kol_progress=KolProgress;

package/dist/cjs/kol-quote.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-DAruRs4C.js"),variantQuote=require("./variant-quote-iZVwULXH.js"),componentNames=require("./component-names-5KS_pYRF.js"),bemRegistry=require("./bem-registry-BRaXxTgN.js");require("./common-CyOOsddt.js");var normalizers=require("./normalizers-CLRF8il-.js"),label=require("./label-B0RK7DQ1.js"),baseController=require("./base-controller-DAzsTqX9.js");require("./_Uint8Array-BAQUGozM.js"),require("./isArray-BOIOdEQh.js");const hrefProp=normalizers.createPropDefinition("href","",normalizers.normalizeString,e=>"string"==typeof e),quoteProp=normalizers.createPropDefinition("quote","",normalizers.normalizeString),quoteBem=bemRegistry.bem.forBlock("kol-quote"),BEM_CLASS_QUOTE__BLOCKQUOTE=quoteBem("blockquote"),BEM_CLASS_QUOTE__CITE=quoteBem("cite"),BEM_CLASS_QUOTE__FIGCAPTION=quoteBem("figcaption"),BEM_CLASS_QUOTE__QUOTE=quoteBem("quote"),QuoteFC=e=>{const{href:n,label:t,quote:o,variant:i}=e,r=""===o,a=quoteBem({[i]:!0});return index.h("figure",{class:a},"block"===i?index.h("blockquote",{class:BEM_CLASS_QUOTE__BLOCKQUOTE,cite:n},o,index.h("span",{"aria-hidden":r?void 0:"true",hidden:!r},index.h("slot",{name:"expert"}))):index.h("q",{class:BEM_CLASS_QUOTE__QUOTE,cite:n},o,index.h("span",{"aria-hidden":r?void 0:"true",hidden:!r},index.h("slot",{name:"expert"}))),"string"==typeof t&&t.length>0&&index.h("figcaption",{class:BEM_CLASS_QUOTE__FIGCAPTION},index.h("cite",{class:BEM_CLASS_QUOTE__CITE},index.h(componentNames.KolLinkTag,{_href:n,_label:t,_target:"_blank"}))))},quotePropsConfig={optional:[label.labelProp,variantQuote.variantQuoteProp],required:[hrefProp,quoteProp]};class QuoteController extends baseController.BaseController{constructor(e){super(e,quotePropsConfig)}componentWillLoad(e){const{href:n,label:t,quote:o,variant:i}=e;this.watchHref(n),this.watchLabel(t),this.watchQuote(o),this.watchVariant(i)}watchHref(e){hrefProp.apply(e,e=>{this.setRenderProp("href",e)})}watchLabel(e){label.labelProp.apply(e,e=>{this.setRenderProp("label",e)})}watchQuote(e){quoteProp.apply(e,e=>{this.setRenderProp("quote",e)})}watchVariant(e){variantQuote.variantQuoteProp.apply(e,e=>{this.setRenderProp("variant",e)})}}const defaultStyleCss="@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  .kol-quote {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}",KolQuote=class{constructor(e){index.registerInstance(this,e),this.ctrl=new QuoteController(variantQuote.BaseWebComponent.stateLess),this._variant="inline"}watchHref(e){this.ctrl.watchHref(e)}watchLabel(e){this.ctrl.watchLabel(e)}watchQuote(e){this.ctrl.watchQuote(e)}watchVariant(e){this.ctrl.watchVariant(e)}componentWillLoad(){this.ctrl.componentWillLoad({href:this._href,label:this._label,quote:this._quote,variant:this._variant})}render(){return index.h(index.Host,{key:"0e6593206846694c7a999d1a00d1776c5507112c"},index.h(QuoteFC,{key:"8e4b699204dd80e609632c82ab6e3db688d0c3ef",href:this.ctrl.getRenderProp("href"),label:this.ctrl.getRenderProp("label"),quote:this.ctrl.getRenderProp("quote"),variant:this.ctrl.getRenderProp("variant")}))}static get watchers(){return{_href:["watchHref"],_label:["watchLabel"],_quote:["watchQuote"],_variant:["watchVariant"]}}};KolQuote.style={default:defaultStyleCss},exports.kol_quote=KolQuote;
+"use strict";var index=require("./index-Dph1AncT.js"),variantQuote=require("./variant-quote-iZVwULXH.js"),componentNames=require("./component-names-5KS_pYRF.js"),bemRegistry=require("./bem-registry-BRaXxTgN.js");require("./common-CyOOsddt.js");var normalizers=require("./normalizers-CLRF8il-.js"),label=require("./label-B0RK7DQ1.js"),baseController=require("./base-controller-DAzsTqX9.js");require("./_Uint8Array-BAQUGozM.js"),require("./isArray-BOIOdEQh.js");const hrefProp=normalizers.createPropDefinition("href","",normalizers.normalizeString,e=>"string"==typeof e),quoteProp=normalizers.createPropDefinition("quote","",normalizers.normalizeString),quoteBem=bemRegistry.bem.forBlock("kol-quote"),BEM_CLASS_QUOTE__BLOCKQUOTE=quoteBem("blockquote"),BEM_CLASS_QUOTE__CITE=quoteBem("cite"),BEM_CLASS_QUOTE__FIGCAPTION=quoteBem("figcaption"),BEM_CLASS_QUOTE__QUOTE=quoteBem("quote"),QuoteFC=e=>{const{href:n,label:t,quote:o,variant:i}=e,r=""===o,a=quoteBem({[i]:!0});return index.h("figure",{class:a},"block"===i?index.h("blockquote",{class:BEM_CLASS_QUOTE__BLOCKQUOTE,cite:n},o,index.h("span",{"aria-hidden":r?void 0:"true",hidden:!r},index.h("slot",{name:"expert"}))):index.h("q",{class:BEM_CLASS_QUOTE__QUOTE,cite:n},o,index.h("span",{"aria-hidden":r?void 0:"true",hidden:!r},index.h("slot",{name:"expert"}))),"string"==typeof t&&t.length>0&&index.h("figcaption",{class:BEM_CLASS_QUOTE__FIGCAPTION},index.h("cite",{class:BEM_CLASS_QUOTE__CITE},index.h(componentNames.KolLinkTag,{_href:n,_label:t,_target:"_blank"}))))},quotePropsConfig={optional:[label.labelProp,variantQuote.variantQuoteProp],required:[hrefProp,quoteProp]};class QuoteController extends baseController.BaseController{constructor(e){super(e,quotePropsConfig)}componentWillLoad(e){const{href:n,label:t,quote:o,variant:i}=e;this.watchHref(n),this.watchLabel(t),this.watchQuote(o),this.watchVariant(i)}watchHref(e){hrefProp.apply(e,e=>{this.setRenderProp("href",e)})}watchLabel(e){label.labelProp.apply(e,e=>{this.setRenderProp("label",e)})}watchQuote(e){quoteProp.apply(e,e=>{this.setRenderProp("quote",e)})}watchVariant(e){variantQuote.variantQuoteProp.apply(e,e=>{this.setRenderProp("variant",e)})}}const defaultStyleCss="@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  .kol-quote {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}",KolQuote=class{constructor(e){index.registerInstance(this,e),this.ctrl=new QuoteController(variantQuote.BaseWebComponent.stateLess),this._variant="inline"}watchHref(e){this.ctrl.watchHref(e)}watchLabel(e){this.ctrl.watchLabel(e)}watchQuote(e){this.ctrl.watchQuote(e)}watchVariant(e){this.ctrl.watchVariant(e)}componentWillLoad(){this.ctrl.componentWillLoad({href:this._href,label:this._label,quote:this._quote,variant:this._variant})}render(){return index.h(index.Host,{key:"0e6593206846694c7a999d1a00d1776c5507112c"},index.h(QuoteFC,{key:"8e4b699204dd80e609632c82ab6e3db688d0c3ef",href:this.ctrl.getRenderProp("href"),label:this.ctrl.getRenderProp("label"),quote:this.ctrl.getRenderProp("quote"),variant:this.ctrl.getRenderProp("variant")}))}static get watchers(){return{_href:["watchHref"],_label:["watchLabel"],_quote:["watchQuote"],_variant:["watchVariant"]}}};KolQuote.style={default:defaultStyleCss},exports.kol_quote=KolQuote;

package/dist/cjs/kol-select-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-DAruRs4C.js"),clsx=require("./clsx-Bm_HQUnh.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-B1k695Hd.js"),controllerIcon=require("./controller-icon-BkgT5jQi.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),common=require("./common-CyOOsddt.js"),dev_utils=require("./dev.utils-Dm-X_NQd.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js"),controller$1=require("./controller-DXiXhgaj.js"),multiple=require("./multiple-BgmyZYYi.js"),controller=require("./controller-Cukn8V3a.js"),required=require("./required-n2GDPcqt.js"),rows=require("./rows-CQWHPr4C.js");require("./access-and-short-key-CUXP_bqv.js"),require("./disabled-OBxr5yFQ.js"),require("./hide-label-D5C7_wBP.js"),require("./label-BpdiumjJ.js"),require("./tooltip-align-BB5EsHsG.js"),require("./align-DLZnj4_m.js"),require("./events-Cd8febUV.js"),require("./associated.controller-Qtcakwi5.js"),require("./bootstrap-CTHD2bd6.js"),require("./component-names-5KS_pYRF.js"),require("./i18n-CgUN6lev.js"),require("./_Uint8Array-BAQUGozM.js"),require("./isArray-BOIOdEQh.js"),require("./variant-quote-iZVwULXH.js"),require("./normalizers-CLRF8il-.js"),require("./component-b-IdWBee.js"),require("./component-CmSwyEt3.js"),require("./bem-registry-BRaXxTgN.js"),require("./component-BnSFJ1yj.js"),require("./controller-D3ETb78M.js"),require("./align-floating-elements-DUp-he6s.js"),require("./tooltip-open-tracking-Ba0udJRU.js"),require("./label-B0RK7DQ1.js"),require("./base-controller-DAzsTqX9.js"),require("./i18n-DevJo9yF.js"),require("./Alert-B0V3X3wp.js"),require("./Heading-DhPc_Tq3.js"),require("./icons-CtLpYmvA.js"),require("./orientation-CB8_FW89.js");const NativeOptionFc=e=>{var{baseClassName:t="kol-select",class:i,index:s,selectedValue:l,selected:a,value:r,label:o,disabled:n}=e,c=tslib_es6.__rest(e,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);void 0===l?l=[]:Array.isArray(l)||(l=[l]);const d=a||l.includes(r);return index.h("option",Object.assign({class:clsx.clsx(`${t}__option`,{[`${t}__option--selected`]:d,[`${t}__option--disabled`]:n},i),selected:d,disabled:n,value:s},c),o)},NativeOptionListFc=({baseClassName:e,preKey:t,options:i,disabled:s,value:l,OptionProps:a={},OptionGroupProps:r={}})=>(null==i?void 0:i.length)?index.h(index.Fragment,null,i.map((o,n)=>{const c=[t,`-${n}`].join("");if("options"in o){if(!i.length)return null;const{label:t}=o,n=tslib_es6.__rest(o,["label"]);return index.h("optgroup",Object.assign({class:clsx.clsx(`${e}__optgroup`,{[`${e}__optgroup--disabled`]:s}),key:c},r,{label:null==t?void 0:t.toString(),disabled:s}),index.h(NativeOptionListFc,Object.assign({baseClassName:e,OptionGroupProps:r,OptionProps:a,value:l,preKey:c},n)))}return"value"in o?index.h(NativeOptionFc,Object.assign({key:c,baseClassName:e},a,{index:c,selectedValue:l},o)):null})):null,NativeSelectFc=e=>{const{class:t,msg:i,touched:s,disabled:l,required:a,options:r,value:o,OptionProps:n,OptionGroupProps:c,ariaDescribedBy:d,hideLabel:u,label:h}=e,p=tslib_es6.__rest(e,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),v={"kol-select--disabled":Boolean(l),"kol-select--required":Boolean(a),"kol-select--touched":Boolean(s),[`kol-select--${FormFieldStateWrapper.getMsgType(i)}`]:FormFieldStateWrapper.isMsgDefinedAndInputTouched(i,s)},_=Object.assign(Object.assign({class:clsx.clsx("kol-select",v,t),required:a,disabled:l},FormFieldStateWrapper.getDefaultProps({ariaDescribedBy:d,hideLabel:u,label:h})),p);return index.h("select",Object.assign({},_),index.h(NativeOptionListFc,{baseClassName:"kol-select",options:r,value:o,OptionGroupProps:c,OptionProps:n}))};function getSelectProps(e){const{ariaDescribedBy:t}=FormFieldStateWrapper.getRenderStates(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,options:e._options,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,size:e._rows,multiple:e._multiple,required:e._required,touched:e._touched,msg:e._msg};return"_shortKey"in e&&(i["aria-keyshortcuts"]=e._shortKey),i}const SelectStateWrapper=e=>{var{state:t}=e,i=tslib_es6.__rest(e,["state"]);return index.h(NativeSelectFc,Object.assign({},getSelectProps(t),i))};class SelectController extends controllerIcon.InputIconController{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find(t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options)),this.filterValuesInOptions=(e,t)=>e.filter(e=>void 0!==this.isValueInOptions(e,t)),this.afterPatchOptions=(e,t,i,s)=>{"_value"===s&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const i=t.get("_value");void 0===i||Array.isArray(i)||t.set("_value",[i]);const s=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(s)&&s.length>0){this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,s);const e=t.has("_value")?t.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],s);!1===this.component._multiple&&0===i.length?t.set("_value",[s[0].value]):Array.isArray(e)&&i.length<e.length&&t.set("_value",i)}},this.component=e}validateOptions(e){controller.validateOptionsWithOptgroup(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){this.assertComponentValueMatchesMultiplicity(!0===e),multiple.validateMultiple(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){required.validateRequired(this.component,e)}validateRows(e){rows.validateRows(this.component,e)}validateValue(e){this.assertValueMatchesMultiplicity(e),common.watchJsonArrayString(this.component,"_value",()=>!0,void 0===e?[]:Array.isArray(e)?e:[e],void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}assertValueMatchesMultiplicity(e){const t=Array.isArray(e);if(!0===this.component._multiple){if(void 0!==e&&!t)throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (received = ${JSON.stringify(e)})`)}else if(t)throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (received = ${JSON.stringify(e)})`)}assertComponentValueMatchesMultiplicity(e){const t=this.component._value;if(e){if(void 0!==t&&!Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (current = ${JSON.stringify(t)})`)}else if(Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (current = ${JSON.stringify(t)})`)}}const KolSelectWc=class{async getValue(){return this._multiple?this.state._value:Array.isArray(this.state._value)&&this.state._value.length>0?this.state._value[0]:this.state._value}async focus(){return elementFocus.setFocus(this.selectRef)}async click(){return elementClick.setClick(this.selectRef)}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-form-field-select",{"kol-form-field--has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.setSelectRef,state:this.state},this.controller.onFacade),{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"3999e63e87fecd9da1ac74abc35a25a724687457"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"b6c064b9c81fe1283a98cfc7e2839d46736637d8",state:this.state},index.h("form",{key:"02f1b170a6b77de34fd7b74385f1679f15860fe2",onSubmit:e=>{e.preventDefault(),controller$1.propagateSubmitEventToForm({form:this.host})}},index.h("input",{key:"ff8fbb2d4957df5a430c150149a43eaf48883354",type:"submit",hidden:!0}),index.h(SelectStateWrapper,Object.assign({key:"17364963e062d6d1a8ece241d195500814b5798e"},this.getSelectProps())))))}constructor(e){index.registerInstance(this,e),this.setSelectRef=e=>{this.selectRef=e},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new SelectController(this,"select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}onInput(e){var t;const i=Array.from((null===(t=this.selectRef)||void 0===t?void 0:t.options)||[]).filter(e=>e.selected).map(e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value});if(this._multiple)this._value=i,this.controller.onFacade.onInput(e,!0,i);else{const t=i.length>0?i[0]:void 0;this._value=t,this.controller.onFacade.onInput(e,!0,t)}}onChange(e){this._multiple,this.controller.onFacade.onChange(e,this._value)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};exports.kol_select_wc=KolSelectWc;
+"use strict";var index=require("./index-Dph1AncT.js"),clsx=require("./clsx-Bm_HQUnh.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-BQWVVjWk.js"),controllerIcon=require("./controller-icon-DpxEr5AX.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),common=require("./common-CyOOsddt.js"),dev_utils=require("./dev.utils-ciOZUMnv.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js"),controller$1=require("./controller-DXiXhgaj.js"),multiple=require("./multiple-BgmyZYYi.js"),controller=require("./controller-axvKW-gX.js"),required=require("./required-n2GDPcqt.js"),rows=require("./rows-CQWHPr4C.js");require("./access-and-short-key-CUXP_bqv.js"),require("./disabled-OBxr5yFQ.js"),require("./hide-label-D5C7_wBP.js"),require("./label-BpdiumjJ.js"),require("./tooltip-align-BB5EsHsG.js"),require("./align-DLZnj4_m.js"),require("./events-Cd8febUV.js"),require("./associated.controller-Qtcakwi5.js"),require("./bootstrap-CTHD2bd6.js"),require("./component-names-5KS_pYRF.js"),require("./i18n-CgUN6lev.js"),require("./_Uint8Array-BAQUGozM.js"),require("./isArray-BOIOdEQh.js"),require("./variant-quote-iZVwULXH.js"),require("./normalizers-CLRF8il-.js"),require("./component-O_tO7dUq.js"),require("./component-Cg-OygC_.js"),require("./bem-registry-BRaXxTgN.js"),require("./component-TPBvP4ox.js"),require("./controller-D3ETb78M.js"),require("./align-floating-elements-DUp-he6s.js"),require("./tooltip-open-tracking-Ba0udJRU.js"),require("./label-B0RK7DQ1.js"),require("./base-controller-DAzsTqX9.js"),require("./i18n-DevJo9yF.js"),require("./Alert-C0ni87zH.js"),require("./Heading-CfhDOPMw.js"),require("./icons-CtLpYmvA.js"),require("./orientation-CB8_FW89.js");const NativeOptionFc=e=>{var{baseClassName:t="kol-select",class:i,index:s,selectedValue:l,selected:a,value:r,label:o,disabled:n}=e,c=tslib_es6.__rest(e,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);void 0===l?l=[]:Array.isArray(l)||(l=[l]);const d=a||l.includes(r);return index.h("option",Object.assign({class:clsx.clsx(`${t}__option`,{[`${t}__option--selected`]:d,[`${t}__option--disabled`]:n},i),selected:d,disabled:n,value:s},c),o)},NativeOptionListFc=({baseClassName:e,preKey:t,options:i,disabled:s,value:l,OptionProps:a={},OptionGroupProps:r={}})=>(null==i?void 0:i.length)?index.h(index.Fragment,null,i.map((o,n)=>{const c=[t,`-${n}`].join("");if("options"in o){if(!i.length)return null;const{label:t}=o,n=tslib_es6.__rest(o,["label"]);return index.h("optgroup",Object.assign({class:clsx.clsx(`${e}__optgroup`,{[`${e}__optgroup--disabled`]:s}),key:c},r,{label:null==t?void 0:t.toString(),disabled:s}),index.h(NativeOptionListFc,Object.assign({baseClassName:e,OptionGroupProps:r,OptionProps:a,value:l,preKey:c},n)))}return"value"in o?index.h(NativeOptionFc,Object.assign({key:c,baseClassName:e},a,{index:c,selectedValue:l},o)):null})):null,NativeSelectFc=e=>{const{class:t,msg:i,touched:s,disabled:l,required:a,options:r,value:o,OptionProps:n,OptionGroupProps:c,ariaDescribedBy:d,hideLabel:u,label:h}=e,p=tslib_es6.__rest(e,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),v={"kol-select--disabled":Boolean(l),"kol-select--required":Boolean(a),"kol-select--touched":Boolean(s),[`kol-select--${FormFieldStateWrapper.getMsgType(i)}`]:FormFieldStateWrapper.isMsgDefinedAndInputTouched(i,s)},_=Object.assign(Object.assign({class:clsx.clsx("kol-select",v,t),required:a,disabled:l},FormFieldStateWrapper.getDefaultProps({ariaDescribedBy:d,hideLabel:u,label:h})),p);return index.h("select",Object.assign({},_),index.h(NativeOptionListFc,{baseClassName:"kol-select",options:r,value:o,OptionGroupProps:c,OptionProps:n}))};function getSelectProps(e){const{ariaDescribedBy:t}=FormFieldStateWrapper.getRenderStates(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,options:e._options,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,size:e._rows,multiple:e._multiple,required:e._required,touched:e._touched,msg:e._msg};return"_shortKey"in e&&(i["aria-keyshortcuts"]=e._shortKey),i}const SelectStateWrapper=e=>{var{state:t}=e,i=tslib_es6.__rest(e,["state"]);return index.h(NativeSelectFc,Object.assign({},getSelectProps(t),i))};class SelectController extends controllerIcon.InputIconController{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find(t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options)),this.filterValuesInOptions=(e,t)=>e.filter(e=>void 0!==this.isValueInOptions(e,t)),this.afterPatchOptions=(e,t,i,s)=>{"_value"===s&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const i=t.get("_value");void 0===i||Array.isArray(i)||t.set("_value",[i]);const s=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(s)&&s.length>0){this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,s);const e=t.has("_value")?t.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],s);!1===this.component._multiple&&0===i.length?t.set("_value",[s[0].value]):Array.isArray(e)&&i.length<e.length&&t.set("_value",i)}},this.component=e}validateOptions(e){controller.validateOptionsWithOptgroup(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){this.assertComponentValueMatchesMultiplicity(!0===e),multiple.validateMultiple(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){required.validateRequired(this.component,e)}validateRows(e){rows.validateRows(this.component,e)}validateValue(e){this.assertValueMatchesMultiplicity(e),common.watchJsonArrayString(this.component,"_value",()=>!0,void 0===e?[]:Array.isArray(e)?e:[e],void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}assertValueMatchesMultiplicity(e){const t=Array.isArray(e);if(!0===this.component._multiple){if(void 0!==e&&!t)throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (received = ${JSON.stringify(e)})`)}else if(t)throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (received = ${JSON.stringify(e)})`)}assertComponentValueMatchesMultiplicity(e){const t=this.component._value;if(e){if(void 0!==t&&!Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (current = ${JSON.stringify(t)})`)}else if(Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (current = ${JSON.stringify(t)})`)}}const KolSelectWc=class{async getValue(){return this._multiple?this.state._value:Array.isArray(this.state._value)&&this.state._value.length>0?this.state._value[0]:this.state._value}async focus(){return elementFocus.setFocus(this.selectRef)}async click(){return elementClick.setClick(this.selectRef)}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-form-field-select",{"kol-form-field--has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.setSelectRef,state:this.state},this.controller.onFacade),{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"3999e63e87fecd9da1ac74abc35a25a724687457"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"b6c064b9c81fe1283a98cfc7e2839d46736637d8",state:this.state},index.h("form",{key:"02f1b170a6b77de34fd7b74385f1679f15860fe2",onSubmit:e=>{e.preventDefault(),controller$1.propagateSubmitEventToForm({form:this.host})}},index.h("input",{key:"ff8fbb2d4957df5a430c150149a43eaf48883354",type:"submit",hidden:!0}),index.h(SelectStateWrapper,Object.assign({key:"17364963e062d6d1a8ece241d195500814b5798e"},this.getSelectProps())))))}constructor(e){index.registerInstance(this,e),this.setSelectRef=e=>{this.selectRef=e},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new SelectController(this,"select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}onInput(e){var t;const i=Array.from((null===(t=this.selectRef)||void 0===t?void 0:t.options)||[]).filter(e=>e.selected).map(e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value});if(this._multiple)this._value=i,this.controller.onFacade.onInput(e,!0,i);else{const t=i.length>0?i[0]:void 0;this._value=t,this.controller.onFacade.onInput(e,!0,t)}}onChange(e){this._multiple,this.controller.onFacade.onChange(e,this._value)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};exports.kol_select_wc=KolSelectWc;