@public-ui/components/dist/kolibri/kol-details.entry.js

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

/*!
 * KoliBri - The accessible HTML-Standard
 */
import{r as n,h as e,g as t}from"./index-136f59ac.js";import{w as i}from"./index-88dea7b1.js";import{K as o}from"./Collapsible-e6c95e1f.js";import{n as a}from"./dev.utils-77f0b548.js";import{w as s}from"./validation-66c33ff5.js";import{d as l,K as r}from"./events-5886c68b.js";import{v as d}from"./disabled-e64a9155.js";import{v as h}from"./label-5982d241.js";import{v as c}from"./open-a64bb227.js";import"./tslib.es6-1173d062.js";import"./clsx-09a06a12.js";import"./component-names-799e91e2.js";import"./Heading-bb974fcc.js";const p=(n,e)=>{i(n,"_on",(n=>"object"==typeof n&&null!==n),new Set(["DetailsCallbacksPropType {Events.onToggle}"]),e)},b="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    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/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows 0.3s;\n    /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n    transform: translateZ(0);\n  }\n  .collapsible__wrapper-animation {\n    min-height: 0;\n    transition: visibility 0.3s;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n  }\n  .collapsible--open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .collapsible--open .collapsible__wrapper-animation {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition-duration: 0s;\n    }\n  }\n  @media print {\n    :not(.collapsible--open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__heading-button button .kol-span {\n    justify-items: start;\n  }\n}\n@layer kol-component {\n  .kol-details {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button {\n    display: flex;\n  }\n  .kol-details__heading-button .kol-button {\n    min-height: auto;\n  }\n  .kol-details__heading-button .kol-button .kol-span__label {\n    border-bottom-color: grey;\n    border-bottom-style: solid;\n  }\n  .collapsible--open .kol-details__heading-button .kol-icon::part(icon) {\n    transform: rotate(90deg);\n  }\n}",m=b,u=class{constructor(e){n(this,e),this.nonce=a(),this.catchRef=n=>{this.buttonWcRef=n},this.handleOnClick=n=>{this._open=!this._open,clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var e,t;this.host&&l(this.host,r.toggle,Boolean(this._open)),null===(t=null===(e=this.state._on)||void 0===e?void 0:e.onToggle)||void 0===t||t.call(e,n,Boolean(this._open))}),25)},this._disabled=!1,this._label=void 0,this._level=0,this._on=void 0,this._open=!1,this.state={_label:"",_level:0,_on:{}}}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){const{_open:n,_label:t,_disabled:i,_level:a}=this.state,l="kol-details",s={id:this.nonce,label:t,open:n,disabled:i,level:a,onClick:this.handleOnClick,class:l,HeadingProps:{class:`${l}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${l}__heading-button`,_icons:"codicon codicon-chevron-right"},ContentProps:{class:`${l}__content indented-text`,wrapperClass:`${l}__wrapper`,animationClass:`${l}__wrapper-animation`}};return e(o,Object.assign({key:"bda32e79cfd2848ae618845ab2a20ae8b65ad0a3"},s),e("slot",{key:"846096375015a456c275333f701a44343a9e167c"}))}validateDisabled(n){d(this,n)}validateLabel(n){h(this,n,{required:!0})}validateLevel(n){s(this,n)}validateOn(n){p(this,n)}validateOpen(n){c(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}get host(){return t(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};u.style={default:m};export{u as kol_details};