@public-ui/components 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/cjs/test-component.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-4e35d174.js"),TestComponent=class{constructor(e){index.registerInstance(this,e)}};exports.test_component=TestComponent;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-80062b8e.js"),TestComponent=class{constructor(e){index.registerInstance(this,e)}};exports.test_component=TestComponent;

package/dist/components/Alert.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{_ as __rest}from"./tslib.es6.js";import{h}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{t as translate}from"./i18n2.js";import{c as KolIconTag,a as KolButtonWcTag}from"./component-names.js";import{K as KolHeadingFc}from"./Heading.js";import{L as Log}from"./dev.utils.js";const Icon=({ariaLabel:o,icon:l})=>h(KolIconTag,{class:"heading-icon",_label:o,_icons:l}),AlertIcon=({type:o,label:l})=>{switch(o){case"error":return h(Icon,{ariaLabel:translate("kol-error"),icon:"codicon codicon-error",label:l});case"info":return h(Icon,{ariaLabel:translate("kol-info"),icon:"codicon codicon-info",label:l});case"warning":return h(Icon,{ariaLabel:translate("kol-warning"),icon:"codicon codicon-warning",label:l});case"success":return h(Icon,{ariaLabel:translate("kol-success"),icon:"codicon codicon-pass",label:l});default:return h(Icon,{ariaLabel:translate("kol-message"),icon:"codicon codicon-comment",label:l})}},AlertIcon$1=AlertIcon,KolAlertFc=(o,l)=>{const{class:e={},type:a="default",variant:c="msg",label:n,hasCloser:t,alert:r,onAlertTimeout:s,onCloserClick:i,level:d}=o,g=__rest(o,["class","type","variant","label","hasCloser","alert","onAlertTimeout","onCloserClick","level"]);if(r){try{Log.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(o){Log.debug("Navigator does not support vibration.")}setTimeout((()=>{null==s||s()}),1e4)}const b=Object.assign({class:clsx("kol-alert-wc","alert",a,c,{hasCloser:!!t},e),role:r?"alert":void 0},g);return h("div",Object.assign({},b),h("div",{class:"heading"},h(AlertIcon$1,{label:n,type:a}),h("div",{class:"heading-content"},n?h(KolHeadingFc,{level:d},n):null,"msg"===c&&h("div",{class:"content"},l)),t&&h(KolButtonWcTag,{class:"close",_ariaDescription:(null==n?void 0:n.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:translate("kol-close-alert"),_on:{onClick:i},_tooltipAlign:"left"})),"card"===c&&h("div",{class:"content"},l))},KolAlertFc$1=KolAlertFc;export{KolAlertFc$1 as K};
+import{_ as __rest}from"./tslib.es6.js";import{h}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{t as translate}from"./i18n2.js";import{c as KolIconTag,a as KolButtonWcTag}from"./component-names.js";import{K as KolHeadingFc}from"./Heading.js";import{L as Log}from"./dev.utils.js";const Icon=({ariaLabel:o,icon:l})=>h(KolIconTag,{class:"kol-alert__heading-icon",_label:o,_icons:l}),AlertIcon=({type:o,label:l})=>{switch(o){case"error":return h(Icon,{ariaLabel:translate("kol-error"),icon:"codicon codicon-error",label:l});case"info":return h(Icon,{ariaLabel:translate("kol-info"),icon:"codicon codicon-info",label:l});case"warning":return h(Icon,{ariaLabel:translate("kol-warning"),icon:"codicon codicon-warning",label:l});case"success":return h(Icon,{ariaLabel:translate("kol-success"),icon:"codicon codicon-pass",label:l});default:return h(Icon,{ariaLabel:translate("kol-message"),icon:"codicon codicon-comment",label:l})}},AlertIcon$1=AlertIcon,KolAlertFc=(o,l)=>{const{class:e={},type:a="default",variant:t="msg",label:c,hasCloser:n,alert:r,onAlertTimeout:s,onCloserClick:i,level:d}=o,b=__rest(o,["class","type","variant","label","hasCloser","alert","onAlertTimeout","onCloserClick","level"]);if(r){try{Log.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(o){Log.debug("Navigator does not support vibration.")}setTimeout((()=>{null==s||s()}),1e4)}const _=Object.assign({class:clsx("kol-alert",`kol-alert--${a}`,`kol-alert--${t}`,{"kol-alert--hasCloser":!!n},e),role:r?"alert":void 0},b);return h("div",Object.assign({},_),h("div",{class:"kol-alert__container"},h(AlertIcon$1,{label:c,type:a}),h("div",{class:"kol-alert__container-content"},c?h(KolHeadingFc,{class:"kol-alert__heading",level:d},c):null,"msg"===t&&h("div",{class:"kol-alert__content"},l)),n&&h(KolButtonWcTag,{class:"kol-alert__close-button close",_ariaDescription:(null==c?void 0:c.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:translate("kol-close-alert"),_on:{onClick:i},_tooltipAlign:"left"})),"card"===t&&h("div",{class:"kol-alert__content"},l))},KolAlertFc$1=KolAlertFc;export{KolAlertFc$1 as K};

package/dist/components/Alert.js.map

@@ -1 +1 @@
-{"file":"Alert.js","mappings":"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","names":["AlertIcon"],"sources":["src/functional-components/AlertIcon/AlertIcon.tsx","src/functional-components/Alert/Alert.tsx"],"sourcesContent":["import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport { KolIconTag } from '../../core/component-names';\nimport type { AlertType } from '../../schema';\nimport { translate } from '../../i18n';\n\nconst Icon: FC<{ ariaLabel: string; icon: string; label?: string }> = ({ ariaLabel, icon }) => {\n\treturn <KolIconTag class=\"heading-icon\" _label={ariaLabel} _icons={icon} />;\n};\n\nconst AlertIcon: FC<{ label?: string; type?: AlertType }> = ({ type, label }) => {\n\tswitch (type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"codicon codicon-error\" label={label} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"codicon codicon-info\" label={label} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"codicon codicon-warning\" label={label} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"codicon codicon-pass\" label={label} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"codicon codicon-comment\" label={label} />;\n\t}\n};\n\nexport default AlertIcon;\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\n\nimport { Log, type InternalAlertProps } from '../../schema';\nimport { translate } from '../../i18n';\nimport { KolButtonWcTag } from '../../core/component-names';\n\nimport AlertIcon from '../AlertIcon';\nimport KolHeadingFc from '../Heading';\n\nexport type KolAlertFcProps = JSXBase.HTMLAttributes<HTMLDivElement> &\n\tPartial<Omit<InternalAlertProps, 'on'>> & {\n\t\tonCloserClick?: () => void;\n\t\tonAlertTimeout?: () => void;\n\t};\n\nconst KolAlertFc: FC<KolAlertFcProps> = (props, children) => {\n\tconst { class: classNames = {}, type = 'default', variant = 'msg', label, hasCloser, alert, onAlertTimeout, onCloserClick, level, ...other } = props;\n\n\tif (alert) {\n\t\t/**\n\t\t * - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n\t\t * - https://googlechrome.github.io/samples/vibration/\n\t\t */\n\t\ttry {\n\t\t\tLog.debug(['Navigator should vibrate ...', navigator.vibrate([100, 75, 100, 75, 100])]);\n\t\t} catch (e) {\n\t\t\tLog.debug('Navigator does not support vibration.');\n\t\t}\n\n\t\tsetTimeout(() => {\n\t\t\tonAlertTimeout?.();\n\t\t}, 10000);\n\t}\n\n\tconst rootProps: Partial<JSXBase.HTMLAttributes<HTMLDivElement>> = {\n\t\tclass: clsx('kol-alert-wc', 'alert', type, variant, { hasCloser: !!hasCloser }, classNames),\n\t\trole: alert ? 'alert' : undefined,\n\t\t...other,\n\t};\n\n\treturn (\n\t\t<div {...rootProps}>\n\t\t\t<div class=\"heading\">\n\t\t\t\t<AlertIcon label={label} type={type} />\n\t\t\t\t<div class=\"heading-content\">\n\t\t\t\t\t{label ? <KolHeadingFc level={level}>{label}</KolHeadingFc> : null}\n\t\t\t\t\t{variant === 'msg' && <div class=\"content\">{children}</div>}\n\t\t\t\t</div>\n\t\t\t\t{hasCloser && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t_ariaDescription={label?.trim() || ''}\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_label={translate('kol-close-alert')}\n\t\t\t\t\t\t_on={{ onClick: onCloserClick }}\n\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{variant === 'card' && <div class=\"content\">{children}</div>}\n\t\t</div>\n\t);\n};\n\nexport default KolAlertFc;\n"],"version":3}
+{"file":"Alert.js","mappings":"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","names":["AlertIcon"],"sources":["src/functional-components/AlertIcon/AlertIcon.tsx","src/functional-components/Alert/Alert.tsx"],"sourcesContent":["import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport { KolIconTag } from '../../core/component-names';\nimport type { AlertType } from '../../schema';\nimport { translate } from '../../i18n';\n\nconst Icon: FC<{ ariaLabel: string; icon: string; label?: string }> = ({ ariaLabel, icon }) => {\n\treturn <KolIconTag class=\"kol-alert__heading-icon\" _label={ariaLabel} _icons={icon} />;\n};\n\nconst AlertIcon: FC<{ label?: string; type?: AlertType }> = ({ type, label }) => {\n\tswitch (type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"codicon codicon-error\" label={label} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"codicon codicon-info\" label={label} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"codicon codicon-warning\" label={label} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"codicon codicon-pass\" label={label} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"codicon codicon-comment\" label={label} />;\n\t}\n};\n\nexport default AlertIcon;\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\n\nimport { Log, type InternalAlertProps } from '../../schema';\nimport { translate } from '../../i18n';\nimport { KolButtonWcTag } from '../../core/component-names';\n\nimport AlertIcon from '../AlertIcon';\nimport KolHeadingFc from '../Heading';\n\nexport type KolAlertFcProps = JSXBase.HTMLAttributes<HTMLDivElement> &\n\tPartial<Omit<InternalAlertProps, 'on'>> & {\n\t\tonCloserClick?: () => void;\n\t\tonAlertTimeout?: () => void;\n\t};\n\nconst KolAlertFc: FC<KolAlertFcProps> = (props, children) => {\n\tconst { class: classNames = {}, type = 'default', variant = 'msg', label, hasCloser, alert, onAlertTimeout, onCloserClick, level, ...other } = props;\n\n\tif (alert) {\n\t\t/**\n\t\t * - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n\t\t * - https://googlechrome.github.io/samples/vibration/\n\t\t */\n\t\ttry {\n\t\t\tLog.debug(['Navigator should vibrate ...', navigator.vibrate([100, 75, 100, 75, 100])]);\n\t\t} catch (e) {\n\t\t\tLog.debug('Navigator does not support vibration.');\n\t\t}\n\n\t\tsetTimeout(() => {\n\t\t\tonAlertTimeout?.();\n\t\t}, 10000);\n\t}\n\n\tconst rootProps: Partial<JSXBase.HTMLAttributes<HTMLDivElement>> = {\n\t\tclass: clsx('kol-alert', `kol-alert--${type}`, `kol-alert--${variant}`, { 'kol-alert--hasCloser': !!hasCloser }, classNames),\n\t\trole: alert ? 'alert' : undefined,\n\t\t...other,\n\t};\n\n\treturn (\n\t\t<div {...rootProps}>\n\t\t\t<div class=\"kol-alert__container\">\n\t\t\t\t<AlertIcon label={label} type={type} />\n\t\t\t\t<div class=\"kol-alert__container-content\">\n\t\t\t\t\t{label ? (\n\t\t\t\t\t\t<KolHeadingFc class=\"kol-alert__heading\" level={level}>\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t</KolHeadingFc>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{variant === 'msg' && <div class=\"kol-alert__content\">{children}</div>}\n\t\t\t\t</div>\n\t\t\t\t{hasCloser && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-alert__close-button close\"\n\t\t\t\t\t\t_ariaDescription={label?.trim() || ''}\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_label={translate('kol-close-alert')}\n\t\t\t\t\t\t_on={{ onClick: onCloserClick }}\n\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{variant === 'card' && <div class=\"kol-alert__content\">{children}</div>}\n\t\t</div>\n\t);\n};\n\nexport default KolAlertFc;\n"],"version":3}