@public-ui/components 3.0.4-rc.0 → 3.0.4-rc.1

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-CIQC-OQ4.js"),common=require("./common-BHv-S8J5.js"),label=require("./label-DLgz6vof.js"),events=require("./events-DDhO-Ns8.js"),componentNames=require("./component-names-D7MwtuB7.js"),i18n=require("./i18n-CR9McMIU.js"),clsx=require("./clsx-CkZlkaek.js");require("./i18n-BLEJ-_9m.js");const validateWidth=(n,e,t)=>{common.watchString(n,"_width",e,Object.assign({defaultValue:"100%"},t))},ModalVariantPropTypeOptions=["blank","card"],validateModalVariant=(n,e)=>{common.watchValidator(n,"_variant",(n=>"string"==typeof n&&ModalVariantPropTypeOptions.includes(n)),new Set(ModalVariantPropTypeOptions),e)},defaultStyleCss="/* 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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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  [role=button],\n  button:not([role=link]),\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 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: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip: rect(0 0 0 0);\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(16rem / 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: grid;\n    place-items: 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    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip__floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\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(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / 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}\n@layer kol-component {\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.33);\n  }\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}",KolModal=class{constructor(n){index.registerInstance(this,n),this.translateClose=i18n.translate("kol-close"),this.on={onClick:async()=>{await this.closeModal()}},this._width="100%",this._variant="blank",this.state={_label:"",_width:"100%"}}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var n,e;null===(e=null===(n=this.state._on)||void 0===n?void 0:n.onClose)||void 0===e||e.call(n),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.close)}async openModal(){var n;null===(n=this.refDialog)||void 0===n||n.showModal()}async closeModal(){var n,e;null===(e=null===(n=this.refDialog)||void 0===n?void 0:n.close)||void 0===e||e.call(n)}render(){return index.h("dialog",{key:"feece4ab858f0f2b44dde45cbcdbe4d304ca7f94",class:clsx.clsx("kol-modal",{"kol-modal__card":"card"===this.state._variant}),ref:n=>{this.refDialog=n},style:{width:this.state._width},"aria-label":this.state._label,onClose:this.handleNativeCloseEvent.bind(this)},index.h("div",{key:"7d53acf74b3c823b937f13afb9ca8194a249fbbf",tabindex:"-1"},index.h("slot",{key:"c33b80a77038947041a3e83ee103dee0ccce2e87"})),"card"===this.state._variant&&index.h(componentNames.KolButtonWcTag,{key:"3fd5121af87b07817e39dfd3e72470d05d93d842",class:"kol-modal__close-button","data-testid":"modal-close-button",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:this.translateClose,_on:this.on,_tooltipAlign:"left"}))}validateLabel(n){label.validateLabel(this,n,{required:!0})}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"!=typeof n.onClose&&!0!==n.onClose||(e.onClose=n.onClose),common.setState(this,"_on",e)}}validateWidth(n){validateWidth(this,n)}validateVariant(n){validateModalVariant(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width),this.validateVariant(this._variant)}get host(){return index.getElement(this)}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}}};KolModal.style={default:defaultStyleCss},exports.kol_modal=KolModal;
+"use strict";var index=require("./index-COuxz9w8.js"),clsx=require("./clsx-CkZlkaek.js"),componentNames=require("./component-names-D7MwtuB7.js"),common=require("./common-7TmauOM3.js"),label=require("./label-LeEyJEwm.js"),events=require("./events-DDhO-Ns8.js");const validateWidth=(n,e,t)=>{common.watchString(n,"_width",e,Object.assign({defaultValue:"100%"},t))},ModalVariantPropTypeOptions=["blank","card"],validateModalVariant=(n,e)=>{common.watchValidator(n,"_variant",(n=>"string"==typeof n&&ModalVariantPropTypeOptions.includes(n)),new Set(ModalVariantPropTypeOptions),e)},defaultStyleCss="/* 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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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  [role=button],\n  button:not([role=link]),\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 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: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip: rect(0 0 0 0);\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(16rem / 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: grid;\n    place-items: 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    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip__floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\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(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / 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}\n@layer kol-component {\n  .kol-card {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n    height: 100%;\n  }\n  .kol-card__close-button {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}\n@layer kol-component {\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}",KolModal=class{constructor(n){index.registerInstance(this,n),this.on={onClose:async()=>{await this.closeModal()}},this._width="100%",this._variant="blank",this.state={_label:"",_width:"100%"}}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var n,e;null===(e=null===(n=this.state._on)||void 0===n?void 0:n.onClose)||void 0===e||e.call(n),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.close)}async openModal(){var n;null===(n=this.refDialog)||void 0===n||n.showModal()}async closeModal(){var n,e;null===(e=null===(n=this.refDialog)||void 0===n?void 0:n.close)||void 0===e||e.call(n)}render(){return index.h("dialog",{key:"7ff10751f7a342a9ca719c2d79fe2a0dc6d2bc06","aria-label":this.state._label,class:clsx.clsx("kol-modal",{"kol-modal__blank":"blank"===this.state._variant,"kol-modal__card":"card"===this.state._variant}),onClose:this.handleNativeCloseEvent.bind(this),ref:n=>{this.refDialog=n},style:{width:this.state._width}},"blank"===this.state._variant&&index.h("slot",{key:"4178f173aa6b0088bb2d1e5504b4c874b4fc9d36"}),"card"===this.state._variant&&index.h(componentNames.KolCardWcTag,{key:"2fed2d9a3359409426c6a0ae7ae55bf8490017e8",_label:this.state._label,_hasCloser:!0,_on:this.on},index.h("slot",{key:"2254882248140cc186df25ca75a06f897219211e"})))}validateLabel(n){label.validateLabel(this,n,{required:!0})}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"!=typeof n.onClose&&!0!==n.onClose||(e.onClose=n.onClose),common.setState(this,"_on",e)}}validateWidth(n){validateWidth(this,n)}validateVariant(n){validateModalVariant(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width),this.validateVariant(this._variant)}get host(){return index.getElement(this)}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}}};KolModal.style={default:defaultStyleCss},exports.kol_modal=KolModal;

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

@@ -1 +1 @@
-{"file":"kol-modal.entry.cjs.js","mappings":"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","names":["watchString","watchValidator","translate","dispatchDomEvent","KolEvent","h","clsx","KolButtonWcTag","validateLabel","setState"],"sources":["src/schema/props/width.ts","src/schema/props/variant/modal.ts","src/components/modal/style.scss?tag=kol-modal&mode=default&encapsulation=shadow","src/components/modal/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { WatchStringOptions } from '../utils';\nimport { watchString } from '../utils';\n\n/* types */\nexport type WidthPropType = string;\n\n/**\n * Defines the width of the component. (max-width: 100%)\n */\nexport interface PropWidth {\n\twidth: WidthPropType;\n}\n\n/* validator */\nexport const validateWidth = (component: Generic.Element.Component, value?: WidthPropType, options?: WatchStringOptions): void => {\n\twatchString(component, '_width', value, { defaultValue: '100%', ...options });\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\nconst ModalVariantPropTypeOptions = ['blank', 'card'] as const;\nexport type ModalVariantPropType = (typeof ModalVariantPropTypeOptions)[number];\n\n/**\n * Defines the different variants for displaying the Modal.\n */\nexport type PropModalVariant = {\n\tvariant: ModalVariantPropType;\n};\n\n/* validator */\nexport const validateModalVariant = (component: Generic.Element.Component, value?: ModalVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && ModalVariantPropTypeOptions.includes(value),\n\t\tnew Set(ModalVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-modal {\n\t\tmin-height: var(--a11y-min-size);\n\t\tpadding: 0;\n\t\tborder: 0;\n\n\t\t&::backdrop {\n\t\t\tbackground-color: rgb(0, 0, 0, 0.33);\n\t\t}\n\n\t\t&__close-button {\n\t\t\tposition: absolute;\n\t\t\ttop: to-rem(1);\n\t\t\tright: to-rem(1);\n\t\t\tz-index: 1;\n\t\t}\n\t}\n}\n","import type { KoliBriModalEventCallbacks, LabelPropType, ModalAPI, ModalStates } from '../../schema';\nimport { setState, validateLabel, validateWidth } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport type { ModalVariantPropType } from '../../schema/props/variant/modal';\nimport { validateModalVariant } from '../../schema/props/variant/modal';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport clsx from 'clsx';\n\n/**\n * https://en.wikipedia.org/wiki/Modal_window\n *\n * @slot - The modal's contents.\n */\n@Component({\n\ttag: 'kol-modal',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolModal implements ModalAPI {\n\t@Element() private readonly host?: HTMLKolModalElement;\n\tprivate refDialog?: HTMLDialogElement;\n\tprivate readonly translateClose = translate('kol-close');\n\n\tpublic disconnectedCallback(): void {\n\t\tvoid this.closeModal();\n\t}\n\n\tprivate handleNativeCloseEvent() {\n\t\tthis.state._on?.onClose?.();\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\t/**\n\t * Opens the modal dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tasync openModal() {\n\t\tthis.refDialog?.showModal();\n\t}\n\n\t/**\n\t * Closes the modal dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeModal() {\n\t\t/* The optional chaining for the `close` method is not strictly necessary, but a simple/lazy workaround for HTMLDialog not being implemented in jsdom, causing Jest tests to fail. It may be removed in the future. */\n\t\tthis.refDialog?.close?.();\n\t}\n\n\tprivate readonly on = {\n\t\tonClick: async () => {\n\t\t\tawait this.closeModal();\n\t\t},\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<dialog\n\t\t\t\tclass={clsx('kol-modal', { 'kol-modal__card': this.state._variant === 'card' })}\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.refDialog = el;\n\t\t\t\t}}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: this.state._width,\n\t\t\t\t}}\n\t\t\t\taria-label={this.state._label}\n\t\t\t\tonClose={this.handleNativeCloseEvent.bind(this)}\n\t\t\t>\n\t\t\t\t{/* It's necessary to have a block element container for cross-browser compatibility. The display property for the slot content is unknown and could be inline. */}\n\t\t\t\t<div tabindex=\"-1\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t\t{this.state._variant === 'card' && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-modal__close-button\"\n\t\t\t\t\t\tdata-testid=\"modal-close-button\"\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_label={this.translateClose}\n\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</dialog>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the modal callback functions.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t/**\n\t * Defines the width of the modal. (max-width: 100%)\n\t */\n\t@Prop() public _width?: string = '100%';\n\n\t/**\n\t * Defines the variant of the modal.\n\t */\n\t@Prop() public _variant?: ModalVariantPropType = 'blank';\n\n\t@State() public state: ModalStates = {\n\t\t_label: '', // ⚠ required\n\t\t_width: '100%',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriModalEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriModalEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' || value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriModalEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_width')\n\tpublic validateWidth(value?: string): void {\n\t\tvalidateWidth(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: ModalVariantPropType): void {\n\t\tvalidateModalVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateWidth(this._width);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"version":3}
+{"file":"kol-modal.entry.cjs.js","mappings":"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","names":["watchString","watchValidator","dispatchDomEvent","KolEvent","h","clsx","KolCardWcTag","validateLabel","setState"],"sources":["src/schema/props/width.ts","src/schema/props/variant/modal.ts","src/components/modal/style.scss?tag=kol-modal&mode=default&encapsulation=shadow","src/components/modal/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { WatchStringOptions } from '../utils';\nimport { watchString } from '../utils';\n\n/* types */\nexport type WidthPropType = string;\n\n/**\n * Defines the width of the component. (max-width: 100%)\n */\nexport interface PropWidth {\n\twidth: WidthPropType;\n}\n\n/* validator */\nexport const validateWidth = (component: Generic.Element.Component, value?: WidthPropType, options?: WatchStringOptions): void => {\n\twatchString(component, '_width', value, { defaultValue: '100%', ...options });\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\nconst ModalVariantPropTypeOptions = ['blank', 'card'] as const;\nexport type ModalVariantPropType = (typeof ModalVariantPropTypeOptions)[number];\n\n/**\n * Defines the different variants for displaying the Modal.\n */\nexport type PropModalVariant = {\n\tvariant: ModalVariantPropType;\n};\n\n/* validator */\nexport const validateModalVariant = (component: Generic.Element.Component, value?: ModalVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && ModalVariantPropTypeOptions.includes(value),\n\t\tnew Set(ModalVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","@use '../../styles/global' as *;\n@use '../../styles/kol-card-mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../tooltip/style.scss' as *;\n\n@include kol-card;\n\n@layer kol-component {\n\t.kol-modal {\n\t\tmin-height: var(--a11y-min-size);\n\t\tpadding: 0;\n\t\tborder: 0;\n\n\t\t&::backdrop {\n\t\t\tbackground-color: rgb(0, 0, 0, 0.1);\n\t\t}\n\n\t\t&__close-button {\n\t\t\tposition: absolute;\n\t\t\ttop: to-rem(1);\n\t\t\tright: to-rem(1);\n\t\t\tz-index: 1;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\nimport { KolCardWcTag } from '../../core/component-names';\nimport type { KoliBriModalEventCallbacks, LabelPropType, ModalAPI, ModalStates } from '../../schema';\nimport { setState, validateLabel, validateWidth } from '../../schema';\nimport type { ModalVariantPropType } from '../../schema/props/variant/modal';\nimport { validateModalVariant } from '../../schema/props/variant/modal';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * https://en.wikipedia.org/wiki/Modal_window\n *\n * @slot - The modal's contents.\n */\n@Component({\n\ttag: 'kol-modal',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolModal implements ModalAPI {\n\t@Element() private readonly host?: HTMLKolModalElement;\n\tprivate refDialog?: HTMLDialogElement;\n\n\tpublic disconnectedCallback(): void {\n\t\tvoid this.closeModal();\n\t}\n\n\tprivate handleNativeCloseEvent() {\n\t\tthis.state._on?.onClose?.();\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\t/**\n\t * Opens the modal dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tasync openModal() {\n\t\tthis.refDialog?.showModal();\n\t}\n\n\t/**\n\t * Closes the modal dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeModal() {\n\t\t/* The optional chaining for the `close` method is not strictly necessary, but a simple/lazy workaround for HTMLDialog not being implemented in jsdom, causing Jest tests to fail. It may be removed in the future. */\n\t\tthis.refDialog?.close?.();\n\t}\n\n\tprivate readonly on = {\n\t\tonClose: async () => {\n\t\t\tawait this.closeModal();\n\t\t},\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<dialog\n\t\t\t\taria-label={this.state._label}\n\t\t\t\tclass={clsx('kol-modal', {\n\t\t\t\t\t'kol-modal__blank': this.state._variant === 'blank',\n\t\t\t\t\t'kol-modal__card': this.state._variant === 'card',\n\t\t\t\t})}\n\t\t\t\tonClose={this.handleNativeCloseEvent.bind(this)}\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.refDialog = el;\n\t\t\t\t}}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: this.state._width,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._variant === 'blank' && <slot />}\n\t\t\t\t{this.state._variant === 'card' && (\n\t\t\t\t\t<KolCardWcTag _label={this.state._label} _hasCloser _on={this.on}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</KolCardWcTag>\n\t\t\t\t)}\n\t\t\t</dialog>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the modal callback functions.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t/**\n\t * Defines the width of the modal. (max-width: 100%)\n\t */\n\t@Prop() public _width?: string = '100%';\n\n\t/**\n\t * Defines the variant of the modal.\n\t */\n\t@Prop() public _variant?: ModalVariantPropType = 'blank';\n\n\t@State() public state: ModalStates = {\n\t\t_label: '', // ⚠ required\n\t\t_width: '100%',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriModalEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriModalEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' || value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriModalEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_width')\n\tpublic validateWidth(value?: string): void {\n\t\tvalidateWidth(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: ModalVariantPropType): void {\n\t\tvalidateModalVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateWidth(this._width);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"version":3,"file":"kol-modal.entry.cjs.js","sources":["src/schema/props/width.ts","src/schema/props/variant/modal.ts","src/components/modal/style.scss?tag=kol-modal&mode=default&encapsulation=shadow","src/components/modal/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { WatchStringOptions } from '../utils';\nimport { watchString } from '../utils';\n\n/* types */\nexport type WidthPropType = string;\n\n/**\n * Defines the width of the component. (max-width: 100%)\n */\nexport interface PropWidth {\n\twidth: WidthPropType;\n}\n\n/* validator */\nexport const validateWidth = (component: Generic.Element.Component, value?: WidthPropType, options?: WatchStringOptions): void => {\n\twatchString(component, '_width', value, { defaultValue: '100%', ...options });\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\nconst ModalVariantPropTypeOptions = ['blank', 'card'] as const;\nexport type ModalVariantPropType = (typeof ModalVariantPropTypeOptions)[number];\n\n/**\n * Defines the different variants for displaying the Modal.\n */\nexport type PropModalVariant = {\n\tvariant: ModalVariantPropType;\n};\n\n/* validator */\nexport const validateModalVariant = (component: Generic.Element.Component, value?: ModalVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && ModalVariantPropTypeOptions.includes(value),\n\t\tnew Set(ModalVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-modal {\n\t\tmin-height: var(--a11y-min-size);\n\t\tpadding: 0;\n\t\tborder: 0;\n\n\t\t&::backdrop {\n\t\t\tbackground-color: rgb(0, 0, 0, 0.33);\n\t\t}\n\n\t\t&__close-button {\n\t\t\tposition: absolute;\n\t\t\ttop: to-rem(1);\n\t\t\tright: to-rem(1);\n\t\t\tz-index: 1;\n\t\t}\n\t}\n}\n","import type { KoliBriModalEventCallbacks, LabelPropType, ModalAPI, ModalStates } from '../../schema';\nimport { setState, validateLabel, validateWidth } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport type { ModalVariantPropType } from '../../schema/props/variant/modal';\nimport { validateModalVariant } from '../../schema/props/variant/modal';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport clsx from 'clsx';\n\n/**\n * https://en.wikipedia.org/wiki/Modal_window\n *\n * @slot - The modal's contents.\n */\n@Component({\n\ttag: 'kol-modal',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolModal implements ModalAPI {\n\t@Element() private readonly host?: HTMLKolModalElement;\n\tprivate refDialog?: HTMLDialogElement;\n\tprivate readonly translateClose = translate('kol-close');\n\n\tpublic disconnectedCallback(): void {\n\t\tvoid this.closeModal();\n\t}\n\n\tprivate handleNativeCloseEvent() {\n\t\tthis.state._on?.onClose?.();\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\t/**\n\t * Opens the modal dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tasync openModal() {\n\t\tthis.refDialog?.showModal();\n\t}\n\n\t/**\n\t * Closes the modal dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeModal() {\n\t\t/* The optional chaining for the `close` method is not strictly necessary, but a simple/lazy workaround for HTMLDialog not being implemented in jsdom, causing Jest tests to fail. It may be removed in the future. */\n\t\tthis.refDialog?.close?.();\n\t}\n\n\tprivate readonly on = {\n\t\tonClick: async () => {\n\t\t\tawait this.closeModal();\n\t\t},\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<dialog\n\t\t\t\tclass={clsx('kol-modal', { 'kol-modal__card': this.state._variant === 'card' })}\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.refDialog = el;\n\t\t\t\t}}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: this.state._width,\n\t\t\t\t}}\n\t\t\t\taria-label={this.state._label}\n\t\t\t\tonClose={this.handleNativeCloseEvent.bind(this)}\n\t\t\t>\n\t\t\t\t{/* It's necessary to have a block element container for cross-browser compatibility. The display property for the slot content is unknown and could be inline. */}\n\t\t\t\t<div tabindex=\"-1\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t\t{this.state._variant === 'card' && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-modal__close-button\"\n\t\t\t\t\t\tdata-testid=\"modal-close-button\"\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_label={this.translateClose}\n\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</dialog>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the modal callback functions.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t/**\n\t * Defines the width of the modal. (max-width: 100%)\n\t */\n\t@Prop() public _width?: string = '100%';\n\n\t/**\n\t * Defines the variant of the modal.\n\t */\n\t@Prop() public _variant?: ModalVariantPropType = 'blank';\n\n\t@State() public state: ModalStates = {\n\t\t_label: '', // ⚠ required\n\t\t_width: '100%',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriModalEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriModalEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' || value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriModalEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_width')\n\tpublic validateWidth(value?: string): void {\n\t\tvalidateWidth(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: ModalVariantPropType): void {\n\t\tvalidateModalVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateWidth(this._width);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"names":["watchString","watchValidator","translate","dispatchDomEvent","KolEvent","h","clsx","KolButtonWcTag","validateLabel","setState"],"mappings":"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"}
+{"version":3,"file":"kol-modal.entry.cjs.js","sources":["src/schema/props/width.ts","src/schema/props/variant/modal.ts","src/components/modal/style.scss?tag=kol-modal&mode=default&encapsulation=shadow","src/components/modal/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { WatchStringOptions } from '../utils';\nimport { watchString } from '../utils';\n\n/* types */\nexport type WidthPropType = string;\n\n/**\n * Defines the width of the component. (max-width: 100%)\n */\nexport interface PropWidth {\n\twidth: WidthPropType;\n}\n\n/* validator */\nexport const validateWidth = (component: Generic.Element.Component, value?: WidthPropType, options?: WatchStringOptions): void => {\n\twatchString(component, '_width', value, { defaultValue: '100%', ...options });\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\nconst ModalVariantPropTypeOptions = ['blank', 'card'] as const;\nexport type ModalVariantPropType = (typeof ModalVariantPropTypeOptions)[number];\n\n/**\n * Defines the different variants for displaying the Modal.\n */\nexport type PropModalVariant = {\n\tvariant: ModalVariantPropType;\n};\n\n/* validator */\nexport const validateModalVariant = (component: Generic.Element.Component, value?: ModalVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && ModalVariantPropTypeOptions.includes(value),\n\t\tnew Set(ModalVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","@use '../../styles/global' as *;\n@use '../../styles/kol-card-mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../tooltip/style.scss' as *;\n\n@include kol-card;\n\n@layer kol-component {\n\t.kol-modal {\n\t\tmin-height: var(--a11y-min-size);\n\t\tpadding: 0;\n\t\tborder: 0;\n\n\t\t&::backdrop {\n\t\t\tbackground-color: rgb(0, 0, 0, 0.1);\n\t\t}\n\n\t\t&__close-button {\n\t\t\tposition: absolute;\n\t\t\ttop: to-rem(1);\n\t\t\tright: to-rem(1);\n\t\t\tz-index: 1;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\nimport { KolCardWcTag } from '../../core/component-names';\nimport type { KoliBriModalEventCallbacks, LabelPropType, ModalAPI, ModalStates } from '../../schema';\nimport { setState, validateLabel, validateWidth } from '../../schema';\nimport type { ModalVariantPropType } from '../../schema/props/variant/modal';\nimport { validateModalVariant } from '../../schema/props/variant/modal';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * https://en.wikipedia.org/wiki/Modal_window\n *\n * @slot - The modal's contents.\n */\n@Component({\n\ttag: 'kol-modal',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolModal implements ModalAPI {\n\t@Element() private readonly host?: HTMLKolModalElement;\n\tprivate refDialog?: HTMLDialogElement;\n\n\tpublic disconnectedCallback(): void {\n\t\tvoid this.closeModal();\n\t}\n\n\tprivate handleNativeCloseEvent() {\n\t\tthis.state._on?.onClose?.();\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\t/**\n\t * Opens the modal dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tasync openModal() {\n\t\tthis.refDialog?.showModal();\n\t}\n\n\t/**\n\t * Closes the modal dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeModal() {\n\t\t/* The optional chaining for the `close` method is not strictly necessary, but a simple/lazy workaround for HTMLDialog not being implemented in jsdom, causing Jest tests to fail. It may be removed in the future. */\n\t\tthis.refDialog?.close?.();\n\t}\n\n\tprivate readonly on = {\n\t\tonClose: async () => {\n\t\t\tawait this.closeModal();\n\t\t},\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<dialog\n\t\t\t\taria-label={this.state._label}\n\t\t\t\tclass={clsx('kol-modal', {\n\t\t\t\t\t'kol-modal__blank': this.state._variant === 'blank',\n\t\t\t\t\t'kol-modal__card': this.state._variant === 'card',\n\t\t\t\t})}\n\t\t\t\tonClose={this.handleNativeCloseEvent.bind(this)}\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.refDialog = el;\n\t\t\t\t}}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: this.state._width,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._variant === 'blank' && <slot />}\n\t\t\t\t{this.state._variant === 'card' && (\n\t\t\t\t\t<KolCardWcTag _label={this.state._label} _hasCloser _on={this.on}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</KolCardWcTag>\n\t\t\t\t)}\n\t\t\t</dialog>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the modal callback functions.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t/**\n\t * Defines the width of the modal. (max-width: 100%)\n\t */\n\t@Prop() public _width?: string = '100%';\n\n\t/**\n\t * Defines the variant of the modal.\n\t */\n\t@Prop() public _variant?: ModalVariantPropType = 'blank';\n\n\t@State() public state: ModalStates = {\n\t\t_label: '', // ⚠ required\n\t\t_width: '100%',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriModalEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriModalEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' || value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriModalEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_width')\n\tpublic validateWidth(value?: string): void {\n\t\tvalidateWidth(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: ModalVariantPropType): void {\n\t\tvalidateModalVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateWidth(this._width);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"names":["watchString","watchValidator","dispatchDomEvent","KolEvent","h","clsx","KolCardWcTag","validateLabel","setState"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-CIQC-OQ4.js"),common=require("./common-BHv-S8J5.js"),hideLabel=require("./hide-label-OPx-sdW8.js"),label=require("./label-DLgz6vof.js"),i18n=require("./i18n-CR9McMIU.js"),uniqueNavLabels=require("./unique-nav-labels-CL071GRq.js"),validation=require("./validation-COFOcyGF.js"),componentNames=require("./component-names-D7MwtuB7.js"),clsx=require("./clsx-CkZlkaek.js");require("./i18n-BLEJ-_9m.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 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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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  [role=button],\n  button:not([role=link]),\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 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: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip: rect(0 0 0 0);\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(16rem / 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: grid;\n    place-items: 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    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip__floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\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(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / 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}\n@layer kol-component {\n  .kol-nav {\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav--horizontal {\n    width: 100%;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__list {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list--horizontal {\n    flex-wrap: wrap;\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.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--horizontal":0===n.deep&&"horizontal"===n.orientation,"kol-nav__list--vertical":0!==n.deep||"vertical"===n.orientation}),"data-deep":n.deep},n.links.map(((e,t)=>this.li(n.collapsible,n.hideLabel,n.deep,t,e,n.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_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))})}entry(n,e,t,i,a){const o=this.state._hasIconsWhenExpanded||this.state._hideLabel?i._icons||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0;return index.h("div",{class:"kol-nav__entry-wrapper"},entryIsLink(i)?index.h(componentNames.KolLinkWcTag,Object.assign({class:"kol-nav__entry kol-nav__entry--link"},i,{_hideLabel:e,_icons:o})):index.h(componentNames.KolButtonWcTag,{class:"kol-nav__entry kol-nav__entry--button",_label:i._label,_hideLabel:e,_icons:o,_on:{onClick:(n,e)=>{entryIsButton(i)&&"function"==typeof i._on.onClick?i._on.onClick(n,e):this.handleToggleExpansionClick(i._children)}}}),t?this.expandButton(n,i,a):"")}expandButton(n,e,t){return index.h(componentNames.KolButtonWcTag,{class:clsx.clsx("kol-nav__expand-button",{"kol-nav__expand-button--expanded":t}),_ariaExpanded:t,_disabled:!n,_icons:"codicon codicon-"+(t?"remove":"add"),_hideLabel:!0,_label:`${t?i18n.translate("kol-nav-label-close",{placeholders:{label:e._label}}):i18n.translate("kol-nav-label-open",{placeholders:{label:e._label}})}`,_on:{onClick:()=>this.handleToggleExpansionClick(e._children)}})}li(n,e,t,i,a,o){const l=!!a._active,s=Array.isArray(a._children)&&a._children.length>0,d=Boolean(a._children&&this.state._expandedChildren.includes(a._children));return index.h("li",{class:clsx.clsx("kol-nav__list-item",{"kol-nav__list-item--active":l,"kol-nav__list-item--expanded":d,"kol-nav__list-item--has-children":s}),key:i},this.entry(n,e,s,a,d),d&&index.h(this.linkList,{collapsible:n,hideLabel:e,deep:t+1,links:a._children||[],orientation:o}))}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(){let n=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,common.devWarning("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const e=!0===this.state._collapsible,t=!0===this.state._hideLabel,i=this.state._orientation;return index.h("div",{key:"1768f2d1d6794f07607ad8a9f3953a4f17d3cd06",class:clsx.clsx("kol-nav",`kol-nav--${i}`,{"kol-nav--is-compact":this.state._hideLabel})},index.h("nav",{key:"6fceaf6abe991a38a3c4bb98741c9e1c5ad2f11a",class:"kol-nav__navigation","aria-label":this.state._label,id:"nav"},index.h(this.linkList,{key:"5ee2d35517877fad58f3c37446a88a4753a80bf5",collapsible:e,hideLabel:t,deep:0,links:this.state._links,orientation:i})),n&&index.h("div",{key:"d8b7bcb8d56bad5fadc02fc6362d84c597c5f0c8",class:"kol-nav__compact"},index.h(componentNames.KolButtonWcTag,{key:"a6e055cb523095f7dfeed9edc1fd4a847973cc55",class:"kol-nav__toggle-button",_ariaControls:"nav",_ariaExpanded:!t,_icons:t?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:i18n.translate(t?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_buttonVariant:"ghost"})))}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()}validateOrientation(n){common.watchValidator(this,"_orientation",(n=>"horizontal"===n||"vertical"===n),new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}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.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){uniqueNavLabels.removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};KolNav.style={default:defaultStyleCss},exports.kol_nav=KolNav;
+"use strict";var index=require("./index-COuxz9w8.js"),common=require("./common-7TmauOM3.js"),hideLabel=require("./hide-label-BVBvC42z.js"),label=require("./label-LeEyJEwm.js"),i18n=require("./i18n-BZMNivX4.js"),uniqueNavLabels=require("./unique-nav-labels-ClNOhgb7.js"),validation=require("./validation-5s8A-glH.js"),componentNames=require("./component-names-D7MwtuB7.js"),clsx=require("./clsx-CkZlkaek.js");require("./i18n-BLEJ-_9m.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 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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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  [role=button],\n  button:not([role=link]),\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 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: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip: rect(0 0 0 0);\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(16rem / 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: grid;\n    place-items: 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    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip__floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\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(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / 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}\n@layer kol-component {\n  .kol-nav {\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav--horizontal {\n    width: 100%;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__list {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list--horizontal {\n    flex-wrap: wrap;\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.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--horizontal":0===n.deep&&"horizontal"===n.orientation,"kol-nav__list--vertical":0!==n.deep||"vertical"===n.orientation}),"data-deep":n.deep},n.links.map(((e,t)=>this.li(n.collapsible,n.hideLabel,n.deep,t,e,n.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_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))})}entry(n,e,t,i,a){const o=this.state._hasIconsWhenExpanded||this.state._hideLabel?i._icons||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0;return index.h("div",{class:"kol-nav__entry-wrapper"},entryIsLink(i)?index.h(componentNames.KolLinkWcTag,Object.assign({class:"kol-nav__entry kol-nav__entry--link"},i,{_hideLabel:e,_icons:o})):index.h(componentNames.KolButtonWcTag,{class:"kol-nav__entry kol-nav__entry--button",_label:i._label,_hideLabel:e,_icons:o,_on:{onClick:(n,e)=>{entryIsButton(i)&&"function"==typeof i._on.onClick?i._on.onClick(n,e):this.handleToggleExpansionClick(i._children)}}}),t?this.expandButton(n,i,a):"")}expandButton(n,e,t){return index.h(componentNames.KolButtonWcTag,{class:clsx.clsx("kol-nav__expand-button",{"kol-nav__expand-button--expanded":t}),_ariaExpanded:t,_disabled:!n,_icons:"codicon codicon-"+(t?"remove":"add"),_hideLabel:!0,_label:`${t?i18n.translate("kol-nav-label-close",{placeholders:{label:e._label}}):i18n.translate("kol-nav-label-open",{placeholders:{label:e._label}})}`,_on:{onClick:()=>this.handleToggleExpansionClick(e._children)}})}li(n,e,t,i,a,o){const l=!!a._active,s=Array.isArray(a._children)&&a._children.length>0,d=Boolean(a._children&&this.state._expandedChildren.includes(a._children));return index.h("li",{class:clsx.clsx("kol-nav__list-item",{"kol-nav__list-item--active":l,"kol-nav__list-item--expanded":d,"kol-nav__list-item--has-children":s}),key:i},this.entry(n,e,s,a,d),d&&index.h(this.linkList,{collapsible:n,hideLabel:e,deep:t+1,links:a._children||[],orientation:o}))}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(){let n=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,common.devWarning("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const e=!0===this.state._collapsible,t=!0===this.state._hideLabel,i=this.state._orientation;return index.h("div",{key:"1768f2d1d6794f07607ad8a9f3953a4f17d3cd06",class:clsx.clsx("kol-nav",`kol-nav--${i}`,{"kol-nav--is-compact":this.state._hideLabel})},index.h("nav",{key:"6fceaf6abe991a38a3c4bb98741c9e1c5ad2f11a",class:"kol-nav__navigation","aria-label":this.state._label,id:"nav"},index.h(this.linkList,{key:"5ee2d35517877fad58f3c37446a88a4753a80bf5",collapsible:e,hideLabel:t,deep:0,links:this.state._links,orientation:i})),n&&index.h("div",{key:"d8b7bcb8d56bad5fadc02fc6362d84c597c5f0c8",class:"kol-nav__compact"},index.h(componentNames.KolButtonWcTag,{key:"a6e055cb523095f7dfeed9edc1fd4a847973cc55",class:"kol-nav__toggle-button",_ariaControls:"nav",_ariaExpanded:!t,_icons:t?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:i18n.translate(t?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_buttonVariant:"ghost"})))}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()}validateOrientation(n){common.watchValidator(this,"_orientation",(n=>"horizontal"===n||"vertical"===n),new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}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.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){uniqueNavLabels.removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};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-CIQC-OQ4.js"),common=require("./common-BHv-S8J5.js"),customClass=require("./custom-class-CUCK62na.js"),label=require("./label-DLgz6vof.js"),tooltipAlign=require("./tooltip-align-DAf31VLo.js"),i18n=require("./i18n-CR9McMIU.js"),dev_utils=require("./dev.utils-6X4JLbGB.js"),uniqueNavLabels=require("./unique-nav-labels-CL071GRq.js"),componentNames=require("./component-names-D7MwtuB7.js"),events=require("./events-DDhO-Ns8.js");require("./align-BqL0hNQJ.js"),require("./i18n-BLEJ-_9m.js");const validateMax=(t,e,a)=>{common.watchNumber(t,"_max",e,a)},leftDoubleArrowIcon={left:"codicon codicon-debug-reverse-continue"},leftSingleArrow={left:"codicon codicon-chevron-left"},rightSingleArrowIcon={right:"codicon codicon-chevron-right"},rightDoubleArrowIcon={right:"codicon codicon-debug-continue"};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.nonce=dev_utils.nonce(),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:i18n.translate("kol-page-per-site",{placeholders:{entries:`${e}`}}),value:e});e.set("_pageSizeOptions",a),this.beforePageSize(a,e)}}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("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",exportparts:"icon",_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",exportparts:"icon",_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",exportparts:"icon",_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",exportparts:"icon",_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(componentNames.KolSelectTag,{class:"kol-pagination__page-size-select",_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:this.translateEntriesPerSite,_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:this.state._pageSize}))}getUnselectedPageButton(t){return index.h("li",{key:dev_utils.nonce()},index.h(componentNames.KolButtonWcTag,{exportparts:"icon",_customClass:this.state._customClass,_label:"",_on:{onClick:e=>{this.onClick(e,t)}}},index.h("span",{slot:"expert"},index.h("span",{class:"visually-hidden"},this.translatePage)," ",NUMBER_FORMATTER.format(t))))}getSelectedPageButton(t){return index.h("li",{key:dev_utils.nonce()},index.h(componentNames.KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--selected",_customClass:this.state._customClass,_disabled:!0,_label:""},index.h("span",{slot:"expert"},index.h("span",{class:"visually-hidden"},this.translatePage)," ",NUMBER_FORMATTER.format(t))))}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-COuxz9w8.js"),common=require("./common-7TmauOM3.js"),customClass=require("./custom-class-DHvs6l1N.js"),label=require("./label-LeEyJEwm.js"),tooltipAlign=require("./tooltip-align-8GY9k-Cb.js"),i18n=require("./i18n-BZMNivX4.js"),dev_utils=require("./dev.utils-fLQKa-va.js"),uniqueNavLabels=require("./unique-nav-labels-ClNOhgb7.js"),componentNames=require("./component-names-D7MwtuB7.js"),events=require("./events-DDhO-Ns8.js");require("./align-CrvvbVMS.js"),require("./i18n-BLEJ-_9m.js");const validateMax=(t,e,a)=>{common.watchNumber(t,"_max",e,a)},leftDoubleArrowIcon={left:"codicon codicon-debug-reverse-continue"},leftSingleArrow={left:"codicon codicon-chevron-left"},rightSingleArrowIcon={right:"codicon codicon-chevron-right"},rightDoubleArrowIcon={right:"codicon codicon-debug-continue"};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.nonce=dev_utils.nonce(),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:i18n.translate("kol-page-per-site",{placeholders:{entries:`${e}`}}),value:e});e.set("_pageSizeOptions",a),this.beforePageSize(a,e)}}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("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",exportparts:"icon",_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",exportparts:"icon",_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",exportparts:"icon",_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",exportparts:"icon",_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(componentNames.KolSelectTag,{class:"kol-pagination__page-size-select",_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:this.translateEntriesPerSite,_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:this.state._pageSize}))}getUnselectedPageButton(t){return index.h("li",{key:dev_utils.nonce()},index.h(componentNames.KolButtonWcTag,{exportparts:"icon",_customClass:this.state._customClass,_label:"",_on:{onClick:e=>{this.onClick(e,t)}}},index.h("span",{slot:"expert"},index.h("span",{class:"visually-hidden"},this.translatePage)," ",NUMBER_FORMATTER.format(t))))}getSelectedPageButton(t){return index.h("li",{key:dev_utils.nonce()},index.h(componentNames.KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--selected",_customClass:this.state._customClass,_disabled:!0,_label:""},index.h("span",{slot:"expert"},index.h("span",{class:"visually-hidden"},this.translatePage)," ",NUMBER_FORMATTER.format(t))))}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-CIQC-OQ4.js"),componentNames=require("./component-names-D7MwtuB7.js");require("./common-BHv-S8J5.js");const defaultStyleCss="@charset \"UTF-8\";\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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  [role=button],\n  button:not([role=link]),\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 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: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip: rect(0 0 0 0);\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(16rem / 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: grid;\n    place-items: 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    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip__floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\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(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / 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}\n@layer kol-component {\n  .kol-pagination {\n    display: grid;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\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:"14b17e953d67caaa9892271b9c19d40044558418",_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-COuxz9w8.js"),componentNames=require("./component-names-D7MwtuB7.js");require("./common-7TmauOM3.js");const defaultStyleCss="@charset \"UTF-8\";\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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  [role=button],\n  button:not([role=link]),\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 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: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip: rect(0 0 0 0);\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(16rem / 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: grid;\n    place-items: 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    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip__floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\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(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / 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}\n@layer kol-component {\n  .kol-pagination {\n    display: grid;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\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:"14b17e953d67caaa9892271b9c19d40044558418",_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-CIQC-OQ4.js"),alignFloatingElements=require("./align-floating-elements-DGKVt_WY.js"),componentNames=require("./component-names-D7MwtuB7.js");require("./common-BHv-S8J5.js");var align=require("./align-BqL0hNQJ.js");const validatePopoverAlign=(e,t)=>{align.validateAlignment(e,"_popoverAlign",t)},KolPopoverButton=class{constructor(e){index.registerInstance(this,e),this.state={_label:"",_popoverAlign:"bottom"},this.justClosed=!1,this.popoverOpen=!1,this._disabled=!1,this._hideLabel=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){var e;null===(e=this.refPopover)||void 0===e||e.hidePopover()}handleBeforeToggle(e){var t;"closed"===e.newState?(this.justClosed=!0,setTimeout((()=>{this.justClosed=!1}),10)):(this.refPopover&&(this.refPopover.style.visibility="hidden"),null===(t=this.refButton)||void 0===t||t.hideTooltip())}alignPopover(){this.refPopover&&this.refButton&&alignFloatingElements.alignFloatingElements({align:this.state._popoverAlign,floatingElement:this.refPopover,referenceElement:this.refButton})}handleToggle(e){this.popoverOpen="open"===e.newState,this.popoverOpen?this.refPopover&&this.refButton&&(this.cleanupAutoPositioning=alignFloatingElements.autoUpdate(this.refButton,this.refPopover,(()=>{this.alignPopover()}))):this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)}handleButtonClick(){var e;this.justClosed||null===(e=this.refPopover)||void 0===e||e.togglePopover()}componentDidRender(){var e,t;null===(e=this.refPopover)||void 0===e||e.addEventListener("toggle",this.handleToggle.bind(this)),null===(t=this.refPopover)||void 0===t||t.addEventListener("beforetoggle",this.handleBeforeToggle.bind(this))}disconnectedCallback(){var e,t,o;null===(e=this.refPopover)||void 0===e||e.removeEventListener("toggle",this.handleToggle.bind(this)),null===(t=this.refPopover)||void 0===t||t.removeEventListener("beforetoggle",this.handleBeforeToggle.bind(this)),null===(o=this.cleanupAutoPositioning)||void 0===o||o.call(this)}render(){return index.h("div",{key:"ed9bd3791a41c429effa8bba1fd4f835b26e7417",class:"kol-popover-button"},index.h(componentNames.KolButtonWcTag,{key:"43ae7fc22399fd5d6aa526eb9c9402e877a71f3e",_accessKey:this._accessKey,"_aria-controls":"popover",_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this.popoverOpen,_ariaHasPopup:"dialog",_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:this._role,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_buttonVariant:this._variant,"data-testid":"popover-button",class:"kol-popover-button__button",ref:e=>this.refButton=e,onClick:this.handleButtonClick.bind(this)},index.h("slot",{key:"4e312ac4d1c7e5695d78cd48feba9b3738a540a6",name:"expert",slot:"expert"})),index.h("div",{key:"c5dccff4d149aa043963ed1c81ba0f2391526a18",ref:e=>this.refPopover=e,"data-testid":"popover-content",popover:"auto",id:"popover",class:"kol-popover-button__popover"},index.h("slot",{key:"36f4ed8c4df5e3c80d6706ea3bdc440c77b987fc"})))}validatePopoverAlign(e){validatePopoverAlign(this,e)}componentWillLoad(){this.validatePopoverAlign(this._popoverAlign)}static get watchers(){return{_popoverAlign:["validatePopoverAlign"]}}};exports.kol_popover_button_wc=KolPopoverButton;
+"use strict";var index=require("./index-COuxz9w8.js"),alignFloatingElements=require("./align-floating-elements-BMzD_WYa.js"),componentNames=require("./component-names-D7MwtuB7.js");require("./common-7TmauOM3.js");var align=require("./align-CrvvbVMS.js");const validatePopoverAlign=(e,t)=>{align.validateAlignment(e,"_popoverAlign",t)},KolPopoverButton=class{constructor(e){index.registerInstance(this,e),this.state={_label:"",_popoverAlign:"bottom"},this.justClosed=!1,this.popoverOpen=!1,this._disabled=!1,this._hideLabel=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){var e;null===(e=this.refPopover)||void 0===e||e.hidePopover()}handleBeforeToggle(e){var t;"closed"===e.newState?(this.justClosed=!0,setTimeout((()=>{this.justClosed=!1}),10)):(this.refPopover&&(this.refPopover.style.visibility="hidden"),null===(t=this.refButton)||void 0===t||t.hideTooltip())}alignPopover(){this.refPopover&&this.refButton&&alignFloatingElements.alignFloatingElements({align:this.state._popoverAlign,floatingElement:this.refPopover,referenceElement:this.refButton})}handleToggle(e){this.popoverOpen="open"===e.newState,this.popoverOpen?this.refPopover&&this.refButton&&(this.cleanupAutoPositioning=alignFloatingElements.autoUpdate(this.refButton,this.refPopover,(()=>{this.alignPopover()}))):this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)}handleButtonClick(){var e;this.justClosed||null===(e=this.refPopover)||void 0===e||e.togglePopover()}componentDidRender(){var e,t;null===(e=this.refPopover)||void 0===e||e.addEventListener("toggle",this.handleToggle.bind(this)),null===(t=this.refPopover)||void 0===t||t.addEventListener("beforetoggle",this.handleBeforeToggle.bind(this))}disconnectedCallback(){var e,t,o;null===(e=this.refPopover)||void 0===e||e.removeEventListener("toggle",this.handleToggle.bind(this)),null===(t=this.refPopover)||void 0===t||t.removeEventListener("beforetoggle",this.handleBeforeToggle.bind(this)),null===(o=this.cleanupAutoPositioning)||void 0===o||o.call(this)}render(){return index.h("div",{key:"ed9bd3791a41c429effa8bba1fd4f835b26e7417",class:"kol-popover-button"},index.h(componentNames.KolButtonWcTag,{key:"43ae7fc22399fd5d6aa526eb9c9402e877a71f3e",_accessKey:this._accessKey,"_aria-controls":"popover",_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this.popoverOpen,_ariaHasPopup:"dialog",_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:this._role,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_buttonVariant:this._variant,"data-testid":"popover-button",class:"kol-popover-button__button",ref:e=>this.refButton=e,onClick:this.handleButtonClick.bind(this)},index.h("slot",{key:"4e312ac4d1c7e5695d78cd48feba9b3738a540a6",name:"expert",slot:"expert"})),index.h("div",{key:"c5dccff4d149aa043963ed1c81ba0f2391526a18",ref:e=>this.refPopover=e,"data-testid":"popover-content",popover:"auto",id:"popover",class:"kol-popover-button__popover"},index.h("slot",{key:"36f4ed8c4df5e3c80d6706ea3bdc440c77b987fc"})))}validatePopoverAlign(e){validatePopoverAlign(this,e)}componentWillLoad(){this.validatePopoverAlign(this._popoverAlign)}static get watchers(){return{_popoverAlign:["validatePopoverAlign"]}}};exports.kol_popover_button_wc=KolPopoverButton;

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-CIQC-OQ4.js"),componentNames=require("./component-names-D7MwtuB7.js");require("./common-BHv-S8J5.js");const defaultStyleCss="@charset \"UTF-8\";\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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  [role=button],\n  button:not([role=link]),\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 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: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip: rect(0 0 0 0);\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(16rem / 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: grid;\n    place-items: 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    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip__floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\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(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / 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}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    place-items: center;\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\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    width: 100%;\n    margin: auto;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n}",KolPopoverButton=class{constructor(n){index.registerInstance(this,n),this._disabled=!1,this._hideLabel=!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()}render(){return index.h(componentNames.KolPopoverButtonWcTag,{key:"0a44e73709e339e865b30179bf6fb9ae3c43450e",ref:n=>this.ref=n,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_popoverAlign:this._popoverAlign,_role:this._role,_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:"d23b56ded35b20e1449d1cff05b6ad8bafb02a0b",name:"expert",slot:"expert"}),index.h("slot",{key:"70ec7287f91d0333c2849a3a2deb259d13a19d09"}))}};KolPopoverButton.style={default:defaultStyleCss},exports.kol_popover_button=KolPopoverButton;
+"use strict";var index=require("./index-COuxz9w8.js"),componentNames=require("./component-names-D7MwtuB7.js");require("./common-7TmauOM3.js");const defaultStyleCss="@charset \"UTF-8\";\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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  [role=button],\n  button:not([role=link]),\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 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: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip: rect(0 0 0 0);\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(16rem / 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: grid;\n    place-items: 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    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip__floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\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(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / 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}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    place-items: center;\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\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    width: 100%;\n    margin: auto;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n}",KolPopoverButton=class{constructor(n){index.registerInstance(this,n),this._disabled=!1,this._hideLabel=!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()}render(){return index.h(componentNames.KolPopoverButtonWcTag,{key:"0a44e73709e339e865b30179bf6fb9ae3c43450e",ref:n=>this.ref=n,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_popoverAlign:this._popoverAlign,_role:this._role,_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:"d23b56ded35b20e1449d1cff05b6ad8bafb02a0b",name:"expert",slot:"expert"}),index.h("slot",{key:"70ec7287f91d0333c2849a3a2deb259d13a19d09"}))}};KolPopoverButton.style={default:defaultStyleCss},exports.kol_popover_button=KolPopoverButton;

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-CIQC-OQ4.js"),common=require("./common-BHv-S8J5.js"),align=require("./align-BqL0hNQJ.js"),show=require("./show-CQIqnU_A.js"),alignFloatingElements=require("./align-floating-elements-DGKVt_WY.js"),clsx=require("./clsx-CkZlkaek.js"),events=require("./events-DDhO-Ns8.js");const validatePopoverCallbacks=(e,t)=>{common.watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)},KolPopover=class{constructor(e){index.registerInstance(this,e),this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover(e)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}async showPopover(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(await alignFloatingElements.alignFloatingElements({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))}hidePopover(e){var t,s,i;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody(),null===(i=null===(s=this.state._on)||void 0===s?void 0:s.onClose)||void 0===i||i.call(s,e),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.close)}addListenersToBody(){var e;const t=common.getDocument().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const t=common.getDocument().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return index.h(index.Host,{key:"53179ace5c0dfabbe1dd00ba8ddfe453ef55ccd5",ref:this.catchHostAndTriggerElement,class:"kol-popover"},index.h("div",{key:"f42aafe81aaa0a09526b4e9923a96133ee81c5d2",class:clsx.clsx("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,hidden:!this.state._show},index.h("div",{key:"25719436c820c214a2e3c0fac47449f842c4f68c",class:clsx.clsx("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),index.h("slot",{key:"fff04758761fb36389c6698b17730b604981ca66"})))}validateAlign(e){align.validateAlign(this,e)}validateOn(e){validatePopoverCallbacks(this,e)}validateShow(e){show.validateShow(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}};exports.kol_popover_wc=KolPopover;
+"use strict";var index=require("./index-COuxz9w8.js"),common=require("./common-7TmauOM3.js"),align=require("./align-CrvvbVMS.js"),show=require("./show-ncAxtXB9.js"),alignFloatingElements=require("./align-floating-elements-BMzD_WYa.js"),clsx=require("./clsx-CkZlkaek.js"),events=require("./events-DDhO-Ns8.js");const validatePopoverCallbacks=(e,t)=>{common.watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)},KolPopover=class{constructor(e){index.registerInstance(this,e),this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover(e)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}async showPopover(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(await alignFloatingElements.alignFloatingElements({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))}hidePopover(e){var t,s,i;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody(),null===(i=null===(s=this.state._on)||void 0===s?void 0:s.onClose)||void 0===i||i.call(s,e),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.close)}addListenersToBody(){var e;const t=common.getDocument().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const t=common.getDocument().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return index.h(index.Host,{key:"53179ace5c0dfabbe1dd00ba8ddfe453ef55ccd5",ref:this.catchHostAndTriggerElement,class:"kol-popover"},index.h("div",{key:"f42aafe81aaa0a09526b4e9923a96133ee81c5d2",class:clsx.clsx("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,hidden:!this.state._show},index.h("div",{key:"25719436c820c214a2e3c0fac47449f842c4f68c",class:clsx.clsx("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),index.h("slot",{key:"fff04758761fb36389c6698b17730b604981ca66"})))}validateAlign(e){align.validateAlign(this,e)}validateOn(e){validatePopoverCallbacks(this,e)}validateShow(e){show.validateShow(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}};exports.kol_popover_wc=KolPopover;

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-CIQC-OQ4.js"),common=require("./common-BHv-S8J5.js"),label=require("./label-DLgz6vof.js");const validateUnit=(e,t)=>{common.watchString(e,"_unit",t)},progressVariantOptions=["bar","cycle"],isProgressVariantPropType=e=>"string"==typeof e&&progressVariantOptions.includes(e),validateVariantProgress=(e,t)=>{common.watchValidator(e,"_variant",isProgressVariantPropType,new Set(progressVariantOptions),t)},defaultStyleCss="/* 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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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  [role=button],\n  button:not([role=link]),\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 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: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip: rect(0 0 0 0);\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(16rem / 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: grid;\n    place-items: 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    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-progress__bar {\n    display: grid;\n    column-gap: 0.05rem;\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}",CycleSvg=({state:e})=>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(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),BarSvg=({state:e})=>{const t=e._value/e._max*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(${t}% - 4px)`}}))},createProgressSVG=e=>{switch(e._variant){case"cycle":return index.h(CycleSvg,{state:e});case"bar":return index.h(BarSvg,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}},KolProgress=class{constructor(e){index.registerInstance(this,e),this._unit="%",this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){const e="%"===this.state._unit,t=e?`${Math.round(this.state._liveValue/this.state._max*100)}`:this.state._liveValue,n=e?Math.round(this.state._value/this.state._max*100):this.state._value;return index.h("div",{key:"30c2914505a2921a767ffb7b9e8e120bf2c0f371",class:"kol-progress"},index.h("div",{key:"b78153292354cb734b5ce72cb024b7b05ff65ecb","aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===this.state._variant,"kol-progress__bar":"bar"===this.state._variant}},"bar"===this.state._variant&&this.state._label&&index.h("div",{key:"d19dd3020c5e756eee36d11ed3f108d74ae2ad3b",class:"kol-progress__bar-label"},this.state._label),createProgressSVG(this.state),"cycle"===this.state._variant&&index.h("div",{key:"412a00560e3d04e9eaba630bc18b1b0911a1739e",class:"kol-progress__cycle-text"},this.state._label&&index.h("div",{key:"6c95c1357dfbfb5e9659081753c19c977ec1d307",class:"kol-progress__cycle-label"},this.state._label),index.h("div",{key:"654bb1038ac1202cec59740dcfb781a83e7f3b0e",class:"kol-progress__cycle-value"},`${n} ${this.state._unit}`)),"bar"===this.state._variant&&index.h("div",{key:"79f03f81f500e7806c470f7e862e84d923ca019a",class:"kol-progress__bar-value",style:{width:`${`${(e?100:this.state._max)+1}`.length}ch`}},n),"bar"===this.state._variant&&index.h("div",{key:"91e7c2d27ad4734119d125b7839d8c64ac67b089",class:"kol-progress__bar-unit"},this.state._unit)),index.h("progress",{key:"036f25010c9d5581020aa33c8dd2c2e562a421be",class:"visually-hidden","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),index.h("span",{key:"9704c069d644b44000003e1147395f930e634dd7","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},e?`${t} %`:`${t} von ${this.state._max} ${this.state._unit}`))}validateLabel(e){label.validateLabel(this,e)}validateMax(e){"number"!=typeof e&&(e=100),common.watchNumber(this,"_max",e,{required:!0})}validateUnit(e){validateUnit(this,e)}validateValue(e){"number"!=typeof e&&(e=0),common.watchNumber(this,"_value",e,{required:!0})}validateVariant(e){validateVariantProgress(this,e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};KolProgress.style={default:defaultStyleCss},exports.kol_progress=KolProgress;
+"use strict";var index=require("./index-COuxz9w8.js"),common=require("./common-7TmauOM3.js"),label=require("./label-LeEyJEwm.js");const validateUnit=(e,t)=>{common.watchString(e,"_unit",t)},progressVariantOptions=["bar","cycle"],isProgressVariantPropType=e=>"string"==typeof e&&progressVariantOptions.includes(e),validateVariantProgress=(e,t)=>{common.watchValidator(e,"_variant",isProgressVariantPropType,new Set(progressVariantOptions),t)},defaultStyleCss="/* 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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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  [role=button],\n  button:not([role=link]),\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 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: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip: rect(0 0 0 0);\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(16rem / 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: grid;\n    place-items: 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    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-progress__bar {\n    display: grid;\n    column-gap: 0.05rem;\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}",CycleSvg=({state:e})=>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(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),BarSvg=({state:e})=>{const t=e._value/e._max*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(${t}% - 4px)`}}))},createProgressSVG=e=>{switch(e._variant){case"cycle":return index.h(CycleSvg,{state:e});case"bar":return index.h(BarSvg,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}},KolProgress=class{constructor(e){index.registerInstance(this,e),this._unit="%",this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){const e="%"===this.state._unit,t=e?`${Math.round(this.state._liveValue/this.state._max*100)}`:this.state._liveValue,n=e?Math.round(this.state._value/this.state._max*100):this.state._value;return index.h("div",{key:"30c2914505a2921a767ffb7b9e8e120bf2c0f371",class:"kol-progress"},index.h("div",{key:"b78153292354cb734b5ce72cb024b7b05ff65ecb","aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===this.state._variant,"kol-progress__bar":"bar"===this.state._variant}},"bar"===this.state._variant&&this.state._label&&index.h("div",{key:"d19dd3020c5e756eee36d11ed3f108d74ae2ad3b",class:"kol-progress__bar-label"},this.state._label),createProgressSVG(this.state),"cycle"===this.state._variant&&index.h("div",{key:"412a00560e3d04e9eaba630bc18b1b0911a1739e",class:"kol-progress__cycle-text"},this.state._label&&index.h("div",{key:"6c95c1357dfbfb5e9659081753c19c977ec1d307",class:"kol-progress__cycle-label"},this.state._label),index.h("div",{key:"654bb1038ac1202cec59740dcfb781a83e7f3b0e",class:"kol-progress__cycle-value"},`${n} ${this.state._unit}`)),"bar"===this.state._variant&&index.h("div",{key:"79f03f81f500e7806c470f7e862e84d923ca019a",class:"kol-progress__bar-value",style:{width:`${`${(e?100:this.state._max)+1}`.length}ch`}},n),"bar"===this.state._variant&&index.h("div",{key:"91e7c2d27ad4734119d125b7839d8c64ac67b089",class:"kol-progress__bar-unit"},this.state._unit)),index.h("progress",{key:"036f25010c9d5581020aa33c8dd2c2e562a421be",class:"visually-hidden","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),index.h("span",{key:"9704c069d644b44000003e1147395f930e634dd7","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},e?`${t} %`:`${t} von ${this.state._max} ${this.state._unit}`))}validateLabel(e){label.validateLabel(this,e)}validateMax(e){"number"!=typeof e&&(e=100),common.watchNumber(this,"_max",e,{required:!0})}validateUnit(e){validateUnit(this,e)}validateValue(e){"number"!=typeof e&&(e=0),common.watchNumber(this,"_value",e,{required:!0})}validateVariant(e){validateVariantProgress(this,e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};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-CIQC-OQ4.js"),common=require("./common-BHv-S8J5.js"),label=require("./label-DLgz6vof.js"),componentNames=require("./component-names-D7MwtuB7.js"),clsx=require("./clsx-CkZlkaek.js");const validateQuote=(e,n)=>{common.watchString(e,"_quote",n,{required:!0})},quoteVariantOptions=["block","inline"],isQuoteVariantPropType=e=>"string"==typeof e&&quoteVariantOptions.includes(e),validateVariantQuote=(e,n)=>{common.watchValidator(e,"_variant",isQuoteVariantPropType,new Set(quoteVariantOptions),n)},defaultStyleCss="@charset \"UTF-8\";\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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  [role=button],\n  button:not([role=link]),\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 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: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip: rect(0 0 0 0);\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(16rem / 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: grid;\n    place-items: 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    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-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__cite::before {\n    padding-right: 0.5em;\n  }\n  .kol-quote--inline .kol-quote__cite::before {\n    padding: 0.5em;\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._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){label.validateLabel(this,e)}validateHref(e){common.watchString(this,"_href",e,{required:!0})}validateQuote(e){validateQuote(this,e)}validateVariant(e){validateVariantQuote(this,e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=common.showExpertSlot(this.state._quote);return index.h("figure",{key:"3577d4eb15e4d4fb90bb23b73b070b84af133407",class:clsx.clsx("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?index.h("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?void 0:"true",hidden:!e},index.h("slot",{name:"expert"}))):index.h("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?void 0:"true",hidden:!e},index.h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&index.h("figcaption",{key:"1b5f3dd6c8b687afdc02679fb0d4a2ec978c2adf",class:"kol-quote__figcaption"},index.h("cite",{key:"bfe86e4a9b0e10a45973d76f68c699771f59b4be",class:"kol-quote__cite"},index.h(componentNames.KolLinkTag,{key:"146d5d83a83a8b8a5688be828a605c65c0d703dd",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};KolQuote.style={default:defaultStyleCss},exports.kol_quote=KolQuote;
+"use strict";var index=require("./index-COuxz9w8.js"),common=require("./common-7TmauOM3.js"),reuse=require("./reuse-Cs36Ddzu.js"),label=require("./label-LeEyJEwm.js"),componentNames=require("./component-names-D7MwtuB7.js"),clsx=require("./clsx-CkZlkaek.js");const validateQuote=(e,n)=>{common.watchString(e,"_quote",n,{required:!0})},quoteVariantOptions=["block","inline"],isQuoteVariantPropType=e=>"string"==typeof e&&quoteVariantOptions.includes(e),validateVariantQuote=(e,n)=>{common.watchValidator(e,"_variant",isQuoteVariantPropType,new Set(quoteVariantOptions),n)},defaultStyleCss="@charset \"UTF-8\";\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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  [role=button],\n  button:not([role=link]),\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 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: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip: rect(0 0 0 0);\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(16rem / 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: grid;\n    place-items: 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    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-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__cite::before {\n    padding-right: 0.5em;\n  }\n  .kol-quote--inline .kol-quote__cite::before {\n    padding: 0.5em;\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._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){label.validateLabel(this,e)}validateHref(e){common.watchString(this,"_href",e,{required:!0})}validateQuote(e){validateQuote(this,e)}validateVariant(e){validateVariantQuote(this,e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=reuse.showExpertSlot(this.state._quote);return index.h("figure",{key:"3577d4eb15e4d4fb90bb23b73b070b84af133407",class:clsx.clsx("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?index.h("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?void 0:"true",hidden:!e},index.h("slot",{name:"expert"}))):index.h("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?void 0:"true",hidden:!e},index.h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&index.h("figcaption",{key:"1b5f3dd6c8b687afdc02679fb0d4a2ec978c2adf",class:"kol-quote__figcaption"},index.h("cite",{key:"bfe86e4a9b0e10a45973d76f68c699771f59b4be",class:"kol-quote__cite"},index.h(componentNames.KolLinkTag,{key:"146d5d83a83a8b8a5688be828a605c65c0d703dd",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};KolQuote.style={default:defaultStyleCss},exports.kol_quote=KolQuote;

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

@@ -1 +1 @@
-{"file":"kol-quote.entry.cjs.js","mappings":"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","names":["watchString","watchValidator","validateLabel","showExpertSlot","h","clsx","KolLinkTag"],"sources":["src/schema/props/quote.ts","src/schema/props/variant-quote.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchString } from '../utils';\n\nexport type QuotePropType = string;\n\n/**\n * Defines the text of the quote.\n */\nexport type PropQuote = {\n\tquote: QuotePropType;\n};\n\nexport const validateQuote = (component: Generic.Element.Component, value?: QuotePropType): void => {\n\twatchString(component, '_quote', value, {\n\t\trequired: true,\n\t});\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../utils';\n\nexport const quoteVariantOptions = ['block', 'inline'] as const;\nexport type QuoteVariantPropType = (typeof quoteVariantOptions)[number];\n\n/**\n * Defines the variant for presenting quotes.\n */\nexport type PropVariantQuote = {\n\tvariant: QuoteVariantPropType;\n};\n\nconst isQuoteVariantPropType = (value: unknown): value is QuoteVariantPropType => {\n\treturn typeof value === 'string' && quoteVariantOptions.includes(value as QuoteVariantPropType);\n};\n\nexport const validateVariantQuote = (component: Generic.Element.Component, value?: QuoteVariantPropType): void => {\n\twatchValidator(component, '_variant', isQuoteVariantPropType, new Set(quoteVariantOptions), value);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-quote {\n\t\t$root: &;\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&__cite {\n\t\t\t&::before {\n\t\t\t\t@at-root #{$root}--block & {\n\t\t\t\t\tpadding-right: 0.5em;\n\t\t\t\t}\n\n\t\t\t\t@at-root #{$root}--inline & {\n\t\t\t\t\tpadding: 0.5em;\n\t\t\t\t}\n\t\t\t\tcontent: '—';\n\t\t\t}\n\t\t}\n\n\t\t&__figcaption {\n\t\t\t@at-root #{$root}--block & {\n\t\t\t\tdisplay: inline;\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t}\n\n\t\t&__blockquote {\n\t\t\t&::before {\n\t\t\t\tcontent: open-quote;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: close-quote;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { HrefPropType, LabelPropType, QuoteAPI, QuotePropType, QuoteStates, QuoteVariantPropType } from '../../schema';\nimport { showExpertSlot, validateLabel, validateQuote, validateVariantQuote, watchString } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkTag } from '../../core/component-names';\nimport clsx from 'clsx';\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements QuoteAPI {\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: QuoteVariantPropType = 'inline';\n\n\t@State() public state: QuoteStates = {\n\t\t_href: '', // ⚠ required\n\t\t_quote: '', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: QuotePropType): void {\n\t\tvalidateQuote(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: QuoteVariantPropType): void {\n\t\tvalidateVariantQuote(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\n\t\treturn (\n\t\t\t<figure class={clsx('kol-quote', `kol-quote--${this.state._variant}`)}>\n\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t<blockquote class=\"kol-quote__blockquote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</blockquote>\n\t\t\t\t) : (\n\t\t\t\t\t<q class=\"kol-quote__quote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</q>\n\t\t\t\t)}\n\t\t\t\t{typeof this.state._label === 'string' && this.state._label.length > 0 && (\n\t\t\t\t\t<figcaption class=\"kol-quote__figcaption\">\n\t\t\t\t\t\t<cite class=\"kol-quote__cite\">\n\t\t\t\t\t\t\t<KolLinkTag _href={this.state._href} _label={this.state._label} _target=\"_blank\" />\n\t\t\t\t\t\t</cite>\n\t\t\t\t\t</figcaption>\n\t\t\t\t)}\n\t\t\t</figure>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-quote.entry.cjs.js","mappings":"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","names":["watchString","watchValidator","validateLabel","showExpertSlot","h","clsx","KolLinkTag"],"sources":["src/schema/props/quote.ts","src/schema/props/variant-quote.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchString } from '../utils';\n\nexport type QuotePropType = string;\n\n/**\n * Defines the text of the quote.\n */\nexport type PropQuote = {\n\tquote: QuotePropType;\n};\n\nexport const validateQuote = (component: Generic.Element.Component, value?: QuotePropType): void => {\n\twatchString(component, '_quote', value, {\n\t\trequired: true,\n\t});\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../utils';\n\nexport const quoteVariantOptions = ['block', 'inline'] as const;\nexport type QuoteVariantPropType = (typeof quoteVariantOptions)[number];\n\n/**\n * Defines the variant for presenting quotes.\n */\nexport type PropVariantQuote = {\n\tvariant: QuoteVariantPropType;\n};\n\nconst isQuoteVariantPropType = (value: unknown): value is QuoteVariantPropType => {\n\treturn typeof value === 'string' && quoteVariantOptions.includes(value as QuoteVariantPropType);\n};\n\nexport const validateVariantQuote = (component: Generic.Element.Component, value?: QuoteVariantPropType): void => {\n\twatchValidator(component, '_variant', isQuoteVariantPropType, new Set(quoteVariantOptions), value);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-quote {\n\t\t$root: &;\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&__cite {\n\t\t\t&::before {\n\t\t\t\t@at-root #{$root}--block & {\n\t\t\t\t\tpadding-right: 0.5em;\n\t\t\t\t}\n\n\t\t\t\t@at-root #{$root}--inline & {\n\t\t\t\t\tpadding: 0.5em;\n\t\t\t\t}\n\t\t\t\tcontent: '—';\n\t\t\t}\n\t\t}\n\n\t\t&__figcaption {\n\t\t\t@at-root #{$root}--block & {\n\t\t\t\tdisplay: inline;\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t}\n\n\t\t&__blockquote {\n\t\t\t&::before {\n\t\t\t\tcontent: open-quote;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: close-quote;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { HrefPropType, LabelPropType, QuoteAPI, QuotePropType, QuoteStates, QuoteVariantPropType } from '../../schema';\nimport { showExpertSlot, validateLabel, validateQuote, validateVariantQuote, watchString } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkTag } from '../../core/component-names';\nimport clsx from 'clsx';\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements QuoteAPI {\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: QuoteVariantPropType = 'inline';\n\n\t@State() public state: QuoteStates = {\n\t\t_href: '', // ⚠ required\n\t\t_quote: '', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: QuotePropType): void {\n\t\tvalidateQuote(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: QuoteVariantPropType): void {\n\t\tvalidateVariantQuote(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\n\t\treturn (\n\t\t\t<figure class={clsx('kol-quote', `kol-quote--${this.state._variant}`)}>\n\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t<blockquote class=\"kol-quote__blockquote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</blockquote>\n\t\t\t\t) : (\n\t\t\t\t\t<q class=\"kol-quote__quote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</q>\n\t\t\t\t)}\n\t\t\t\t{typeof this.state._label === 'string' && this.state._label.length > 0 && (\n\t\t\t\t\t<figcaption class=\"kol-quote__figcaption\">\n\t\t\t\t\t\t<cite class=\"kol-quote__cite\">\n\t\t\t\t\t\t\t<KolLinkTag _href={this.state._href} _label={this.state._label} _target=\"_blank\" />\n\t\t\t\t\t\t</cite>\n\t\t\t\t\t</figcaption>\n\t\t\t\t)}\n\t\t\t</figure>\n\t\t);\n\t}\n}\n"],"version":3}