@public-ui/components 3.0.0-rc.8 → 3.0.0

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-f59a950a.js"),componentNames=require("./component-names-82c4d68d.js"),defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\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    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 1px solid #000;\n    margin: 0;\n    padding: 0;\n  }\n}",KolPopoverButtonDefaultStyle0=defaultStyleCss,KolPopoverButton=class{constructor(n){index.registerInstance(this,n),this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._popoverAlign="bottom",this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}async hidePopover(){var n;null===(n=this.ref)||void 0===n||n.hidePopover()}render(){return index.h(componentNames.KolPopoverButtonWcTag,{key:"91232672e2a7afde6b9e2ddaccf6bc551d51d803",ref:n=>this.ref=n,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_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:"a45cbf8faa7f7f3c42c433d07a0b6734b480f51d",name:"expert",slot:"expert"}),index.h("slot",{key:"8a25b26b9e518dafe033b4f690ebbc94cde75aeb"}))}};KolPopoverButton.style={default:KolPopoverButtonDefaultStyle0},exports.kol_popover_button=KolPopoverButton;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-03ef29aa.js"),componentNames=require("./component-names-82c4d68d.js"),defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\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    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 1px solid #000;\n    margin: 0;\n    padding: 0;\n  }\n}",KolPopoverButtonDefaultStyle0=defaultStyleCss,KolPopoverButton=class{constructor(n){index.registerInstance(this,n),this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._popoverAlign="bottom",this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}async hidePopover(){var n;null===(n=this.ref)||void 0===n||n.hidePopover()}render(){return index.h(componentNames.KolPopoverButtonWcTag,{key:"c47261012fde8a6ea604dffc419673425b7bcb1c",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:"5e50afed8e6312299acb9936a092159df9fa32c9",name:"expert",slot:"expert"}),index.h("slot",{key:"0f6c9b9ef137e6564f7d2d11d88e336340444d03"}))}};KolPopoverButton.style={default:KolPopoverButtonDefaultStyle0},exports.kol_popover_button=KolPopoverButton;

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

@@ -1 +1 @@
-{"file":"kol-popover-button.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,mgMAAmgM,CAAC;AAC5hM,sCAAe,eAAe;;MC+BjB,gBAAgB;;;;;;;;;yBA8ES,KAAK;0BAOJ,KAAK;;;;;;6BA8BW,QAAQ;;;;;6BA0BR,KAAK;qBAKf,QAAQ;;wBAUF,QAAQ;;IApJnD,MAAM,WAAW;;QACvB,MAAK,MAAA,IAAI,CAAC,GAAG,0CAAE,WAAW,EAAE,CAAA,CAAC;KAC7B;IAEM,MAAM;QACZ,QACCA,QAACC,oCAAqB,qDACrB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,EACtC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvBD,mEAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,EACzCA,oEAAQ,CACe,EACvB;KACF;;;;;;;;","names":["h","KolPopoverButtonWcTag"],"sources":["src/components/popover-button/style.scss?tag=kol-popover-button&mode=default&encapsulation=shadow","src/components/popover-button/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../@shared/kol-button-mixin' as *;\n@use '../@shared/kol-popover-button-mixin' as *;\n@use '../tooltip/style' as *;\n\n@include kol-button-styles('kol-button');\n@include kol-popover-button-styles;\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\n/**\n * @slot - The popover content.\n */\n@Component({\n\ttag: 'kol-popover-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPopoverButton implements PopoverButtonProps {\n\tprivate ref?: HTMLKolPopoverButtonWcElement;\n\n\t/**\n\t * Hides the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.ref?.hidePopover();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={(element) => (this.ref = element)}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_id={this._id}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_popoverAlign={this._popoverAlign}\n\t\t\t\t_role={this._role}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t<slot />\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"],"version":3}
+{"file":"kol-popover-button.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,mgMAAmgM,CAAC;AAC5hM,sCAAe,eAAe;;MC8BjB,gBAAgB;;;;;;;;yBAwES,KAAK;0BAOJ,KAAK;;;;;;6BA8BW,QAAQ;;;;;6BA0BR,KAAK;qBAKf,QAAQ;;wBAUF,QAAQ;;IA9InD,MAAM,WAAW;;QACvB,MAAK,MAAA,IAAI,CAAC,GAAG,0CAAE,WAAW,EAAE,CAAA,CAAC;KAC7B;IAEM,MAAM;QACZ,QACCA,QAACC,oCAAqB,qDACrB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,EACtC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvBD,mEAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,EACzCA,oEAAQ,CACe,EACvB;KACF;;;;;;;;","names":["h","KolPopoverButtonWcTag"],"sources":["src/components/popover-button/style.scss?tag=kol-popover-button&mode=default&encapsulation=shadow","src/components/popover-button/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../@shared/kol-button-mixin' as *;\n@use '../@shared/kol-popover-button-mixin' as *;\n@use '../tooltip/style' as *;\n\n@include kol-button-styles('kol-button');\n@include kol-popover-button-styles;\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\n/**\n * @slot - The popover content.\n */\n@Component({\n\ttag: 'kol-popover-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPopoverButton implements PopoverButtonProps {\n\tprivate ref?: HTMLKolPopoverButtonWcElement;\n\n\t/**\n\t * Hides the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.ref?.hidePopover();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={(element) => (this.ref = element)}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_id={this._id}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_popoverAlign={this._popoverAlign}\n\t\t\t\t_role={this._role}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t<slot />\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-f59a950a.js"),alignFloatingElements=require("./align-floating-elements-f88156a1.js"),clsx=require("./clsx-dd4d6dd1.js"),events=require("./events-40771c95.js"),prop_validators=require("./prop.validators-3c86f8eb.js"),dev_utils=require("./dev.utils-58fde089.js"),align=require("./align-a9f24187.js"),show=require("./show-0625d136.js");require("./reuse-8650ea4e.js"),require("./index-c77a4142.js");const validatePopoverCallbacks=(e,t)=>{prop_validators.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._on=void 0,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=dev_utils.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=dev_utils.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:"23e4ea8f366f0263df0099ee1f804412ccd05892",ref:this.catchHostAndTriggerElement,class:"kol-popover"},index.h("div",{key:"f0b966725406619aecf64015f1cdebe11c24b047",class:clsx.clsx("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,hidden:!this.state._show},index.h("div",{key:"629b53f52ff434ef87738dfccb8c346a15f39c40",class:clsx.clsx("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),index.h("slot",{key:"afa7350520898288c61b7f65b07978c9a81c7289"})))}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";Object.defineProperty(exports,"__esModule",{value:!0});const index$1=require("./index-03ef29aa.js"),index=require("./index-8b802221.js"),alignFloatingElements=require("./align-floating-elements-44e9ce7f.js"),clsx=require("./clsx-dd4d6dd1.js"),events=require("./events-40771c95.js"),align=require("./align-4abb9b20.js"),show=require("./show-f24ad825.js"),validatePopoverCallbacks=(e,t)=>{index.watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)},KolPopover=class{constructor(e){index$1.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._on=void 0,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,i,s;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===(s=null===(i=this.state._on)||void 0===i?void 0:i.onClose)||void 0===s||s.call(i,e),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.close)}addListenersToBody(){var e;const t=index.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=index.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$1.h(index$1.Host,{key:"23e4ea8f366f0263df0099ee1f804412ccd05892",ref:this.catchHostAndTriggerElement,class:"kol-popover"},index$1.h("div",{key:"f0b966725406619aecf64015f1cdebe11c24b047",class:clsx.clsx("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,hidden:!this.state._show},index$1.h("div",{key:"629b53f52ff434ef87738dfccb8c346a15f39c40",class:clsx.clsx("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),index$1.h("slot",{key:"afa7350520898288c61b7f65b07978c9a81c7289"})))}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-popover-wc.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"kol-popover-wc.entry.cjs.js","mappings":"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","names":["watchValidator","alignFloatingElements","dispatchDomEvent","KolEvent","getDocument","h","Host","clsx","validateAlign","validateShow"],"sources":["src/schema/props/popover-callbacks.ts","src/components/popover/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Callback } from '../enums';\nimport type { EventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type PopoverCallbacksPropType = {\n\t[Callback.onClose]?: EventCallback<MouseEvent | KeyboardEvent>;\n};\n\n/**\n * Defines the callback functions for popover events.\n */\nexport type PropPopoverCallbacks = {\n\ton: PopoverCallbacksPropType;\n};\n\n/* validator */\nexport const validatePopoverCallbacks = (component: Generic.Element.Component, value?: PopoverCallbacksPropType): void => {\n\twatchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['PopoverCallbacksPropType {Events.onClose}']), value);\n};\n","import type { AlignPropType, PopoverAPI, PopoverCallbacksPropType, PopoverStates, ShowPropType } from '../../schema';\nimport { getDocument, validateAlign, validatePopoverCallbacks, validateShow } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { alignFloatingElements } from '../../utils/align-floating-elements';\nimport clsx from 'clsx';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * @internal\n * @slot - The popover content.\n */\n@Component({\n\ttag: 'kol-popover-wc',\n\tshadow: false,\n})\nexport class KolPopover implements PopoverAPI {\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement | null;\n\tprivate host?: HTMLElement;\n\n\tprivate async showPopover(): Promise<void> {\n\t\tthis.addListenersToBody();\n\n\t\tif (this.triggerElement && this.popoverElement) {\n\t\t\tawait alignFloatingElements({\n\t\t\t\talign: this._align,\n\t\t\t\treferenceElement: this.triggerElement,\n\t\t\t\tarrowElement: this.arrowElement,\n\t\t\t\tfloatingElement: this.popoverElement,\n\t\t\t});\n\t\t\tthis.state = { ...this.state, _visible: true };\n\t\t}\n\t}\n\tprivate hidePopover(event: MouseEvent | KeyboardEvent): void {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_visible: false,\n\t\t};\n\t\tthis._show = false;\n\t\tthis.triggerElement?.focus();\n\t\tthis.removeListenersToBody();\n\n\t\tthis.state._on?.onClose?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover(event);\n\t};\n\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover(event);\n\t\t}\n\t};\n\n\t/* EventListener functions */\n\tprivate addListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.addEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.addEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.addEventListener(\n\t\t\t'scroll',\n\t\t\t() => {\n\t\t\t\tvoid this.showPopover();\n\t\t\t},\n\t\t\t{ passive: true },\n\t\t);\n\t}\n\tprivate removeListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.removeEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.removeEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.removeEventListener('scroll', () => {\n\t\t\tvoid this.showPopover();\n\t\t});\n\t}\n\n\t/* catchElement functions */\n\tprivate catchHostAndTriggerElement = (element: HTMLElement | null): void => {\n\t\tif (element) {\n\t\t\tthis.host = element;\n\t\t\tthis.triggerElement = element.previousElementSibling as HTMLElement | null;\n\t\t}\n\t};\n\tprivate catchPopoverElement = (element?: HTMLDivElement): void => {\n\t\tthis.popoverElement = element;\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostAndTriggerElement} class=\"kol-popover\">\n\t\t\t\t<div\n\t\t\t\t\tclass={clsx('kol-popover__content', { 'kol-popover__content--visible': this.state._visible })}\n\t\t\t\t\tref={this.catchPopoverElement}\n\t\t\t\t\thidden={!this.state._show}\n\t\t\t\t>\n\t\t\t\t\t<div class={clsx('kol-popover__arrow', `kol-popover__arrow--${this.state._align}`)} ref={this.catchArrowElement} />\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the alignment of the tooltip, popover or tabs in relation to the element.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines the callback functions for popover events.\n\t */\n\t@Prop() public _on?: PopoverCallbacksPropType;\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: PopoverStates = {\n\t\t_align: 'top',\n\t\t_on: {},\n\t\t_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: PopoverCallbacksPropType): void {\n\t\tvalidatePopoverCallbacks(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) void this.showPopover();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"version":3}
+{"file":"kol-popover-wc.entry.cjs.js","mappings":"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","names":["watchValidator","alignFloatingElements","dispatchDomEvent","KolEvent","getDocument","h","Host","clsx","validateAlign","validateShow"],"sources":["src/schema/props/popover-callbacks.ts","src/components/popover/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Callback } from '../enums';\nimport type { EventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type PopoverCallbacksPropType = {\n\t[Callback.onClose]?: EventCallback<MouseEvent | KeyboardEvent>;\n};\n\n/**\n * Defines the callback functions for popover events.\n */\nexport type PropPopoverCallbacks = {\n\ton: PopoverCallbacksPropType;\n};\n\n/* validator */\nexport const validatePopoverCallbacks = (component: Generic.Element.Component, value?: PopoverCallbacksPropType): void => {\n\twatchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['PopoverCallbacksPropType {Events.onClose}']), value);\n};\n","import type { AlignPropType, PopoverAPI, PopoverCallbacksPropType, PopoverStates, ShowPropType } from '../../schema';\nimport { getDocument, validateAlign, validatePopoverCallbacks, validateShow } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { alignFloatingElements } from '../../utils/align-floating-elements';\nimport clsx from 'clsx';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * @internal\n * @slot - The popover content.\n */\n@Component({\n\ttag: 'kol-popover-wc',\n\tshadow: false,\n})\nexport class KolPopover implements PopoverAPI {\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement | null;\n\tprivate host?: HTMLElement;\n\n\tprivate async showPopover(): Promise<void> {\n\t\tthis.addListenersToBody();\n\n\t\tif (this.triggerElement && this.popoverElement) {\n\t\t\tawait alignFloatingElements({\n\t\t\t\talign: this._align,\n\t\t\t\treferenceElement: this.triggerElement,\n\t\t\t\tarrowElement: this.arrowElement,\n\t\t\t\tfloatingElement: this.popoverElement,\n\t\t\t});\n\t\t\tthis.state = { ...this.state, _visible: true };\n\t\t}\n\t}\n\tprivate hidePopover(event: MouseEvent | KeyboardEvent): void {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_visible: false,\n\t\t};\n\t\tthis._show = false;\n\t\tthis.triggerElement?.focus();\n\t\tthis.removeListenersToBody();\n\n\t\tthis.state._on?.onClose?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover(event);\n\t};\n\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover(event);\n\t\t}\n\t};\n\n\t/* EventListener functions */\n\tprivate addListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.addEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.addEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.addEventListener(\n\t\t\t'scroll',\n\t\t\t() => {\n\t\t\t\tvoid this.showPopover();\n\t\t\t},\n\t\t\t{ passive: true },\n\t\t);\n\t}\n\tprivate removeListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.removeEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.removeEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.removeEventListener('scroll', () => {\n\t\t\tvoid this.showPopover();\n\t\t});\n\t}\n\n\t/* catchElement functions */\n\tprivate catchHostAndTriggerElement = (element: HTMLElement | null): void => {\n\t\tif (element) {\n\t\t\tthis.host = element;\n\t\t\tthis.triggerElement = element.previousElementSibling as HTMLElement | null;\n\t\t}\n\t};\n\tprivate catchPopoverElement = (element?: HTMLDivElement): void => {\n\t\tthis.popoverElement = element;\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostAndTriggerElement} class=\"kol-popover\">\n\t\t\t\t<div\n\t\t\t\t\tclass={clsx('kol-popover__content', { 'kol-popover__content--visible': this.state._visible })}\n\t\t\t\t\tref={this.catchPopoverElement}\n\t\t\t\t\thidden={!this.state._show}\n\t\t\t\t>\n\t\t\t\t\t<div class={clsx('kol-popover__arrow', `kol-popover__arrow--${this.state._align}`)} ref={this.catchArrowElement} />\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the alignment of the tooltip, popover or tabs in relation to the element.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines the callback functions for popover events.\n\t */\n\t@Prop() public _on?: PopoverCallbacksPropType;\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: PopoverStates = {\n\t\t_align: 'top',\n\t\t_on: {},\n\t\t_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: PopoverCallbacksPropType): void {\n\t\tvalidatePopoverCallbacks(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) void this.showPopover();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-f59a950a.js"),label=require("./label-3ce275fe.js"),prop_validators=require("./prop.validators-3c86f8eb.js");var KoliBriProgressVariantEnum;require("./index-c77a4142.js"),require("./dev.utils-58fde089.js"),function(e){e.bar="bar",e.cycle="cycle"}(KoliBriProgressVariantEnum||(KoliBriProgressVariantEnum={}));const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\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 {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-progress__bar {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    align-items: center;\n    column-gap: 0.05rem;\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    grid-template-columns: auto;\n    grid-template-areas: \"ALL\";\n    justify-items: center;\n    align-content: center;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    text-align: center;\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    font-size: x-small;\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    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",KolProgressDefaultStyle0=defaultStyleCss,VALID_VARIANTS=Object.keys(KoliBriProgressVariantEnum),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",style:{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",style:{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._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,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:"a3cb72fa70f83e640758aa2a9a9b05f3144586d1",class:"kol-progress"},index.h("div",{key:"3f9f7a83fa9fe5f0e01ab96051b0f058afeb6ba0","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:"e53ad6ee7ff680988179e7b57208cb0361783d31",class:"kol-progress__bar-label"},this.state._label),createProgressSVG(this.state),"cycle"==this.state._variant&&index.h("div",{key:"10a3aabfee33e6093dd63a028482854fb47735ac",class:"kol-progress__cycle-text"},this.state._label&&index.h("div",{key:"d83981b1b6376f07474f1ec2e5909efb5e436ff6",class:"kol-progress__cycle-label"},this.state._label),index.h("div",{key:"9bde39e955af81f1fd1e97039485c051e8837be3",class:"kol-progress__cycle-value"},`${n} ${this.state._unit}`)),"bar"==this.state._variant&&index.h("div",{key:"b8b3317b036e8026d83cca7e4d4d49dd744a02f5",class:"kol-progress__bar-value",style:{width:`${`${(e?100:this.state._max)+1}`.length}ch`}},n),"bar"==this.state._variant&&index.h("div",{key:"ae0e71db447b5f49db88ccddb143975883a9ae41",class:"kol-progress__bar-unit"},this.state._unit)),index.h("progress",{key:"dfad86c10b981a615481c51f15f54217a2f65f62",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:"751c3a8f4cb2d0b7bd99da19ee91c94975df4cbe","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),prop_validators.watchNumber(this,"_max",e,{required:!0})}validateUnit(e){prop_validators.watchString(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),prop_validators.watchNumber(this,"_value",e,{required:!0})}validateVariant(e){prop_validators.watchValidator(this,"_variant",(e=>"string"==typeof e&&VALID_VARIANTS.includes(e)),new Set(VALID_VARIANTS),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:KolProgressDefaultStyle0},exports.kol_progress=KolProgress;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-03ef29aa.js"),index$1=require("./index-8b802221.js"),label=require("./label-21c38949.js"),defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\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 {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-progress__bar {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    align-items: center;\n    column-gap: 0.05rem;\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    grid-template-columns: auto;\n    grid-template-areas: \"ALL\";\n    justify-items: center;\n    align-content: center;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    text-align: center;\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    font-size: x-small;\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    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",KolProgressDefaultStyle0=defaultStyleCss,VALID_VARIANTS=Object.keys(index$1.KoliBriProgressVariantEnum),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",style:{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",style:{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._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,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:"a3cb72fa70f83e640758aa2a9a9b05f3144586d1",class:"kol-progress"},index.h("div",{key:"3f9f7a83fa9fe5f0e01ab96051b0f058afeb6ba0","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:"e53ad6ee7ff680988179e7b57208cb0361783d31",class:"kol-progress__bar-label"},this.state._label),createProgressSVG(this.state),"cycle"==this.state._variant&&index.h("div",{key:"10a3aabfee33e6093dd63a028482854fb47735ac",class:"kol-progress__cycle-text"},this.state._label&&index.h("div",{key:"d83981b1b6376f07474f1ec2e5909efb5e436ff6",class:"kol-progress__cycle-label"},this.state._label),index.h("div",{key:"9bde39e955af81f1fd1e97039485c051e8837be3",class:"kol-progress__cycle-value"},`${n} ${this.state._unit}`)),"bar"==this.state._variant&&index.h("div",{key:"b8b3317b036e8026d83cca7e4d4d49dd744a02f5",class:"kol-progress__bar-value",style:{width:`${`${(e?100:this.state._max)+1}`.length}ch`}},n),"bar"==this.state._variant&&index.h("div",{key:"ae0e71db447b5f49db88ccddb143975883a9ae41",class:"kol-progress__bar-unit"},this.state._unit)),index.h("progress",{key:"dfad86c10b981a615481c51f15f54217a2f65f62",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:"751c3a8f4cb2d0b7bd99da19ee91c94975df4cbe","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),index$1.watchNumber(this,"_max",e,{required:!0})}validateUnit(e){index$1.watchString(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),index$1.watchNumber(this,"_value",e,{required:!0})}validateVariant(e){index$1.watchValidator(this,"_variant",(e=>"string"==typeof e&&VALID_VARIANTS.includes(e)),new Set(VALID_VARIANTS),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:KolProgressDefaultStyle0},exports.kol_progress=KolProgress;

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

@@ -1 +1 @@
-{"file":"kol-progress.entry.cjs.js","mappings":"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","names":["h","validateLabel","watchNumber","watchString","watchValidator"],"sources":["src/schema/types/progress.ts","src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/shadow.tsx"],"sourcesContent":["export enum KoliBriProgressVariantEnum {\n\t'bar' = 'bar',\n\t'cycle' = 'cycle',\n}\n\nexport type KoliBriProgressVariantType = `${KoliBriProgressVariantEnum}`;\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-progress {\n\t\tfont-size: rem(16);\n\n\t\t&__bar {\n\t\t\tdisplay: grid;\n\t\t\tgrid-template-columns: 1fr auto;\n\t\t\tgrid-template-areas:\n\t\t\t\t'LABEL LABEL LABEL'\n\t\t\t\t'BAR VALUE UNIT';\n\t\t\talign-items: center;\n\t\t\tcolumn-gap: 0.05rem;\n\n\t\t\t&-label {\n\t\t\t\tgrid-column-end: 2;\n\t\t\t\tgrid-area: LABEL;\n\t\t\t}\n\n\t\t\tsvg {\n\t\t\t\tgrid-area: BAR;\n\t\t\t}\n\n\t\t\t&-value {\n\t\t\t\tgrid-area: VALUE;\n\t\t\t\ttext-align: right;\n\t\t\t}\n\n\t\t\t&-unit {\n\t\t\t\tgrid-area: UNIT;\n\t\t\t}\n\n\t\t\t&-border {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: black;\n\t\t\t}\n\n\t\t\t&-background {\n\t\t\t\tfill: lightgray;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-progress {\n\t\t\t\tfill: #0075ff;\n\t\t\t\tstroke: transparent;\n\n\t\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__cycle {\n\t\t\tdisplay: grid;\n\t\t\tgrid-template-columns: auto;\n\t\t\tgrid-template-areas: 'ALL';\n\t\t\tjustify-items: center;\n\t\t\talign-content: center;\n\n\t\t\t> * {\n\t\t\t\tgrid-area: ALL;\n\t\t\t}\n\n\t\t\t&-text {\n\t\t\t\ttext-align: center;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex-direction: column;\n\n\t\t\t\tfont-size: x-small;\n\n\t\t\t\t* {\n\t\t\t\t\tbackground-color: white;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&-background {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: lightgray;\n\t\t\t}\n\n\t\t\t&-border {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: black;\n\t\t\t}\n\n\t\t\t&-whitespace {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-progress {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: #0075ff;\n\t\t\t\ttransform-origin: 50% 50%;\n\t\t\t\ttransform: rotate(-90deg);\n\n\t\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { KoliBriProgressVariantType, LabelPropType, ProgressAPI, ProgressStates } from '../../schema';\nimport { KoliBriProgressVariantEnum, validateLabel, watchNumber, watchString, watchValidator } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\nconst CycleSvg = ({ state }: { state: ProgressStates }) => {\n\tconst fullCircle = 342;\n\n\treturn (\n\t\t<svg width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<circle class=\"kol-progress__cycle-background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle\n\t\t\t\tclass=\"kol-progress__cycle-progress\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`}\n\t\t\t\tstroke-width=\"6\"\n\t\t\t\tcx=\"60\"\n\t\t\t\tcy=\"60\"\n\t\t\t\tr=\"54.5\"\n\t\t\t></circle>\n\t\t</svg>\n\t);\n};\n\nconst BarSvg = ({ state }: { state: ProgressStates }) => {\n\tconst percentage = 100 * (state._value / state._max);\n\n\treturn (\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\">\n\t\t\t<rect\n\t\t\t\tclass=\"kol-progress__bar-background\"\n\t\t\t\tx=\"1\"\n\t\t\t\ty=\"1\"\n\t\t\t\theight=\"11\"\n\t\t\t\trx=\"5\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-width=\"3\"\n\t\t\t\tstyle={{ width: `100%` }}\n\t\t\t></rect>\n\t\t\t<rect\n\t\t\t\tclass=\"kol-progress__bar-border\"\n\t\t\t\tx=\"1\"\n\t\t\t\ty=\"1\"\n\t\t\t\theight=\"11\"\n\t\t\t\trx=\"5\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-width=\"1\"\n\t\t\t\tstyle={{ width: `100%` }}\n\t\t\t></rect>\n\t\t\t<rect\n\t\t\t\tclass=\"kol-progress__bar-progress\"\n\t\t\t\tx=\"3\"\n\t\t\t\ty=\"3\"\n\t\t\t\theight=\"7\"\n\t\t\t\trx=\"3.5\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-width=\"3\"\n\t\t\t\tstyle={{ width: `calc(${percentage}% - 4px)` }}\n\t\t\t></rect>\n\t\t</svg>\n\t);\n};\n\nconst createProgressSVG = (state: ProgressStates): JSX.Element => {\n\tswitch (state._variant) {\n\t\tcase 'cycle':\n\t\t\treturn <CycleSvg state={state} />;\n\t\tcase 'bar':\n\t\t\treturn <BarSvg state={state} />;\n\t\tdefault:\n\t\t\tthrow new Error(`Progress variant ${state._variant} not implemented.`);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolProgress implements ProgressAPI {\n\tprivate interval?: number;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\tconst isPercentage = this.state._unit === '%';\n\t\tconst liveProgressValue = isPercentage ? `${Math.round((this.state._liveValue / this.state._max) * 100)}` : this.state._liveValue;\n\t\tconst displayValue = isPercentage ? Math.round((this.state._value / this.state._max) * 100) : this.state._value;\n\t\treturn (\n\t\t\t<div class=\"kol-progress\">\n\t\t\t\t<div\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'kol-progress__cycle': this.state._variant === 'cycle',\n\t\t\t\t\t\t'kol-progress__bar': this.state._variant === 'bar',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'bar' && this.state._label && <div class=\"kol-progress__bar-label\">{this.state._label}</div>}\n\t\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t\t{this.state._variant == 'cycle' && (\n\t\t\t\t\t\t<div class=\"kol-progress__cycle-text\">\n\t\t\t\t\t\t\t{this.state._label && <div class=\"kol-progress__cycle-label\">{this.state._label}</div>}\n\t\t\t\t\t\t\t<div class=\"kol-progress__cycle-value\">{`${displayValue} ${this.state._unit}`}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._variant == 'bar' && (\n\t\t\t\t\t\t<div class=\"kol-progress__bar-value\" style={{ width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` }}>\n\t\t\t\t\t\t\t{displayValue}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._variant == 'bar' && <div class=\"kol-progress__bar-unit\">{this.state._unit}</div>}\n\t\t\t\t</div>\n\n\t\t\t\t{/* https://css-tricks.com/html5-progress-element/ */}\n\t\t\t\t<progress\n\t\t\t\t\tclass=\"visually-hidden\"\n\t\t\t\t\taria-busy={this.state._value < this.state._max ? 'true' : 'false'}\n\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden\">\n\t\t\t\t\t{isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${this.state._max} ${this.state._unit}`}\n\t\t\t\t</span>\n\t\t\t</div>\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 at which value the progress display is completed.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Defines the unit of the step values (not shown).\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Defines the progress.\n\t */\n\t@Prop() public _value!: number;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriProgressVariantType;\n\n\t@State() public state: ProgressStates = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressVariantType): void {\n\t\twatchValidator(this, '_variant', (value) => typeof value === 'string' && VALID_VARIANTS.includes(value), new Set(VALID_VARIANTS), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_liveValue: this.state._value,\n\t\t};\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000) as unknown as number;\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"version":3}
+{"file":"kol-progress.entry.cjs.js","mappings":"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","names":["KoliBriProgressVariantEnum","h","validateLabel","watchNumber","watchString","watchValidator"],"sources":["src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-progress {\n\t\tfont-size: rem(16);\n\n\t\t&__bar {\n\t\t\tdisplay: grid;\n\t\t\tgrid-template-columns: 1fr auto;\n\t\t\tgrid-template-areas:\n\t\t\t\t'LABEL LABEL LABEL'\n\t\t\t\t'BAR VALUE UNIT';\n\t\t\talign-items: center;\n\t\t\tcolumn-gap: 0.05rem;\n\n\t\t\t&-label {\n\t\t\t\tgrid-column-end: 2;\n\t\t\t\tgrid-area: LABEL;\n\t\t\t}\n\n\t\t\tsvg {\n\t\t\t\tgrid-area: BAR;\n\t\t\t}\n\n\t\t\t&-value {\n\t\t\t\tgrid-area: VALUE;\n\t\t\t\ttext-align: right;\n\t\t\t}\n\n\t\t\t&-unit {\n\t\t\t\tgrid-area: UNIT;\n\t\t\t}\n\n\t\t\t&-border {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: black;\n\t\t\t}\n\n\t\t\t&-background {\n\t\t\t\tfill: lightgray;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-progress {\n\t\t\t\tfill: #0075ff;\n\t\t\t\tstroke: transparent;\n\n\t\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__cycle {\n\t\t\tdisplay: grid;\n\t\t\tgrid-template-columns: auto;\n\t\t\tgrid-template-areas: 'ALL';\n\t\t\tjustify-items: center;\n\t\t\talign-content: center;\n\n\t\t\t> * {\n\t\t\t\tgrid-area: ALL;\n\t\t\t}\n\n\t\t\t&-text {\n\t\t\t\ttext-align: center;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex-direction: column;\n\n\t\t\t\tfont-size: x-small;\n\n\t\t\t\t* {\n\t\t\t\t\tbackground-color: white;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&-background {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: lightgray;\n\t\t\t}\n\n\t\t\t&-border {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: black;\n\t\t\t}\n\n\t\t\t&-whitespace {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-progress {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: #0075ff;\n\t\t\t\ttransform-origin: 50% 50%;\n\t\t\t\ttransform: rotate(-90deg);\n\n\t\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { KoliBriProgressVariantType, LabelPropType, ProgressAPI, ProgressStates } from '../../schema';\nimport { KoliBriProgressVariantEnum, validateLabel, watchNumber, watchString, watchValidator } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\nconst CycleSvg = ({ state }: { state: ProgressStates }) => {\n\tconst fullCircle = 342;\n\n\treturn (\n\t\t<svg width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<circle class=\"kol-progress__cycle-background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle\n\t\t\t\tclass=\"kol-progress__cycle-progress\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`}\n\t\t\t\tstroke-width=\"6\"\n\t\t\t\tcx=\"60\"\n\t\t\t\tcy=\"60\"\n\t\t\t\tr=\"54.5\"\n\t\t\t></circle>\n\t\t</svg>\n\t);\n};\n\nconst BarSvg = ({ state }: { state: ProgressStates }) => {\n\tconst percentage = 100 * (state._value / state._max);\n\n\treturn (\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\">\n\t\t\t<rect\n\t\t\t\tclass=\"kol-progress__bar-background\"\n\t\t\t\tx=\"1\"\n\t\t\t\ty=\"1\"\n\t\t\t\theight=\"11\"\n\t\t\t\trx=\"5\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-width=\"3\"\n\t\t\t\tstyle={{ width: `100%` }}\n\t\t\t></rect>\n\t\t\t<rect\n\t\t\t\tclass=\"kol-progress__bar-border\"\n\t\t\t\tx=\"1\"\n\t\t\t\ty=\"1\"\n\t\t\t\theight=\"11\"\n\t\t\t\trx=\"5\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-width=\"1\"\n\t\t\t\tstyle={{ width: `100%` }}\n\t\t\t></rect>\n\t\t\t<rect\n\t\t\t\tclass=\"kol-progress__bar-progress\"\n\t\t\t\tx=\"3\"\n\t\t\t\ty=\"3\"\n\t\t\t\theight=\"7\"\n\t\t\t\trx=\"3.5\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-width=\"3\"\n\t\t\t\tstyle={{ width: `calc(${percentage}% - 4px)` }}\n\t\t\t></rect>\n\t\t</svg>\n\t);\n};\n\nconst createProgressSVG = (state: ProgressStates): JSX.Element => {\n\tswitch (state._variant) {\n\t\tcase 'cycle':\n\t\t\treturn <CycleSvg state={state} />;\n\t\tcase 'bar':\n\t\t\treturn <BarSvg state={state} />;\n\t\tdefault:\n\t\t\tthrow new Error(`Progress variant ${state._variant} not implemented.`);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolProgress implements ProgressAPI {\n\tprivate interval?: number;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\tconst isPercentage = this.state._unit === '%';\n\t\tconst liveProgressValue = isPercentage ? `${Math.round((this.state._liveValue / this.state._max) * 100)}` : this.state._liveValue;\n\t\tconst displayValue = isPercentage ? Math.round((this.state._value / this.state._max) * 100) : this.state._value;\n\t\treturn (\n\t\t\t<div class=\"kol-progress\">\n\t\t\t\t<div\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'kol-progress__cycle': this.state._variant === 'cycle',\n\t\t\t\t\t\t'kol-progress__bar': this.state._variant === 'bar',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'bar' && this.state._label && <div class=\"kol-progress__bar-label\">{this.state._label}</div>}\n\t\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t\t{this.state._variant == 'cycle' && (\n\t\t\t\t\t\t<div class=\"kol-progress__cycle-text\">\n\t\t\t\t\t\t\t{this.state._label && <div class=\"kol-progress__cycle-label\">{this.state._label}</div>}\n\t\t\t\t\t\t\t<div class=\"kol-progress__cycle-value\">{`${displayValue} ${this.state._unit}`}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._variant == 'bar' && (\n\t\t\t\t\t\t<div class=\"kol-progress__bar-value\" style={{ width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` }}>\n\t\t\t\t\t\t\t{displayValue}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._variant == 'bar' && <div class=\"kol-progress__bar-unit\">{this.state._unit}</div>}\n\t\t\t\t</div>\n\n\t\t\t\t{/* https://css-tricks.com/html5-progress-element/ */}\n\t\t\t\t<progress\n\t\t\t\t\tclass=\"visually-hidden\"\n\t\t\t\t\taria-busy={this.state._value < this.state._max ? 'true' : 'false'}\n\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden\">\n\t\t\t\t\t{isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${this.state._max} ${this.state._unit}`}\n\t\t\t\t</span>\n\t\t\t</div>\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 at which value the progress display is completed.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Defines the unit of the step values (not shown).\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Defines the progress.\n\t */\n\t@Prop() public _value!: number;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriProgressVariantType;\n\n\t@State() public state: ProgressStates = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressVariantType): void {\n\t\twatchValidator(this, '_variant', (value) => typeof value === 'string' && VALID_VARIANTS.includes(value), new Set(VALID_VARIANTS), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_liveValue: this.state._value,\n\t\t};\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000) as unknown as number;\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-f59a950a.js"),componentNames=require("./component-names-82c4d68d.js"),clsx=require("./clsx-dd4d6dd1.js"),label=require("./label-3ce275fe.js"),prop_validators=require("./prop.validators-3c86f8eb.js"),reuse=require("./reuse-8650ea4e.js");require("./index-c77a4142.js"),require("./dev.utils-58fde089.js");const koliBriQuoteVariantOptions=["block","inline"],defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}",KolQuoteDefaultStyle0=defaultStyleCss,KolQuote=class{constructor(e){index.registerInstance(this,e),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){label.validateLabel(this,e)}validateHref(e){prop_validators.watchString(this,"_href",e,{required:!0})}validateQuote(e){prop_validators.watchString(this,"_quote",e,{required:!0})}validateVariant(e){prop_validators.watchValidator(this,"_variant",(e=>"string"==typeof e&&koliBriQuoteVariantOptions.includes(e)),new Set(koliBriQuoteVariantOptions),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:"8be0826ad4e95bca0b969faecf9a127dc0782025",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:"8a60619741efd09a2ce14f941393640d5d1b7066",class:"kol-quote__figcaption"},index.h("cite",{key:"2a66a637f160007802b816c7abc01c97dbaef5b9",class:"kol-quote__cite"},index.h(componentNames.KolLinkTag,{key:"866e0a367215220fcbf12f24ff48a19010914449",_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:KolQuoteDefaultStyle0},exports.kol_quote=KolQuote;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-03ef29aa.js"),index$1=require("./index-8b802221.js"),componentNames=require("./component-names-82c4d68d.js"),clsx=require("./clsx-dd4d6dd1.js"),label=require("./label-21c38949.js"),koliBriQuoteVariantOptions=["block","inline"],defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}",KolQuoteDefaultStyle0=defaultStyleCss,KolQuote=class{constructor(e){index.registerInstance(this,e),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){label.validateLabel(this,e)}validateHref(e){index$1.watchString(this,"_href",e,{required:!0})}validateQuote(e){index$1.watchString(this,"_quote",e,{required:!0})}validateVariant(e){index$1.watchValidator(this,"_variant",(e=>"string"==typeof e&&koliBriQuoteVariantOptions.includes(e)),new Set(koliBriQuoteVariantOptions),e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=index$1.showExpertSlot(this.state._quote);return index.h("figure",{key:"8be0826ad4e95bca0b969faecf9a127dc0782025",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:"8a60619741efd09a2ce14f941393640d5d1b7066",class:"kol-quote__figcaption"},index.h("cite",{key:"2a66a637f160007802b816c7abc01c97dbaef5b9",class:"kol-quote__cite"},index.h(componentNames.KolLinkTag,{key:"866e0a367215220fcbf12f24ff48a19010914449",_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:KolQuoteDefaultStyle0},exports.kol_quote=KolQuote;

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

@@ -1 +1 @@
-{"file":"kol-quote.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;AAIO,MAAM,0BAA0B,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU;;ACJtE,MAAM,eAAe,GAAG,4wJAA4wJ,CAAC;AACryJ,8BAAe,eAAe;;MCajB,QAAQ;;;;;;wBAmB4B,QAAQ;qBAEnB;YACpC,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,QAAQ;SAClB;;IAGM,aAAa,CAAC,KAAqB;QACzCA,mBAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC3B;IAGM,YAAY,CAAC,KAAoB;QACvCC,2BAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;YACjC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,aAAa,CAAC,KAAc;QAClCA,2BAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;YAClC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAA2B;QACjDC,8BAAc,CACb,IAAI,EACJ,UAAU,EACV,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,0BAA0B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAClF,IAAI,GAAG,CAAC,0BAA0B,CAAC,EACnC,KAAK,CACL,CAAC;KACF;IAEM,iBAAiB;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;IAEM,MAAM;QACZ,MAAM,aAAa,GAAGC,oBAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxD,QACCC,qEAAQ,KAAK,EAAEC,SAAI,CAAC,WAAW,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,IACnE,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,OAAO,IAC/BD,wBAAY,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAC9D,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACK,KAEbA,eAAG,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAChD,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACJ,CACJ,EACA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,KACrEA,yEAAY,KAAK,EAAC,uBAAuB,IACxCA,mEAAM,KAAK,EAAC,iBAAiB,IAC5BA,QAACE,yBAAU,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAC,QAAQ,GAAG,CAC7E,CACK,CACb,CACO,EACR;KACF;;;;;;;;;;;;;;","names":["validateLabel","watchString","watchValidator","showExpertSlot","h","clsx","KolLinkTag"],"sources":["src/schema/components/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 type { PropHref, PropLabel } from '../props';\n\nexport const koliBriQuoteVariantOptions = ['block', 'inline'] as const;\nexport type KoliBriQuoteVariant = (typeof koliBriQuoteVariantOptions)[number];\n\ntype RequiredProps = {\n\tquote: string;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalProps = {\n\tvariant: KoliBriQuoteVariant;\n} & PropLabel;\n\ntype RequiredStates = {\n\tquote: string;\n\tvariant: KoliBriQuoteVariant;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalStates = PropLabel;\n\nexport type QuoteProps = Generic.Element.Members<RequiredProps, OptionalProps>;\nexport type QuoteStates = Generic.Element.Members<RequiredStates, OptionalStates>;\nexport type QuoteAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\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\tfont-size: rem(16);\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\tcontent: '—';\n\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}\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, KoliBriQuoteVariant, LabelPropType, QuoteAPI, QuoteStates } from '../../schema';\nimport { koliBriQuoteVariantOptions, showExpertSlot, validateLabel, watchString, watchValidator } 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?: KoliBriQuoteVariant = '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?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value),\n\t\t\tnew Set(koliBriQuoteVariantOptions),\n\t\t\tvalue,\n\t\t);\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":";;;;;;;;;;;;;AAIO,MAAM,0BAA0B,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU;;ACJtE,MAAM,eAAe,GAAG,4wJAA4wJ,CAAC;AACryJ,8BAAe,eAAe;;MCajB,QAAQ;;;;;;wBAmB4B,QAAQ;qBAEnB;YACpC,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,QAAQ;SAClB;;IAGM,aAAa,CAAC,KAAqB;QACzCA,mBAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC3B;IAGM,YAAY,CAAC,KAAoB;QACvCC,mBAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;YACjC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,aAAa,CAAC,KAAc;QAClCA,mBAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;YAClC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAA2B;QACjDC,sBAAc,CACb,IAAI,EACJ,UAAU,EACV,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,0BAA0B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAClF,IAAI,GAAG,CAAC,0BAA0B,CAAC,EACnC,KAAK,CACL,CAAC;KACF;IAEM,iBAAiB;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;IAEM,MAAM;QACZ,MAAM,aAAa,GAAGC,sBAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxD,QACCC,qEAAQ,KAAK,EAAEC,SAAI,CAAC,WAAW,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,IACnE,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,OAAO,IAC/BD,wBAAY,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAC9D,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACK,KAEbA,eAAG,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAChD,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACJ,CACJ,EACA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,KACrEA,yEAAY,KAAK,EAAC,uBAAuB,IACxCA,mEAAM,KAAK,EAAC,iBAAiB,IAC5BA,QAACE,yBAAU,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAC,QAAQ,GAAG,CAC7E,CACK,CACb,CACO,EACR;KACF;;;;;;;;;;;;;;","names":["validateLabel","watchString","watchValidator","showExpertSlot","h","clsx","KolLinkTag"],"sources":["src/schema/components/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 type { PropHref, PropLabel } from '../props';\n\nexport const koliBriQuoteVariantOptions = ['block', 'inline'] as const;\nexport type KoliBriQuoteVariant = (typeof koliBriQuoteVariantOptions)[number];\n\ntype RequiredProps = {\n\tquote: string;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalProps = {\n\tvariant: KoliBriQuoteVariant;\n} & PropLabel;\n\ntype RequiredStates = {\n\tquote: string;\n\tvariant: KoliBriQuoteVariant;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalStates = PropLabel;\n\nexport type QuoteProps = Generic.Element.Members<RequiredProps, OptionalProps>;\nexport type QuoteStates = Generic.Element.Members<RequiredStates, OptionalStates>;\nexport type QuoteAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\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\tfont-size: rem(16);\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\tcontent: '—';\n\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}\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, KoliBriQuoteVariant, LabelPropType, QuoteAPI, QuoteStates } from '../../schema';\nimport { koliBriQuoteVariantOptions, showExpertSlot, validateLabel, watchString, watchValidator } 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?: KoliBriQuoteVariant = '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?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value),\n\t\t\tnew Set(koliBriQuoteVariantOptions),\n\t\t\tvalue,\n\t\t);\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}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-f59a950a.js"),clsx=require("./clsx-dd4d6dd1.js"),dev_utils=require("./dev.utils-cf3e30cd.js"),controllerIcon=require("./controller-icon-f083fb87.js"),controller=require("./controller-3c91be90.js"),rows=require("./rows-24ccf646.js"),prop_validators=require("./prop.validators-3c86f8eb.js"),controller$1=require("./controller-1025bb87.js"),tslib_es6=require("./tslib.es6-5e301284.js"),getRenderStates=require("./getRenderStates-ccd7c1d9.js");require("./reuse-8650ea4e.js"),require("./dev.utils-58fde089.js"),require("./InternalUnderlinedBadgeText-389620e7.js"),require("./isObject-6090b636.js"),require("./component-names-82c4d68d.js"),require("./Icon-8867e73b.js"),require("./icons-c0c89cbb.js"),require("./common-1ab929ac.js"),require("./label-3ce275fe.js"),require("./index-c77a4142.js"),require("./events-40771c95.js"),require("./associated.controller-2005f7f0.js"),require("./access-and-short-key-6155af7d.js"),require("./tooltip-align-5aee86e8.js"),require("./align-a9f24187.js"),require("./hide-label-a9a94f19.js"),require("./Alert-e2ac9865.js"),require("./i18n-0e710ccd.js"),require("./i18n-8c288a27.js"),require("./Heading-e55498a4.js");class SelectController extends controllerIcon.InputIconController{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find((t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options))),this.filterValuesInOptions=(e,t)=>e.filter((e=>void 0!==this.isValueInOptions(e,t))),this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,n);const e=t.has("_value")?t.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],n);!1===this.component._multiple&&0===i.length?t.set("_value",[n[0].value]):Array.isArray(e)&&i.length<e.length&&t.set("_value",i)}},this.component=e}validateOptions(e){controller.validateOptionsWithOptgroup(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){prop_validators.watchBoolean(this.component,"_multiple",e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){prop_validators.watchBoolean(this.component,"_required",e)}validateRows(e){rows.validateRows(this.component,e)}validateValue(e){prop_validators.watchJsonArrayString(this.component,"_value",(()=>!0),e,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const NativeOptionFc=e=>{var{baseClassName:t="kol-select",class:n,index:i,selectedValue:o,selected:l,value:a,label:s,disabled:r}=e,d=tslib_es6.__rest(e,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);o?Array.isArray(o)||(o=[o]):o=[];const c=l||o.includes(a);return index.h("option",Object.assign({class:clsx.clsx(`${t}__option`,{[`${t}__option--selected`]:c,[`${t}__option--disabled`]:r},n),selected:c,disabled:r,"aria-hidden":r?"true":void 0,value:i||a},d),s)},NativeOptionFc$1=NativeOptionFc,NativeOptionListFc=({baseClassName:e,preKey:t,options:n,disabled:i,value:o,OptionProps:l={},OptionGroupProps:a={}})=>(null==n?void 0:n.length)?index.h(index.Fragment,null,n.map(((s,r)=>{const d=[t,`-${r}`].join("");if("options"in s){if(!n.length)return null;const{label:t}=s,r=tslib_es6.__rest(s,["label"]);return index.h("optgroup",Object.assign({class:clsx.clsx(`${e}__optgroup`,{[`${e}__optgroup--disabled`]:i}),key:d},a,{label:null==t?void 0:t.toString(),disabled:i}),index.h(NativeOptionListFc,Object.assign({baseClassName:e,OptionGroupProps:a,OptionProps:l,value:o,preKey:d},r)))}return"value"in s?index.h(NativeOptionFc$1,Object.assign({key:d,baseClassName:e},l,{index:d,selectedValue:o},s)):null}))):null,NativeOptionListFc$1=NativeOptionListFc,NativeSelectFc=e=>{const{class:t,msg:n,touched:i,disabled:o,required:l,options:a,value:s,OptionProps:r,OptionGroupProps:d,ariaDescribedBy:c,hideLabel:h,label:u}=e,p=tslib_es6.__rest(e,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),b=getRenderStates.checkHasMsg(n,i),v={"kol-select--disabled":Boolean(o),"kol-select--required":Boolean(l),"kol-select--touched":Boolean(i),[`kol-select--${(null==n?void 0:n.type)||"error"}`]:b},f=Object.assign(Object.assign({class:clsx.clsx("kol-select",v,t),required:l,disabled:o},getRenderStates.getDefaultProps({ariaDescribedBy:c,hideLabel:h,label:u})),p);return index.h("select",Object.assign({},f),index.h(NativeOptionListFc$1,{baseClassName:"kol-select",options:a,value:s,OptionGroupProps:d,OptionProps:r}))},KolSelectFc=NativeSelectFc;function getSelectProps(e){const{ariaDescribedBy:t}=getRenderStates.getRenderStates(e);return{id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,options:e._options,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,size:e._rows,multiple:e._multiple,required:e._required,touched:e._touched,msg:getRenderStates.convertMsgToInternMsg(e._msg)}}const SelectStateWrapper=e=>{var{state:t}=e,n=tslib_es6.__rest(e,["state"]);return index.h(KolSelectFc,Object.assign({},getSelectProps(t),n))},KolSelectStateWrapperFc=SelectStateWrapper,defaultStyleCss='@charset "UTF-8";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don\'t want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-select {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n    /* needed hack for vertical alignment */\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: "✓ ";\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}',KolSelectDefaultStyle0=defaultStyleCss,KolSelect=class{async getValue(){return this.state._value}async kolFocus(){var e;null===(e=this.selectRef)||void 0===e||e.focus()}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-form-field-select",{"kol-form-field--has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return index.h(getRenderStates.KolFormFieldStateWrapperFc,Object.assign({key:"314bf26bbda33b0f216c77f50767371e267c76e3"},this.getFormFieldProps()),index.h(controllerIcon.KolInputContainerFc,{key:"04218e521df5599f0b547efcde26caced53189c1",state:this.state},index.h("form",{key:"794c0a633a77fdbe1a14f4badfb261fd71e548f8",onSubmit:e=>{e.preventDefault(),controller$1.propagateSubmitEventToForm({form:this.host,ref:this.selectRef})}},index.h("input",{key:"514cb85d8fc7f65ae8797b72d9783d41c6329135",type:"submit",hidden:!0}),index.h(KolSelectStateWrapperFc,Object.assign({key:"da5b8860e9db5cee071e7fde4e173c7359162c82"},this.getSelectProps())))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.selectRef=e},this._accessKey=void 0,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new SelectController(this,"select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}onInput(e){var t;this._value=Array.from((null===(t=this.selectRef)||void 0===t?void 0:t.options)||[]).filter((e=>!0===e.selected)).map((e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value})),this.controller.onFacade.onInput(e,!0,this._value)}onChange(e){this.controller.onFacade.onChange(e,this._value)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolSelect.style={default:KolSelectDefaultStyle0},exports.kol_select=KolSelect;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index$1=require("./index-03ef29aa.js"),clsx=require("./clsx-dd4d6dd1.js"),dev_utils=require("./dev.utils-f6da9b54.js"),index=require("./index-8b802221.js"),controllerIcon=require("./controller-icon-e2f8e416.js"),controller=require("./controller-3eecbf98.js"),rows=require("./rows-f8c639c4.js"),controller$1=require("./controller-7c72bfb5.js"),getRenderStates=require("./getRenderStates-8e102335.js"),tslib_es6=require("./tslib.es6-5e301284.js");require("./component-names-82c4d68d.js"),require("./Icon-9e0021e7.js"),require("./InternalUnderlinedBadgeText-6c8700f2.js"),require("./isArray-e114fe6e.js"),require("./isObject-6090b636.js"),require("./icons-9df3131b.js"),require("./label-21c38949.js"),require("./events-40771c95.js"),require("./associated.controller-949dd4e2.js"),require("./bootstrap-7c830737.js"),require("./i18n-8c288a27.js"),require("./access-and-short-key-2167fc7c.js"),require("./tooltip-align-4446177f.js"),require("./align-4abb9b20.js"),require("./hide-label-5889f019.js"),require("./Alert-22c49278.js"),require("./i18n-b9d16ebc.js"),require("./bem-85316256.js"),require("./browser-4433089a.js"),require("./Heading-b8bbd132.js");class SelectController extends controllerIcon.InputIconController{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find((t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options))),this.filterValuesInOptions=(e,t)=>e.filter((e=>void 0!==this.isValueInOptions(e,t))),this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,n);const e=t.has("_value")?t.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],n);!1===this.component._multiple&&0===i.length?t.set("_value",[n[0].value]):Array.isArray(e)&&i.length<e.length&&t.set("_value",i)}},this.component=e}validateOptions(e){controller.validateOptionsWithOptgroup(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){index.watchBoolean(this.component,"_multiple",e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){index.watchBoolean(this.component,"_required",e)}validateRows(e){rows.validateRows(this.component,e)}validateValue(e){index.watchJsonArrayString(this.component,"_value",(()=>!0),e,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const NativeOptionFc=e=>{var{baseClassName:t="kol-select",class:n,index:i,selectedValue:o,selected:l,value:a,label:s,disabled:r}=e,d=tslib_es6.__rest(e,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);void 0===o?o=[]:Array.isArray(o)||(o=[o]);const c=l||o.includes(a);return index$1.h("option",Object.assign({class:clsx.clsx(`${t}__option`,{[`${t}__option--selected`]:c,[`${t}__option--disabled`]:r},n),selected:c,disabled:r,"aria-hidden":r?"true":void 0,value:i},d),s)},NativeOptionListFc=({baseClassName:e,preKey:t,options:n,disabled:i,value:o,OptionProps:l={},OptionGroupProps:a={}})=>(null==n?void 0:n.length)?index$1.h(index$1.Fragment,null,n.map(((s,r)=>{const d=[t,`-${r}`].join("");if("options"in s){if(!n.length)return null;const{label:t}=s,r=tslib_es6.__rest(s,["label"]);return index$1.h("optgroup",Object.assign({class:clsx.clsx(`${e}__optgroup`,{[`${e}__optgroup--disabled`]:i}),key:d},a,{label:null==t?void 0:t.toString(),disabled:i}),index$1.h(NativeOptionListFc,Object.assign({baseClassName:e,OptionGroupProps:a,OptionProps:l,value:o,preKey:d},r)))}return"value"in s?index$1.h(NativeOptionFc,Object.assign({key:d,baseClassName:e},l,{index:d,selectedValue:o},s)):null}))):null,NativeSelectFc=e=>{const{class:t,msg:n,touched:i,disabled:o,required:l,options:a,value:s,OptionProps:r,OptionGroupProps:d,ariaDescribedBy:c,hideLabel:h,label:u}=e,p=tslib_es6.__rest(e,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),b=getRenderStates.checkHasMsg(n,i),v={"kol-select--disabled":Boolean(o),"kol-select--required":Boolean(l),"kol-select--touched":Boolean(i),[`kol-select--${(null==n?void 0:n.type)||"error"}`]:b},m=Object.assign(Object.assign({class:clsx.clsx("kol-select",v,t),required:l,disabled:o},getRenderStates.getDefaultProps({ariaDescribedBy:c,hideLabel:h,label:u})),p);return index$1.h("select",Object.assign({},m),index$1.h(NativeOptionListFc,{baseClassName:"kol-select",options:a,value:s,OptionGroupProps:d,OptionProps:r}))};function getSelectProps(e){const{ariaDescribedBy:t}=getRenderStates.getRenderStates(e);return{id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,options:e._options,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,size:e._rows,multiple:e._multiple,required:e._required,touched:e._touched,msg:getRenderStates.convertMsgToInternMsg(e._msg)}}const SelectStateWrapper=e=>{var{state:t}=e,n=tslib_es6.__rest(e,["state"]);return index$1.h(NativeSelectFc,Object.assign({},getSelectProps(t),n))},defaultStyleCss='@charset "UTF-8";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don\'t want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-select {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n    /* needed hack for vertical alignment */\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: "✓ ";\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}',KolSelectDefaultStyle0=defaultStyleCss,KolSelect=class{async getValue(){return this.state._value}async kolFocus(){var e;null===(e=this.selectRef)||void 0===e||e.focus()}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-form-field-select",{"kol-form-field--has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return index$1.h(getRenderStates.FormFieldStateWrapper,Object.assign({key:"33fdf8081753ace8e90195030f777e43ef56c5d7"},this.getFormFieldProps()),index$1.h(controllerIcon.InputContainerStateWrapperFc,{key:"b1327b307a05097e79510f2bb35d89af3af94308",state:this.state},index$1.h("form",{key:"fef09038fe3d111706c872a0ca6dbd241edf00ba",onSubmit:e=>{e.preventDefault(),controller$1.propagateSubmitEventToForm({form:this.host,ref:this.selectRef})}},index$1.h("input",{key:"40e415c9a229f1b4112fb3475544db56db565872",type:"submit",hidden:!0}),index$1.h(SelectStateWrapper,Object.assign({key:"0882b17318c52bd1a34785a8e14d00c98dddcacc"},this.getSelectProps())))))}constructor(e){index$1.registerInstance(this,e),this.catchRef=e=>{this.selectRef=e},this._accessKey=void 0,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new SelectController(this,"select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}onInput(e){var t;this._value=Array.from((null===(t=this.selectRef)||void 0===t?void 0:t.options)||[]).filter((e=>!0===e.selected)).map((e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value})),this.controller.onFacade.onInput(e,!0,this._value)}onChange(e){this.controller.onFacade.onChange(e,this._value)}get host(){return index$1.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolSelect.style={default:KolSelectDefaultStyle0},exports.kol_select=KolSelect;