@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
4 lines • 8.77 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-399c8b52.js"),dev_utils=require("./dev.utils-0273f400.js"),validation=require("./validation-cd978d87.js"),prop_validators=require("./prop.validators-888c8338.js"),Collapsible=require("./Collapsible-17d8df23.js"),disabled=require("./disabled-d424f708.js"),open=require("./open-ef7b4602.js"),label=require("./label-477be19d.js");require("./reuse-8cfefa9b.js"),require("./dev.utils-58fde089.js"),require("./index-38f5f0b2.js"),require("./tslib.es6-16e4524f.js"),require("./clsx-dd4d6dd1.js"),require("./component-names-2c750b1b.js");const validateAccordionCallbacks=(e,n)=>{prop_validators.watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["AccordionCallbacksPropType {Events.onClick}"]),n)},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 .kol-input .input {\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%; /* 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}\n@layer kol-global {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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 /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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-wc,\n [disabled]:focus .kol-span-wc {\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 }\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 .open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .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(.open) .collapsible__wrapper-animation {\n display: none;\n }\n }\n .collapsible__heading-button button .kol-span-wc {\n justify-items: start;\n }\n}",KolAccordionDefaultStyle0=defaultStyleCss;prop_validators.featureHint("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),prop_validators.featureHint("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const KolAccordion=class{constructor(e){index.registerInstance(this,e),this.nonce=dev_utils.nonce(),this.catchRef=e=>{this.buttonWcRef=e},this.handleOnClick=e=>{this._open=!this._open,setTimeout((()=>{var n,i;null===(i=null===(n=this.state._on)||void 0===n?void 0:n.onClick)||void 0===i||i.call(n,e,!0===this._open)}))},this._disabled=!1,this._label=void 0,this._level=0,this._on=void 0,this._open=!1,this.state={_label:"",_level:0,_on:{}}}async focus(){await this.kolFocus()}async kolFocus(){var e;await(null===(e=this.buttonWcRef)||void 0===e?void 0:e.kolFocus())}render(){const{_open:e,_label:n,_disabled:i,_level:t}=this.state,a="accordion",o={id:this.nonce,label:n,open:e,disabled:i,level:t,onClick:this.handleOnClick,class:a,HeadingProps:{class:`${a}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${a}__heading-button`},ContentProps:{class:`${a}__content`,wrapperClass:`${a}__wrapper`,animationClass:`${a}__wrapper-animation`}};return index.h(index.Host,{key:"0c90ac4971377eafa18b4d3503512c08f640fe4d",class:"kol-accordion"},index.h(Collapsible.KolCollapsibleFc,Object.assign({key:"a78d600359191321145fff75647e93c277041eaa"},o),index.h("slot",{key:"7c898afbcafceecda7651eccf152e44b7434d823"})))}validateDisabled(e){disabled.validateDisabled(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}validateLevel(e){validation.watchHeadingLevel(this,e)}validateOn(e){validateAccordionCallbacks(this,e)}validateOpen(e){open.validateOpen(this,e)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};KolAccordion.style={default:KolAccordionDefaultStyle0},exports.kol_accordion=KolAccordion;