@public-ui/components 2.0.0-rc.3 → 2.0.0-rc.4

package/dist/kolibri/kol-toast.entry.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-import{r as t,h as s}from"./index-d0c806ea.js";import{v as e}from"./label-24e2ffaa.js";import{s as i,w as a}from"./prop.validators-3d72b47e.js";import"./a11y.tipps-ba9cd030.js";import"./dev.utils-b947b740.js";import"./reuse-b3566e4c.js";const n=["adding","settled","removing"],o="",l=class{constructor(s){t(this,s),this.close=()=>{var t;void 0!==(null===(t=this._on)||void 0===t?void 0:t.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClose:this.close},this._label=void 0,this._on=void 0,this._status=void 0,this._type="default",this.state={_label:"...",_status:"adding"}}validateLabel(t){e(this,t)}validateOn(t){"object"!=typeof t||"function"!=typeof(null==t?void 0:t.onClose)&&!0!==t.onClose||i(this,"_on",{onClose:t.onClose})}validateStatus(t){a(this,"_status",(t=>"string"==typeof t&&n.includes(t)),new Set("String {adding, settled, removing}"),t)}validateType(t){a(this,"_type",(t=>"string"==typeof t&&("default"===t||"error"===t||"info"===t||"success"===t||"warning"===t)),new Set("String {success, info, warning, error}"),t)}componentWillLoad(){this.validateLabel(this._label),this.validateOn(this._on),this.validateStatus(this._status),this.validateType(this._type)}render(){return s("div",{class:`toast ${this.state._status}`},s("kol-alert",{class:"alert",_alert:!0,_label:this.state._label,_level:0,_hasCloser:!0,_type:this.state._type,_variant:"card",_on:this.on},s("slot",null)))}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_status:["validateStatus"],_type:["validateType"]}}};l.style={default:o};export{l as kol_toast};

package/dist/kolibri/kol-toast.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["toastStatusOptions","defaultStyleCss","KolToast","this","close","_a","_on","onClose","undefined","Event","on","_label","_status","validateLabel","value","validateOn","setState","validateStatus","status","watchValidator","includes","Set","validateType","componentWillLoad","_type","render","h","class","state","_alert","_level","_hasCloser","_variant"],"sources":["src/components/toast-container/types.ts","src/components/toast/style.css?tag=kol-toast&mode=default&encapsulation=shadow","src/components/toast/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { LabelPropType } from '../../types/props/label';\nimport { AlertType } from '../alert/types';\n\nexport const toastStatusOptions = ['adding', 'settled', 'removing'] as const;\nexport type ToastStatus = (typeof toastStatusOptions)[number];\n\nexport type Toast = {\n\tdescription: string;\n\tlabel: LabelPropType;\n\ttype: AlertType;\n};\n\nexport type ToastState = {\n\ttoast: Toast;\n\tstatus: ToastStatus;\n\tid: string;\n};\n\ntype RequiredProps = NonNullable<unknown>;\ntype OptionalProps = NonNullable<unknown>;\n\ntype RequiredStates = RequiredProps & {\n\ttoastStates: ToastState[];\n};\ntype OptionalStates = OptionalProps;\n\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\nexport type API = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n","/* Placeholder file to allow theme styles to be applied. */\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { KoliBriToastEventCallbacks } from '../../types/toast';\nimport { setState, watchValidator } from '../../utils/prop.validators';\nimport { AlertType } from '../alert/types';\nimport { ToastStatus, toastStatusOptions } from '../toast-container/types';\nimport { API, States } from './types';\n\n/**\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-toast',\n\tshadow: true,\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n})\nexport class KolToast implements API {\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the event callback functions for the component.\n\t */\n\t@Prop() public _on?: KoliBriToastEventCallbacks;\n\n\t/**\n\t * Defines the current toast status.\n\t */\n\t@Prop() public _status!: ToastStatus;\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?: AlertType = 'default';\n\n\t@State() public state: States = {\n\t\t_label: '...',\n\t\t_status: 'adding',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriToastEventCallbacks): void {\n\t\tif (typeof value === 'object' && (typeof value?.onClose === 'function' || value.onClose === true)) {\n\t\t\tsetState<KoliBriToastEventCallbacks>(this, '_on', { onClose: value.onClose });\n\t\t}\n\t}\n\n\t@Watch('_status')\n\tpublic validateStatus(status?: ToastStatus): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_status',\n\t\t\t(status) => typeof status === 'string' && toastStatusOptions.includes(status),\n\t\t\tnew Set('String {adding, settled, removing}'),\n\t\t\tstatus\n\t\t);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'),\n\t\t\tnew Set('String {success, info, warning, error}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateStatus(this._status);\n\t\tthis.validateType(this._type);\n\t}\n\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClose: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div class={`toast ${this.state._status}`}>\n\t\t\t\t<kol-alert class=\"alert\" _alert={true} _label={this.state._label} _level={0} _hasCloser={true} _type={this.state._type} _variant=\"card\" _on={this.on}>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-alert>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"mappings":";;;6OAKO,MAAMA,EAAqB,CAAC,SAAU,UAAW,YCLxD,MAAMC,EAAkB,G,MCmBXC,EAAQ,M,yBAmEHC,KAAAC,MAAQ,K,MACxB,KAAIC,EAAAF,KAAKG,OAAG,MAAAD,SAAA,SAAAA,EAAEE,WAAYC,UAAW,CACpCL,KAAKG,IAAIC,QAAQ,IAAIE,MAAM,S,GAIZN,KAAAO,GAAK,CACrBH,QAASJ,KAAKC,O,2EAvDoB,U,WAEH,CAC/BO,OAAQ,MACRC,QAAS,S,CAIH,aAAAC,CAAcC,GACpBD,EAAcV,KAAMW,E,CAId,UAAAC,CAAWD,GACjB,UAAWA,IAAU,kBAAoBA,IAAK,MAALA,SAAK,SAALA,EAAOP,WAAY,YAAcO,EAAMP,UAAY,MAAO,CAClGS,EAAqCb,KAAM,MAAO,CAAEI,QAASO,EAAMP,S,EAK9D,cAAAU,CAAeC,GACrBC,EACChB,KACA,WACCe,UAAkBA,IAAW,UAAYlB,EAAmBoB,SAASF,IACtE,IAAIG,IAAI,sCACRH,E,CAKK,YAAAI,CAAaR,GACnBK,EACChB,KACA,SACCW,UAAiBA,IAAU,WAAaA,IAAU,WAAaA,IAAU,SAAWA,IAAU,QAAUA,IAAU,WAAaA,IAAU,YAC1I,IAAIO,IAAI,0CACRP,E,CAIK,iBAAAS,GACNpB,KAAKU,cAAcV,KAAKQ,QACxBR,KAAKY,WAAWZ,KAAKG,KACrBH,KAAKc,eAAed,KAAKS,SACzBT,KAAKmB,aAAanB,KAAKqB,M,CAajB,MAAAC,GACN,OACCC,EAAA,OAAKC,MAAO,SAASxB,KAAKyB,MAAMhB,WAC/Bc,EAAA,aAAWC,MAAM,QAAQE,OAAQ,KAAMlB,OAAQR,KAAKyB,MAAMjB,OAAQmB,OAAQ,EAAGC,WAAY,KAAMP,MAAOrB,KAAKyB,MAAMJ,MAAOQ,SAAS,OAAO1B,IAAKH,KAAKO,IACjJgB,EAAA,c"}

package/dist/kolibri/open-1af33679.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-import{a as o}from"./prop.validators-3d72b47e.js";const a=(a,p,r)=>{o(a,"_open",p,r)};export{a as v};

package/dist/kolibri/rows-a1db8d6b.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-import{e as o}from"./prop.validators-3d72b47e.js";const r=(r,s)=>{o(r,"_rows",s,{min:1})};export{r as v};

package/dist/kolibri/show-683993be.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-import{a as o}from"./prop.validators-3d72b47e.js";const s=(s,a,r)=>{o(s,"_show",a,r)};export{s as v};

package/dist/kolibri/tab-index-c306e719.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-import{a as t}from"./a11y.tipps-ba9cd030.js";import{e as a}from"./prop.validators-3d72b47e.js";const o={hooks:{afterPatch:a=>{-1!==a&&0!==a&&t("Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},e=(t,e)=>{a(t,"_tabIndex",e,o)};export{e as v};

package/dist/kolibri/toaster-1ee75e55.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-import{T as o}from"./toaster-2dda6584.js";var t,i;const a=o.getInstance(document);a.enqueue({description:"Toasty",label:"Initial Toast",type:"warning"});let l=0;null===(t=document.getElementById("oneToast"))||void 0===t||t.addEventListener("kol-click",(()=>{a.enqueue({description:"Toasty "+ ++l,label:"Label",type:"warning"})})),null===(i=document.getElementById("manyToast"))||void 0===i||i.addEventListener("kol-click",(()=>{for(let e=0;e<5;e++)a.enqueue({description:"Toasty "+ ++l,label:"Label",type:"warning"})}));

package/dist/kolibri/toaster-1ee75e55.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["toaster","ToasterService","getInstance","document","enqueue","description","label","type","myToastId","_a","getElementById","addEventListener","_b","i"],"sources":["src/dev/toaster.ts"],"sourcesContent":["import { ToasterService } from '../components/toast/toaster';\n\nconst toaster = ToasterService.getInstance(document);\n\nvoid toaster.enqueue({\n\tdescription: `Toasty`,\n\tlabel: `Initial Toast`,\n\ttype: 'warning',\n});\n\nlet myToastId = 0;\n\ndocument.getElementById('oneToast')?.addEventListener('kol-click', () => {\n\tvoid toaster.enqueue({\n\t\tdescription: `Toasty ${++myToastId}`,\n\t\tlabel: `Label`,\n\t\ttype: 'warning',\n\t});\n});\n\ndocument.getElementById('manyToast')?.addEventListener('kol-click', () => {\n\tfor (let i = 0; i < 5; i++) {\n\t\tvoid toaster.enqueue({\n\t\t\tdescription: `Toasty ${++myToastId}`,\n\t\t\tlabel: `Label`,\n\t\t\ttype: 'warning',\n\t\t});\n\t}\n});\n"],"mappings":";;;kDAEA,MAAMA,EAAUC,EAAeC,YAAYC,eAEtCH,EAAQI,QAAQ,CACpBC,YAAa,SACbC,MAAO,gBACPC,KAAM,YAGP,IAAIC,EAAY,GAEhBC,EAAAN,SAASO,eAAe,eAAW,MAAAD,SAAA,SAAAA,EAAEE,iBAAiB,aAAa,UAC7DX,EAAQI,QAAQ,CACpBC,YAAa,YAAYG,IACzBF,MAAO,QACPC,KAAM,WACL,KAGHK,EAAAT,SAASO,eAAe,gBAAY,MAAAE,SAAA,SAAAA,EAAED,iBAAiB,aAAa,KACnE,IAAK,IAAIE,EAAI,EAAGA,EAAI,EAAGA,IAAK,MACtBb,EAAQI,QAAQ,CACpBC,YAAa,YAAYG,IACzBF,MAAO,QACPC,KAAM,W"}

package/dist/kolibri/toaster-2dda6584.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ToasterService","constructor","document","this","toastContainerElement","createElement","body","prepend","getInstance","instance","instances","get","set","dispose","element","undefined","remove","console","warn","enqueue","toast","_a","Map"],"sources":["src/components/toast/toaster.tsx"],"sourcesContent":["import { Toast } from '../toast-container/types';\n\nexport class ToasterService {\n\tprivate static readonly instances: Map<Document, ToasterService> = new Map<Document, ToasterService>();\n\n\tprivate toastContainerElement?: HTMLKolToastContainerElement;\n\n\tprivate constructor(private readonly document: Document) {\n\t\tthis.toastContainerElement = this.document.createElement('kol-toast-container');\n\t\tthis.document.body.prepend(this.toastContainerElement);\n\t}\n\n\t/**\n\t * Get a toaster for the specified document environment. Each environment has exactly one instance of the service.\n\t */\n\tpublic static getInstance(document: Document) {\n\t\tlet instance = this.instances.get(document);\n\t\tif (!instance) {\n\t\t\tinstance = new ToasterService(document);\n\t\t\tthis.instances.set(document, instance);\n\t\t}\n\t\treturn instance;\n\t}\n\n\tpublic dispose() {\n\t\tconst element = this.toastContainerElement;\n\t\tif (element) {\n\t\t\tthis.toastContainerElement = undefined;\n\t\t\telement.remove();\n\t\t} else {\n\t\t\tconsole.warn('Toaster service is already disposed.');\n\t\t}\n\t}\n\n\tpublic async enqueue(toast: Toast) {\n\t\tawait this.toastContainerElement?.enqueue(toast);\n\t}\n}\n"],"mappings":";;;MAEaA,EAKZ,WAAAC,CAAqCC,GAAAC,KAAAD,WACpCC,KAAKC,sBAAwBD,KAAKD,SAASG,cAAc,uBACzDF,KAAKD,SAASI,KAAKC,QAAQJ,KAAKC,sB,CAM1B,kBAAOI,CAAYN,GACzB,IAAIO,EAAWN,KAAKO,UAAUC,IAAIT,GAClC,IAAKO,EAAU,CACdA,EAAW,IAAIT,EAAeE,GAC9BC,KAAKO,UAAUE,IAAIV,EAAUO,E,CAE9B,OAAOA,C,CAGD,OAAAI,GACN,MAAMC,EAAUX,KAAKC,sBACrB,GAAIU,EAAS,CACZX,KAAKC,sBAAwBW,UAC7BD,EAAQE,Q,KACF,CACNC,QAAQC,KAAK,uC,EAIR,aAAMC,CAAQC,G,aACdC,EAAAlB,KAAKC,yBAAqB,MAAAiB,SAAA,SAAAA,EAAEF,QAAQC,G,EAhCnBpB,EAAAU,UAA2C,IAAIY,W"}

package/dist/kolibri/tooltip-align-82c3e998.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-import{v as o}from"./alignment-8021b208.js";const t=(t,i)=>{o(t,"_tooltipAlign",i)};export{t as v};

package/dist/kolibri/validation-2424d267.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-import{c as o}from"./a11y.tipps-ba9cd030.js";import{c as t}from"./prop.validators-3d72b47e.js";const s=(s,e,p)=>{t(e,"_links",(t=>"object"==typeof t&&("string"==typeof t._href||"string"==typeof t._label)),p),o(s,e.state._links.length)};export{s as w};

package/dist/types/components/toast/component.d.ts

@@ -1,21 +0,0 @@
-import { JSX } from '../../stencil-public-runtime';
-import { LabelPropType } from '../../types/props/label';
-import { KoliBriToastEventCallbacks } from '../../types/toast';
-import { AlertType } from '../alert/types';
-import { ToastStatus } from '../toast-container/types';
-import { API, States } from './types';
-export declare class KolToast implements API {
-  _label: LabelPropType;
-  _on?: KoliBriToastEventCallbacks;
-  _status: ToastStatus;
-  _type?: AlertType;
-  state: States;
-  validateLabel(value?: LabelPropType): void;
-  validateOn(value?: KoliBriToastEventCallbacks): void;
-  validateStatus(status?: ToastStatus): void;
-  validateType(value?: AlertType): void;
-  componentWillLoad(): void;
-  private readonly close;
-  private readonly on;
-  render(): JSX.Element;
-}

package/dist/types/components/toast/test/html.mock.d.ts

@@ -1,2 +0,0 @@
-import { Props } from '../types';
-export declare const getToastHtml: (props: Props) => string;

package/dist/types/components/toast/types.d.ts

@@ -1,18 +0,0 @@
-import { Generic } from '@a11y-ui/core';
-import { PropLabel } from '../../types/props/label';
-import { KoliBriToastEventCallbacks } from '../../types/toast';
-import { AlertType } from '../alert/types';
-import { ToastStatus } from '../toast-container/types';
-type RequiredProps = PropLabel & {
-  status: ToastStatus;
-};
-type OptionalProps = {
-  on: KoliBriToastEventCallbacks;
-  type: AlertType;
-};
-export type Props = Generic.Element.Members<RequiredProps, OptionalProps>;
-type RequiredStates = RequiredProps;
-type OptionalStates = OptionalProps;
-export type States = Generic.Element.Members<RequiredStates, OptionalStates>;
-export type API = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;
-export {};

package/dist/types/types/toast.d.ts

@@ -1,4 +0,0 @@
-import { EventCallback } from './callbacks';
-export type KoliBriToastEventCallbacks = {
-  onClose?: EventCallback<Event>;
-};

package/doc/toast.md

@@ -1,94 +0,0 @@
-# Toast
-
-Mit der **Toast**-Komponente geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird am Kopf des Browserfenster
-angezeigt, bis sie geschlossen wird. Werden mehrere Toasts geöffnet, ohne das die bisherigen geschlossen wurden, so werden diese untereinander angezeigt.
-
-## Konstruktion
-
-Die Toast-Komponente wird nicht direkt verwendet, sondern immer über den ToasterService konstruiert.
-
-### Code
-
-```js
-import { ToasterService } from '@public-ui/components';
-
-// Get the toaster instance for the current HTML document.
-const toaster = ToasterService.getInstance(document);
-
-// Enqueue a new toast to the toaster to display:
-toaster.enqueue({
-	label: 'This is the title',
-	description: 'Magna eu sit adipisicing cillum amet esse in aute quis in dolore.',
-	type: 'info',
-});
-```
-
-## Verwendung
-
-### Überschrift
-
-Verwenden Sie das Attribut **`_label`**, um die Überschrift des Toasts zu bestimmen.
-
-### Inhalt
-
-Verwenden Sie das Attribut **`_description`**, um den Text-Inhalt des Toasts zu bestimmen.
-
-### Anzeigetyp des Toast
-
-Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögliche Werte sind:
-
-- `default`
-- `error`
-- `info`
-- `success`
-- `warning`
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-| Property               | Attribute | Description                                                                                                        | Type                                                                    | Default     |
-| ---------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ----------- |
-| `_label` _(required)_  | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                | `undefined` |
-| `_on`                  | --        | Defines the event callback functions for the component.                                                            | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }`         | `undefined` |
-| `_status` _(required)_ | `_status` | Defines the current toast status.                                                                                  | `"adding"` \| `"removing"` \| `"settled"`                                   | `undefined` |
-| `_type`                | `_type`   | Defines either the type of the component or of the components interactive element.                                 | `"default"` \| `"error"` \| `"info"` \| `"success"` \| `"warning"` \| `undefined` | `'default'` |
-
-
-## Slots
-
-| Slot | Description             |
-| ---- | ----------------------- |
-|      | Der Inhalt der Meldung. |
-
-
-## Dependencies
-
-### Used by
-
- - [kol-toast-container](../toast-container)
-
-### Depends on
-
-- [kol-alert](../alert)
-
-### Graph
-```mermaid
-graph TD;
-  kol-toast --> kol-alert
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-toast-container --> kol-toast
-  style kol-toast fill:#f9f,stroke:#333,stroke-width:4px
-```
-
-----------------------------------------------
-
-