@public-ui/sample-react 2.2.12 → 2.2.13-rc.0

package/dist/assets/kol-table-stateless.entry-DLoiCcKo.js

@@ -0,0 +1,347 @@
+import{r as e,h as n,ac as i,H as o}from"./index-Bvb9XsoR.js";/*!
+ * KoliBri - The accessible HTML-Standard
+ */const a=`/*
+ * This file contains all rules for accessibility.
+ */
+@layer kol-global {
+  :host {
+    /*
+     * Minimum size of interactive elements.
+     */
+    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));
+    /*
+     * No element should be used without a background and font color whose contrast ratio has
+     * not been checked. By initially setting the background color to white and the font color
+     * to black, the contrast ratio is ensured and explicit adjustment is forced.
+     */
+    background-color: white;
+    color: black;
+  }
+  * {
+    /*
+     * This rule enables the word dividing for all texts. That is important for high zoom levels.
+     */
+    hyphens: auto;
+    /*
+     * Verdana is an accessible font that can be used without requiring additional loading time.
+     */
+    font-family: Verdana;
+    /*
+     * Letter spacing is required for all texts.
+     */
+    letter-spacing: inherit;
+    /*
+     * This rule enables the word dividing for all texts. That is important for high zoom levels.
+     */
+    word-break: break-word;
+    /*
+     * Word spacing is required for all texts.
+     */
+    word-spacing: inherit;
+  }
+  /*
+   * All interactive elements should have a minimum size of rem(44).
+   */
+  /* input:not([type='checkbox'], [type='radio'], [type='range']), */
+  /* option, */
+  /* select, */
+  /* textarea, */
+  [role=button],
+  button:not([role=link]),
+  .kol-input .input {
+    min-height: var(--a11y-min-size);
+    min-width: var(--a11y-min-size);
+  }
+  /*
+   * Some interactive elements should not inherit the font-family and font-size.
+   */
+  a,
+  button,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  input,
+  option,
+  select,
+  textarea {
+    /*
+     * All elements should inherit the font family from his parent element.
+     */
+    font-family: inherit;
+    /*
+     * All elements should inherit the font size from his parent element.
+     */
+    font-size: inherit;
+  }
+}
+/**
+ * Sometimes we need the semantic element for accessibility reasons,
+ * but we don't want to show it.
+ *
+ * - https://www.a11yproject.com/posts/how-to-hide-content/
+ */
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+@layer kol-global {
+  /*
+   * Dieses CSS stellt sicher, dass der Standard-Style
+   * von A und Button resettet werden.
+   */
+  :is(a, button) {
+    background-color: transparent;
+    border: none;
+    margin: 0;
+    padding: 0;
+    width: 100%; /* 100% needed for custom width from outside */
+  }
+  /*
+   * Ensure elements with hidden attribute to be actually not visible
+   * @see https://meowni.ca/hidden.is.a.lie.html
+   */
+  [hidden] {
+    display: none !important;
+  }
+}
+@layer kol-global {
+  :host {
+    font-size: calc(16rem / var(--kolibri-root-font-size, 16));
+    /*
+     * The max-width is needed to prevent the table from overflowing the
+     * parent node, if the table is wider than the parent node.
+     */
+    max-width: 100%;
+  }
+  * {
+    /*
+     * We prefer to box-sizing: border-box for all elements.
+     */
+    box-sizing: border-box;
+  }
+  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */
+  .kol-span-wc {
+    display: grid;
+    place-items: center;
+  }
+  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */
+  .kol-span-wc > span {
+    display: flex;
+    place-items: center;
+  }
+  a,
+  button {
+    cursor: pointer;
+  }
+  /* This is the text label. */
+  .hide-label > .kol-span-wc > span > span {
+    display: none;
+  }
+  /* Reset browser agent style. */
+  button:disabled {
+    color: unset;
+  }
+  .disabled label,
+  .disabled:focus-within label,
+  [aria-disabled=true],
+  [aria-disabled=true]:focus,
+  [disabled],
+  [disabled]:focus {
+    cursor: not-allowed;
+    opacity: 0.5;
+    outline: none;
+  }
+  [aria-disabled=true]:focus .kol-span-wc,
+  [disabled]:focus .kol-span-wc {
+    outline: none !important;
+  }
+  .badge-text-hint {
+    background-color: lightgray;
+    color: black;
+  }
+}
+@layer kol-component {
+  :host {
+    display: block;
+  }
+}
+@layer kol-component {
+  .kol-tooltip-wc {
+    display: contents;
+  }
+  .kol-tooltip-wc .tooltip-floating {
+    animation-duration: 0.25s;
+    animation-iteration-count: 1;
+    animation-name: fadeInOpacity;
+    animation-timing-function: ease-in;
+    display: none;
+    position: fixed;
+    visibility: hidden;
+    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */
+    top: 0;
+    left: 0;
+    max-width: 90vw;
+    max-height: 90vh;
+    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */
+    width: var(--kol-tooltip-width);
+  }
+  /* Shared between content and arrow */
+  .kol-tooltip-wc .tooltip-area {
+    background-color: #fff;
+    color: #000;
+  }
+  .kol-tooltip-wc .tooltip-arrow {
+    height: calc(10rem / var(--kolibri-root-font-size, 16));
+    position: absolute;
+    transform: rotate(45deg);
+    width: calc(10rem / var(--kolibri-root-font-size, 16));
+    z-index: 999;
+  }
+  .kol-tooltip-wc .tooltip-content {
+    position: relative;
+    z-index: 1000;
+  }
+  @keyframes fadeInOpacity {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}
+@layer kol-component {
+  :host,
+  .kol-table-stateless-wc {
+    display: block;
+  }
+  .table {
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  table {
+    width: 100%;
+  }
+  caption {
+    text-align: start;
+  }
+  .focus-element {
+    font-size: 0;
+  }
+  .focus-element:focus {
+    outline: 0 !important;
+  }
+  .table:has(.focus-element:focus) {
+    /* @see https://remysharp.com/til/css/focus-ring-default-styles */
+    outline: 5px auto Highlight;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: 2px;
+  }
+  .table-sort-button .button {
+    color: inherit;
+  }
+  tbody th,
+  th.align-left {
+    text-align: left;
+  }
+  tbody th .table-sort-button .button-inner,
+  th.align-left .table-sort-button .button-inner {
+    justify-items: start;
+  }
+  th.align-center {
+    text-align: center;
+  }
+  th.align-center .table-sort-button .button-inner {
+    justify-items: center;
+  }
+  th.align-right {
+    text-align: right;
+  }
+  th.align-right .table-sort-button .button-inner {
+    justify-items: end;
+  }
+  tr.foot-spacer,
+  tr.head-spacer {
+    display: none;
+  }
+  .selection-header-cell {
+    width: 0;
+  }
+  .selection-cell {
+    width: var(--a11y-min-size);
+    height: var(--a11y-min-size);
+    white-space: nowrap;
+  }
+  .input label {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    height: var(--a11y-min-size);
+    justify-content: center;
+    position: relative;
+    width: var(--a11y-min-size);
+  }
+  .input .icon {
+    display: block;
+    inset: auto;
+    position: absolute;
+    z-index: 1;
+  }
+  .input input {
+    appearance: none;
+    border-style: solid;
+    cursor: pointer;
+    margin: 0;
+  }
+  .input input:before {
+    content: "";
+  }
+  .input input[type=checkbox] {
+    position: relative;
+    display: flex;
+    height: calc(var(--a11y-min-size) / 2);
+    width: calc(var(--a11y-min-size) / 2);
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(255, 255, 255);
+    border-width: 2px;
+    line-height: 1.5;
+    transition: all 0.5s ease 0s;
+  }
+  .input input[type=radio] {
+    display: flex;
+    border-width: 2px;
+    border-radius: 100%;
+    height: 1.5em;
+    min-height: 1.5em;
+    min-width: 1.5em;
+    padding: 0;
+    width: 1.5em;
+  }
+  .input input[type=radio]:before {
+    border-radius: 100%;
+    margin: auto;
+    height: 0.75em;
+    width: 0.75em;
+  }
+  .input input[type=radio]:checked:before {
+    background-color: #000;
+  }
+  @media (forced-colors: active) {
+    .input input[type=radio]:checked:before {
+      /* Give it a visible background in forced colors mode */
+      background-color: selectedItem !important;
+    }
+  }
+}`,l=a,s=class{constructor(t){e(this,t),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}render(){return n(o,{key:"ca6a12ebf0f5e0d90586e3128ea55b001449e024",class:"kol-table-stateless"},n(i,{key:"a58a5f21f2f33194313c1ab7840475c8cc6c016c",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection}))}};s.style={default:l};export{s as kol_table_stateless};
+//# sourceMappingURL=kol-table-stateless.entry-DLoiCcKo.js.map

package/dist/assets/kol-table-stateless.entry-DLoiCcKo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kol-table-stateless.entry-DLoiCcKo.js","sources":["../../../../components/dist/esm/kol-table-stateless.entry.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { r as registerInstance, h, H as Host } from './index-3be16660.js';\nimport { r as KolTableStatelessWcTag } from './component-names-4cb1c62b.js';\n\nconst 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  * {\\n    /*\\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\\n     */\\n    hyphens: auto;\\n    /*\\n     * Verdana is an accessible font that can be used without requiring additional loading time.\\n     */\\n    font-family: Verdana;\\n    /*\\n     * Letter spacing is required for all texts.\\n     */\\n    letter-spacing: inherit;\\n    /*\\n     * 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: 1px;\\n  overflow: hidden;\\n  position: absolute;\\n  white-space: nowrap;\\n  width: 1px;\\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  .badge-text-hint {\\n    background-color: lightgray;\\n    color: black;\\n  }\\n}\\n@layer kol-component {\\n  :host {\\n    display: block;\\n  }\\n}\\n@layer kol-component {\\n  .kol-tooltip-wc {\\n    display: contents;\\n  }\\n  .kol-tooltip-wc .tooltip-floating {\\n    animation-duration: 0.25s;\\n    animation-iteration-count: 1;\\n    animation-name: fadeInOpacity;\\n    animation-timing-function: ease-in;\\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  /* Shared between content and arrow */\\n  .kol-tooltip-wc .tooltip-area {\\n    background-color: #fff;\\n    color: #000;\\n  }\\n  .kol-tooltip-wc .tooltip-arrow {\\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-wc .tooltip-content {\\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  .kol-table-stateless-wc {\\n    display: block;\\n  }\\n  .table {\\n    max-width: 100%;\\n    overflow-x: auto;\\n    overflow-y: hidden;\\n  }\\n  table {\\n    width: 100%;\\n  }\\n  caption {\\n    text-align: start;\\n  }\\n  .focus-element {\\n    font-size: 0;\\n  }\\n  .focus-element:focus {\\n    outline: 0 !important;\\n  }\\n  .table:has(.focus-element:focus) {\\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\\n    outline: 5px auto Highlight;\\n    outline: 5px auto -webkit-focus-ring-color;\\n    outline-offset: 2px;\\n  }\\n  .table-sort-button .button {\\n    color: inherit;\\n  }\\n  tbody th,\\n  th.align-left {\\n    text-align: left;\\n  }\\n  tbody th .table-sort-button .button-inner,\\n  th.align-left .table-sort-button .button-inner {\\n    justify-items: start;\\n  }\\n  th.align-center {\\n    text-align: center;\\n  }\\n  th.align-center .table-sort-button .button-inner {\\n    justify-items: center;\\n  }\\n  th.align-right {\\n    text-align: right;\\n  }\\n  th.align-right .table-sort-button .button-inner {\\n    justify-items: end;\\n  }\\n  tr.foot-spacer,\\n  tr.head-spacer {\\n    display: none;\\n  }\\n  .selection-header-cell {\\n    width: 0;\\n  }\\n  .selection-cell {\\n    width: var(--a11y-min-size);\\n    height: var(--a11y-min-size);\\n    white-space: nowrap;\\n  }\\n  .input label {\\n    align-items: center;\\n    cursor: pointer;\\n    display: flex;\\n    height: var(--a11y-min-size);\\n    justify-content: center;\\n    position: relative;\\n    width: var(--a11y-min-size);\\n  }\\n  .input .icon {\\n    display: block;\\n    inset: auto;\\n    position: absolute;\\n    z-index: 1;\\n  }\\n  .input input {\\n    appearance: none;\\n    border-style: solid;\\n    cursor: pointer;\\n    margin: 0;\\n  }\\n  .input input:before {\\n    content: \\\"\\\";\\n  }\\n  .input input[type=checkbox] {\\n    position: relative;\\n    display: flex;\\n    height: calc(var(--a11y-min-size) / 2);\\n    width: calc(var(--a11y-min-size) / 2);\\n    align-items: center;\\n    justify-content: center;\\n    background-color: rgb(255, 255, 255);\\n    border-width: 2px;\\n    line-height: 1.5;\\n    transition: all 0.5s ease 0s;\\n  }\\n  .input input[type=radio] {\\n    display: flex;\\n    border-width: 2px;\\n    border-radius: 100%;\\n    height: 1.5em;\\n    min-height: 1.5em;\\n    min-width: 1.5em;\\n    padding: 0;\\n    width: 1.5em;\\n  }\\n  .input input[type=radio]:before {\\n    border-radius: 100%;\\n    margin: auto;\\n    height: 0.75em;\\n    width: 0.75em;\\n  }\\n  .input input[type=radio]:checked:before {\\n    background-color: #000;\\n  }\\n  @media (forced-colors: active) {\\n    .input input[type=radio]:checked:before {\\n      /* Give it a visible background in forced colors mode */\\n      background-color: selectedItem !important;\\n    }\\n  }\\n}\";\nconst KolTableStatelessDefaultStyle0 = defaultStyleCss;\n\nconst KolTableStateless = class {\n    constructor(hostRef) {\n        registerInstance(this, hostRef);\n        this._data = undefined;\n        this._dataFoot = undefined;\n        this._headerCells = undefined;\n        this._label = undefined;\n        this._minWidth = undefined;\n        this._on = undefined;\n        this._selection = undefined;\n    }\n    render() {\n        return (h(Host, { key: 'ca6a12ebf0f5e0d90586e3128ea55b001449e024', class: \"kol-table-stateless\" }, h(KolTableStatelessWcTag, { key: 'a58a5f21f2f33194313c1ab7840475c8cc6c016c', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));\n    }\n};\nKolTableStateless.style = {\n    default: KolTableStatelessDefaultStyle0\n};\n\nexport { KolTableStateless as kol_table_stateless };\n\n//# sourceMappingURL=kol-table-stateless.entry.js.map"],"names":["defaultStyleCss","KolTableStatelessDefaultStyle0","KolTableStateless","hostRef","registerInstance","h","Host","KolTableStatelessWcTag"],"mappings":"8DAAA;AAAA;AAAA,GAMA,MAAMA,EAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAClBC,EAAiCD,EAEjCE,EAAoB,KAAM,CAC5B,YAAYC,EAAS,CACjBC,EAAiB,KAAMD,CAAO,EAC9B,KAAK,MAAQ,OACb,KAAK,UAAY,OACjB,KAAK,aAAe,OACpB,KAAK,OAAS,OACd,KAAK,UAAY,OACjB,KAAK,IAAM,OACX,KAAK,WAAa,MAC1B,CACI,QAAS,CACL,OAAQE,EAAEC,EAAM,CAAE,IAAK,2CAA4C,MAAO,qBAAuB,EAAED,EAAEE,EAAwB,CAAE,IAAK,2CAA4C,MAAO,KAAK,MAAO,UAAW,KAAK,UAAW,aAAc,KAAK,aAAc,OAAQ,KAAK,OAAQ,UAAW,KAAK,UAAW,IAAK,KAAK,IAAK,WAAY,KAAK,UAAU,CAAE,CAAC,CACpW,CACA,EACAL,EAAkB,MAAQ,CACtB,QAASD,CACb"}

package/dist/assets/kol-table.entry-DVVBQ-gH.js

@@ -0,0 +1,4 @@
+import{r as i,h as a,a9 as e}from"./index-Bvb9XsoR.js";/*!
+ * KoliBri - The accessible HTML-Standard
+ */const o=class{constructor(t){i(this,t),this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0}render(){return a(e,{key:"2a0229eb463970a0b26a500059e5ca20fe665dd4",_allowMultiSort:this._allowMultiSort,_data:this._data,_dataFoot:this._dataFoot,_headers:this._headers,_label:this._label,_minWidth:this._minWidth,_pagination:this._pagination,_paginationPosition:this._paginationPosition,_selection:this._selection,_on:this._on})}};export{o as kol_table};
+//# sourceMappingURL=kol-table.entry-DVVBQ-gH.js.map

package/dist/assets/kol-table.entry-DVVBQ-gH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kol-table.entry-DVVBQ-gH.js","sources":["../../../../components/dist/esm/kol-table.entry.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { r as registerInstance, h } from './index-3be16660.js';\nimport { p as KolTableStatefulTag } from './component-names-4cb1c62b.js';\n\nconst KolTable = class {\n    constructor(hostRef) {\n        registerInstance(this, hostRef);\n        this._allowMultiSort = undefined;\n        this._data = undefined;\n        this._dataFoot = undefined;\n        this._headers = undefined;\n        this._label = undefined;\n        this._minWidth = undefined;\n        this._pagination = undefined;\n        this._paginationPosition = 'bottom';\n        this._selection = undefined;\n        this._on = undefined;\n    }\n    render() {\n        return (h(KolTableStatefulTag, { key: '2a0229eb463970a0b26a500059e5ca20fe665dd4', _allowMultiSort: this._allowMultiSort, _data: this._data, _dataFoot: this._dataFoot, _headers: this._headers, _label: this._label, _minWidth: this._minWidth, _pagination: this._pagination, _paginationPosition: this._paginationPosition, _selection: this._selection, _on: this._on }));\n    }\n};\n\nexport { KolTable as kol_table };\n\n//# sourceMappingURL=kol-table.entry.js.map"],"names":["KolTable","hostRef","registerInstance","h","KolTableStatefulTag"],"mappings":"uDAAA;AAAA;AAAA,GAMK,MAACA,EAAW,KAAM,CACnB,YAAYC,EAAS,CACjBC,EAAiB,KAAMD,CAAO,EAC9B,KAAK,gBAAkB,OACvB,KAAK,MAAQ,OACb,KAAK,UAAY,OACjB,KAAK,SAAW,OAChB,KAAK,OAAS,OACd,KAAK,UAAY,OACjB,KAAK,YAAc,OACnB,KAAK,oBAAsB,SAC3B,KAAK,WAAa,OAClB,KAAK,IAAM,MACnB,CACI,QAAS,CACL,OAAQE,EAAEC,EAAqB,CAAE,IAAK,2CAA4C,gBAAiB,KAAK,gBAAiB,MAAO,KAAK,MAAO,UAAW,KAAK,UAAW,SAAU,KAAK,SAAU,OAAQ,KAAK,OAAQ,UAAW,KAAK,UAAW,YAAa,KAAK,YAAa,oBAAqB,KAAK,oBAAqB,WAAY,KAAK,WAAY,IAAK,KAAK,IAAK,CAClX,CACA"}

package/dist/assets/kol-tabs.entry-BOEtl29T.js

@@ -0,0 +1,305 @@
+import{r as u,B as f,h as l,c as h,H as p,f as g,L as b,s as m,A as v,W as y,X as _,ad as w,l as k,w as T}from"./index-Bvb9XsoR.js";import{t as x}from"./i18n-0835cc3b-DKpqqbhz.js";import{K as r}from"./keyboard-77e19a81-D1ah5412.js";import{v as C}from"./align-d80dfc19-BPR7NM6-.js";import{v as P}from"./label-c2f427ab-CqjOOKaa.js";/*!
+ * KoliBri - The accessible HTML-Standard
+ */const c=["select-automatic","select-manual"],S=(e,t)=>{T(e,"_behavior",n=>typeof n=="string"&&c.includes(n),new Set([`KoliBriTabBehavior {${c.join(", ")}`]),t)},A=`/*
+ * This file contains all rules for accessibility.
+ */
+@layer kol-global {
+  :host {
+    /*
+     * Minimum size of interactive elements.
+     */
+    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));
+    /*
+     * No element should be used without a background and font color whose contrast ratio has
+     * not been checked. By initially setting the background color to white and the font color
+     * to black, the contrast ratio is ensured and explicit adjustment is forced.
+     */
+    background-color: white;
+    color: black;
+  }
+  * {
+    /*
+     * This rule enables the word dividing for all texts. That is important for high zoom levels.
+     */
+    hyphens: auto;
+    /*
+     * Verdana is an accessible font that can be used without requiring additional loading time.
+     */
+    font-family: Verdana;
+    /*
+     * Letter spacing is required for all texts.
+     */
+    letter-spacing: inherit;
+    /*
+     * This rule enables the word dividing for all texts. That is important for high zoom levels.
+     */
+    word-break: break-word;
+    /*
+     * Word spacing is required for all texts.
+     */
+    word-spacing: inherit;
+  }
+  /*
+   * All interactive elements should have a minimum size of rem(44).
+   */
+  /* input:not([type='checkbox'], [type='radio'], [type='range']), */
+  /* option, */
+  /* select, */
+  /* textarea, */
+  [role=button],
+  button:not([role=link]),
+  .kol-input .input {
+    min-height: var(--a11y-min-size);
+    min-width: var(--a11y-min-size);
+  }
+  /*
+   * Some interactive elements should not inherit the font-family and font-size.
+   */
+  a,
+  button,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  input,
+  option,
+  select,
+  textarea {
+    /*
+     * All elements should inherit the font family from his parent element.
+     */
+    font-family: inherit;
+    /*
+     * All elements should inherit the font size from his parent element.
+     */
+    font-size: inherit;
+  }
+}
+/**
+ * Sometimes we need the semantic element for accessibility reasons,
+ * but we don't want to show it.
+ *
+ * - https://www.a11yproject.com/posts/how-to-hide-content/
+ */
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+@layer kol-global {
+  /*
+   * Dieses CSS stellt sicher, dass der Standard-Style
+   * von A und Button resettet werden.
+   */
+  :is(a, button) {
+    background-color: transparent;
+    border: none;
+    margin: 0;
+    padding: 0;
+    width: 100%; /* 100% needed for custom width from outside */
+  }
+  /*
+   * Ensure elements with hidden attribute to be actually not visible
+   * @see https://meowni.ca/hidden.is.a.lie.html
+   */
+  [hidden] {
+    display: none !important;
+  }
+}
+@layer kol-global {
+  :host {
+    font-size: calc(16rem / var(--kolibri-root-font-size, 16));
+    /*
+     * The max-width is needed to prevent the table from overflowing the
+     * parent node, if the table is wider than the parent node.
+     */
+    max-width: 100%;
+  }
+  * {
+    /*
+     * We prefer to box-sizing: border-box for all elements.
+     */
+    box-sizing: border-box;
+  }
+  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */
+  .kol-span-wc {
+    display: grid;
+    place-items: center;
+  }
+  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */
+  .kol-span-wc > span {
+    display: flex;
+    place-items: center;
+  }
+  a,
+  button {
+    cursor: pointer;
+  }
+  /* This is the text label. */
+  .hide-label > .kol-span-wc > span > span {
+    display: none;
+  }
+  /* Reset browser agent style. */
+  button:disabled {
+    color: unset;
+  }
+  .disabled label,
+  .disabled:focus-within label,
+  [aria-disabled=true],
+  [aria-disabled=true]:focus,
+  [disabled],
+  [disabled]:focus {
+    cursor: not-allowed;
+    opacity: 0.5;
+    outline: none;
+  }
+  [aria-disabled=true]:focus .kol-span-wc,
+  [disabled]:focus .kol-span-wc {
+    outline: none !important;
+  }
+  .badge-text-hint {
+    background-color: lightgray;
+    color: black;
+  }
+}
+@layer kol-component {
+  :host {
+    display: block;
+  }
+}
+@layer kol-component {
+  .kol-tooltip-wc {
+    display: contents;
+  }
+  .kol-tooltip-wc .tooltip-floating {
+    animation-duration: 0.25s;
+    animation-iteration-count: 1;
+    animation-name: fadeInOpacity;
+    animation-timing-function: ease-in;
+    display: none;
+    position: fixed;
+    visibility: hidden;
+    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */
+    top: 0;
+    left: 0;
+    max-width: 90vw;
+    max-height: 90vh;
+    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */
+    width: var(--kol-tooltip-width);
+  }
+  /* Shared between content and arrow */
+  .kol-tooltip-wc .tooltip-area {
+    background-color: #fff;
+    color: #000;
+  }
+  .kol-tooltip-wc .tooltip-arrow {
+    height: calc(10rem / var(--kolibri-root-font-size, 16));
+    position: absolute;
+    transform: rotate(45deg);
+    width: calc(10rem / var(--kolibri-root-font-size, 16));
+    z-index: 999;
+  }
+  .kol-tooltip-wc .tooltip-content {
+    position: relative;
+    z-index: 1000;
+  }
+  @keyframes fadeInOpacity {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}
+@layer kol-component {
+  :host > div {
+    display: grid;
+  }
+  .tabs-content {
+    overflow: auto;
+  }
+  .tabs-button-group {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .tabs-button-group button {
+    border-bottom-color: transparent;
+    border-bottom-style: solid;
+    display: block;
+  }
+  div.grid,
+  div[role=tabpanel] {
+    height: 100%;
+  }
+  :host > .tabs-align-right {
+    display: grid;
+    grid-template-columns: 1fr auto;
+  }
+  :host > .tabs-align-right .tabs-button-group {
+    flex-direction: column;
+    order: 2;
+  }
+  :host > .tabs-align-right .tabs-button-group .kol-button-wc {
+    width: 100%;
+  }
+  :host > .tabs-align-left {
+    display: grid;
+    grid-template-columns: auto 1fr;
+  }
+  :host > .tabs-align-left .tabs-button-group {
+    flex-direction: column;
+    order: 0;
+  }
+  :host > .tabs-align-left .tabs-button-group .kol-button-wc {
+    width: 100%;
+  }
+  :host > .tabs-align-bottom {
+    display: grid;
+    grid-template-rows: 1fr auto;
+  }
+  :host > .tabs-align-bottom .tabs-button-group {
+    order: 2;
+  }
+  :host > .tabs-align-bottom .tabs-button-group > div {
+    display: flex;
+    margin: 0 1em;
+  }
+  :host > .tabs-align-bottom .tabs-button-group > div > div:first-child {
+    margin: 0 1em 0 0;
+  }
+  :host > .tabs-align-top {
+    display: grid;
+    grid-template-rows: auto 1fr;
+  }
+  :host > .tabs-align-top .tabs-button-group {
+    order: 0;
+  }
+  :host > .tabs-align-top .tabs-button-group > div {
+    display: flex;
+  }
+  :host > .tabs-align-top .tabs-button-group > div > div {
+    margin: 0 1em;
+  }
+  :host > .tabs-align-top .tabs-button-group > div > div:first-child {
+    margin: 0 1em 0 0;
+  }
+}`,z=A,B=class{constructor(e){u(this,e),this.onCreateLabel=`${x("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,n,a=1)=>{const i=n+a;return i<t.length?t[i]._disabled?this.nextPossibleTabIndex(t,n,a+1):i:n},this.prevPossibleTabIndex=(t,n,a=1)=>{const i=n-a;return i>=0?t[i]._disabled?this.prevPossibleTabIndex(t,n,a+1):i:n},this.onKeyDown=t=>{switch(t.key){case r.ArrowRight:this.goToNextTab(t);break;case r.ArrowLeft:this.goToPreviousTab(t);break;case r.Space:case r.Enter:this.activateFocusedTab(t);break}},this.onClickSelect=(t,n)=>{this.selectNextTabEvent(t,n)},this.onMouseDown=t=>{t.preventDefault(),t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,n,a=!0,i)=>{if(t>n.length-1&&(t=n.length-1),t<0&&(t=0),Array.isArray(n)&&n[t]&&n[t]._disabled){if(a===!0){if(t<n.length-1)return this.selectNextNotDisabledTab(t+1,n,!0,i||t);t=i||t,a=!1}if(a===!1){if(t>0)return this.selectNextNotDisabledTab(t-1,n,!1,i||t);f("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,n,a,i)=>{let o;i==="_selected"?o=t:o=this.state._selected;let s;i==="_tabs"?s=t:s=this.state._tabs,s.length>0&&n.set("_selected",this.selectNextNotDisabledTab(o,s))},this.refreshTabPanels=()=>{var t,n,a,i;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let o=0;o<((t=this.state._tabs)===null||t===void 0?void 0:t.length);o++){const s=document.createElement("div");s.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${o}`),s.setAttribute("id",`tabpanel-${o}`),s.setAttribute("role","tabpanel"),s.setAttribute("hidden","");const d=document.createElement("slot");d.setAttribute("name",`tabpanel-slot-${o}`),s.appendChild(d),(n=this.tabPanelHost)===null||n===void 0||n.appendChild(s),typeof HTMLCollection<"u"&&((a=this.host)===null||a===void 0?void 0:a.children)instanceof HTMLCollection&&(!((i=this.host)===null||i===void 0)&&i.children[o])&&this.host.children[o].setAttribute("slot",`tabpanel-slot-${o}`)}this.updateVisiblePanel()}},this.updateVisiblePanel=()=>{this.tabPanelHost&&Array.from(this.tabPanelHost.children).forEach((t,n)=>{n===this.state._selected?t.removeAttribute("hidden"):t.setAttribute("hidden","")})},this.onCreate=t=>{var n,a;t.preventDefault(),t.stopPropagation(),typeof((n=this.state._on)===null||n===void 0?void 0:n.onCreate)=="function"&&((a=this.state._on)===null||a===void 0||a.onCreate(t))},this.onBlur=()=>{this.currentFocusIndex=void 0},this._align="top",this._behavior=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}getCurrentFocusIndex(){return typeof this.currentFocusIndex=="number"?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return this._behavior==="select-manual"?"selectFocusOnly":"activateCompletely"}goToNextTab(e){const t=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}goToPreviousTab(e){const t=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}activateFocusedTab(e){typeof this.currentFocusIndex=="number"&&this.onSelect(e,this.currentFocusIndex)}selectNextTabEvent(e,t,n="activateCompletely"){var a,i;this.currentFocusIndex=t,this.focusTabById(t),n==="activateCompletely"&&(this._selected=t,(i=(a=this.state._tabs[t]._on)===null||a===void 0?void 0:a.onSelect)===null||i===void 0||i.call(a,e,t),this.onSelect(e,t))}renderButtonGroup(){return l("div",{"aria-label":this.state._label,class:"tabs-button-group kol-button-group-wc",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map((e,t)=>l(h,{_disabled:e._disabled,_icons:e._icons,_hideLabel:e._hideLabel,_label:e._label,_on:this.callbacks,_tabIndex:this.state._selected===t?0:-1,_tooltipAlign:e._tooltipAlign,_variant:this.state._selected===t?"custom":void 0,_customClass:this.state._selected===t?"selected":void 0,_ariaControls:`tabpanel-${t}`,_ariaSelected:this.state._selected===t,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${t}`,_role:"tab",_value:t})),this.showCreateTab&&l(h,{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return l(p,{key:"c8a57c143bad6f393f32b5dabb73aa4b85283678",class:"kol-tabs"},l("div",{key:"4bf7d0d4d05cd9978838cd19fefd308426b41ffd",ref:e=>{this.tabPanelsElement=e},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),l("div",{key:"5b5b9731a0523296c14429e8f636e6898d8f6400",class:"tabs-content",ref:this.catchTabPanelHost})))}validateAlign(e){C(this,e)}validateBehavior(e){S(this,e)}validateLabel(e){P(this,e,{required:!0})}validateOn(e){if(typeof e=="object"&&e!==null){g("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const t={};(typeof e.onCreate=="function"||typeof e.onCreate=="object")&&(typeof e.onCreate=="object"?(typeof e.onCreate.label=="string"&&e.onCreate.label.length>0?this.onCreateLabel=e.onCreate.label:b.debug(`[KolTabs] The label text for New in {
+  onCreate: {
+    label: string (!),
+    callback: Function
+  }
+} is not set correctly.`),typeof e.onCreate.callback=="function"?t.onCreate=e.onCreate.callback:b.debug(`[KolTabs] The onCreate callback function for New in {
+  onCreate: {
+    label: string,
+    callback: Function (!)
+  }
+} is not set correctly.`)):t.onCreate=e.onCreate,this.showCreateTab=typeof t.onCreate=="function"),typeof e.onSelect=="function"&&(t.onSelect=e.onSelect),m(this,"_on",t)}}validateSelected(e){v(this,"_selected",e,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(e){y(this,"_tabs",t=>typeof t=="object"&&t!==null&&typeof t._label=="string"&&t._label.length>0,e,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}}),_("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior)}componentDidRender(){this.refreshTabPanels()}focusTabById(e){if(this.tabPanelsElement){const t=w(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);t==null||t.focus()}}onSelect(e,t){var n,a;(a=(n=this._on)===null||n===void 0?void 0:n.onSelect)===null||a===void 0||a.call(n,e,t),this.focusTabById(t)}get host(){return k(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};B.style={default:z};export{B as kol_tabs};
+//# sourceMappingURL=kol-tabs.entry-BOEtl29T.js.map