@public-ui/components 1.4.0-rc.13 → 1.4.0-rc.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cheat-sheet.html +8 -8
- package/custom-elements.json +6 -6
- package/dist/cjs/button-link-229f6162.js.map +1 -1
- package/dist/cjs/kol-accordion.cjs.entry.js +1 -1
- package/dist/cjs/kol-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-button-link.cjs.entry.js +1 -1
- package/dist/cjs/kol-button-link.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-icon.cjs.entry.js +1 -1
- package/dist/cjs/kol-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-link-button.cjs.entry.js +1 -1
- package/dist/cjs/kol-link-button.cjs.entry.js.map +1 -1
- package/dist/components/component.js.map +1 -1
- package/dist/components/component2.js +1 -1
- package/dist/components/component2.js.map +1 -1
- package/dist/components/kol-accordion.js +1 -1
- package/dist/components/kol-accordion.js.map +1 -1
- package/dist/components/kol-button-link.js +1 -1
- package/dist/components/kol-button-link.js.map +1 -1
- package/dist/components/kol-link-button.js +1 -1
- package/dist/components/kol-link-button.js.map +1 -1
- package/dist/esm/button-link-c6783bbf.js.map +1 -1
- package/dist/esm/kol-accordion.entry.js +1 -1
- package/dist/esm/kol-accordion.entry.js.map +1 -1
- package/dist/esm/kol-button-link.entry.js +1 -1
- package/dist/esm/kol-button-link.entry.js.map +1 -1
- package/dist/esm/kol-icon.entry.js +1 -1
- package/dist/esm/kol-icon.entry.js.map +1 -1
- package/dist/esm/kol-link-button.entry.js +1 -1
- package/dist/esm/kol-link-button.entry.js.map +1 -1
- package/dist/kolibri/button-link-c6783bbf.js.map +1 -1
- package/dist/kolibri/kol-accordion.entry.js +1 -1
- package/dist/kolibri/kol-accordion.entry.js.map +1 -1
- package/dist/kolibri/kol-button-link.entry.js +1 -1
- package/dist/kolibri/kol-button-link.entry.js.map +1 -1
- package/dist/kolibri/kol-icon.entry.js +1 -1
- package/dist/kolibri/kol-icon.entry.js.map +1 -1
- package/dist/kolibri/kol-link-button.entry.js +1 -1
- package/dist/kolibri/kol-link-button.entry.js.map +1 -1
- package/dist/types/components/accordion/component.d.ts +1 -0
- package/dist/types/types/button-link.d.ts +1 -1
- package/doc/badge.md +1 -1
- package/doc/button-link.md +1 -1
- package/doc/button.md +1 -1
- package/doc/input-color.md +18 -18
- package/doc/input-date.md +24 -24
- package/doc/input-email.md +25 -25
- package/doc/input-file.md +19 -19
- package/doc/input-number.md +25 -25
- package/doc/input-password.md +23 -23
- package/doc/input-text.md +25 -25
- package/doc/link-button.md +1 -1
- package/doc/link.md +1 -1
- package/jest-test-results.json +1 -1
- package/package.json +1 -1
- package/vscode-custom-data.json +24 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["defaultStyleCss","KolIcon","_ariaLabel","_icon","render","h","Host","this","state","length","undefined","class","part","_part","role","validateAriaLabel","value","watchString","required","validateIcon","validatePart","componentWillLoad"],"sources":["./src/components/icon/style.css?tag=kol-icon&mode=default&encapsulation=shadow","./src/components/icon/component.tsx"],"sourcesContent":["@import '../../assets/codicons/codicon.css';\n@import '../../assets/fontawesome-free/css/all.css';\n@import '../../assets/icofont/icofont.css';\n\n:host > i {\n\tcolor: inherit !important;\n\tfont-size: inherit !important;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { AriaLabel } from '../../types/aria-label';\nimport { watchString } from '../../utils/prop.validators';\n\n/**\n * API\n */\ntype RequiredProps = AriaLabel & {\n\ticon: string;\n};\ntype OptionalProps = {\n\tpart: string;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-icon',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolIcon implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<i\n\t\t\t\t\taria-hidden={this.state._ariaLabel.length > 0 ? undefined : 'true'}\n\t\t\t\t\t/**\n\t\t\t\t\t * Die Auszeichnung `aria-hidden` ist eigentlich nicht erforderlich, da die aktuellen\n\t\t\t\t\t * Screenreader, wie NVDA und JAWS, es auch ohne `aria-hidden` nicht vorlesen.\n\t\t\t\t\t *\n\t\t\t\t\t * Referenz: https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden\n\t\t\t\t\t */\n\t\t\t\t\taria-label={this.state._ariaLabel.length > 0 ? this.state._ariaLabel : undefined}\n\t\t\t\t\tclass={this.state._icon}\n\t\t\t\t\tpart={`icon${typeof this._part === 'string' ? ` ${this._part}` : ''}`}\n\t\t\t\t\trole
|
|
1
|
+
{"version":3,"names":["defaultStyleCss","KolIcon","_ariaLabel","_icon","render","h","Host","this","state","length","undefined","class","part","_part","role","validateAriaLabel","value","watchString","required","validateIcon","validatePart","componentWillLoad"],"sources":["./src/components/icon/style.css?tag=kol-icon&mode=default&encapsulation=shadow","./src/components/icon/component.tsx"],"sourcesContent":["@import '../../assets/codicons/codicon.css';\n@import '../../assets/fontawesome-free/css/all.css';\n@import '../../assets/icofont/icofont.css';\n\n:host > i {\n\tcolor: inherit !important;\n\tfont-size: inherit !important;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { AriaLabel } from '../../types/aria-label';\nimport { watchString } from '../../utils/prop.validators';\n\n/**\n * API\n */\ntype RequiredProps = AriaLabel & {\n\ticon: string;\n};\ntype OptionalProps = {\n\tpart: string;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-icon',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolIcon implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<i\n\t\t\t\t\taria-hidden={this.state._ariaLabel.length > 0 ? undefined : 'true'}\n\t\t\t\t\t/**\n\t\t\t\t\t * Die Auszeichnung `aria-hidden` ist eigentlich nicht erforderlich, da die aktuellen\n\t\t\t\t\t * Screenreader, wie NVDA und JAWS, es auch ohne `aria-hidden` nicht vorlesen.\n\t\t\t\t\t *\n\t\t\t\t\t * Referenz: https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden\n\t\t\t\t\t */\n\t\t\t\t\taria-label={this.state._ariaLabel.length > 0 ? this.state._ariaLabel : undefined}\n\t\t\t\t\tclass={this.state._icon}\n\t\t\t\t\tpart={`icon${typeof this._part === 'string' ? ` ${this._part}` : ''}`}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t></i>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt das Aria-Label am Icon an.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Gibt einen Identifier eines Icons aus den Icon's an.\n\t */\n\t@Prop() public _icon!: string;\n\n\t/**\n\t * Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/)\n\t/**\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\t@Prop() public _part?: string;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_ariaLabel: '',\n\t\t_icon: 'fa-solid fa-house',\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_icon')\n\tpublic validateIcon(value?: string): void {\n\t\twatchString(this, '_icon', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_part')\n\tpublic validatePart(value?: string): void {\n\t\twatchString(this, '_part', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validatePart(this._part);\n\t}\n}\n"],"mappings":";;;iOAAA,MAAMA,EAAkB,u9nO,MC4BXC,EAAO,M,wGAyCa,CAC/BC,WAAY,GACZC,MAAO,oB,CA1CDC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,mBACcE,KAAKC,MAAMN,WAAWO,OAAS,EAAIC,UAAY,OAAM,aAOtDH,KAAKC,MAAMN,WAAWO,OAAS,EAAIF,KAAKC,MAAMN,WAAaQ,UACvEC,MAAOJ,KAAKC,MAAML,MAClBS,KAAM,cAAcL,KAAKM,QAAU,SAAW,IAAIN,KAAKM,QAAU,KACjEC,KAAK,Q,CAmCFC,kBAAkBC,GACxBC,EAAYV,KAAM,aAAcS,EAAO,CACtCE,SAAU,M,CAQLC,aAAaH,GACnBC,EAAYV,KAAM,QAASS,EAAO,CACjCE,SAAU,M,CAQLE,aAAaJ,GACnBC,EAAYV,KAAM,QAASS,E,CAMrBK,oBACNd,KAAKQ,kBAAkBR,KAAKL,YAC5BK,KAAKY,aAAaZ,KAAKJ,OACvBI,KAAKa,aAAab,KAAKM,M"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{r as i,h as t,H as o,g as s}from"./index-50adf9a0.js";import{w as n}from"./prop.validators-dd337216.js";import{a as e}from"./reuse-9dd1192b.js";import{w as r}from"./controller-b4263f6b.js";import{a}from"./i18n-e297566c.js";import"./index-599f5430.js";import"./a11y.tipps-a876ebb7.js";import"./dev.utils-ec1c1b88.js";const l=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}:host{display:inline-block}:host>kol-button-wc,:host>kol-link-wc{width:inherit}:host>kol-button-wc a,:host>kol-button-wc button,:host>kol-link-wc a,:host>kol-link-wc button{cursor:pointer;display:inline-block;min-height:44px;min-width:44px;padding:0;text-align:center;transition-duration:0.5s;transition-property:background-color, color, border-color;width:inherit}:host>kol-button-wc a:active,:host>kol-button-wc button:active,:host>kol-link-wc a:active,:host>kol-link-wc button:active{outline:0 !important;box-shadow:none !important}:host>kol-button-wc a:disabled,:host>kol-button-wc button:disabled,:host>kol-link-wc a:disabled,:host>kol-link-wc button:disabled{box-shadow:none;cursor:not-allowed;opacity:0.5}",
|
|
4
|
+
import{r as i,h as t,H as o,g as s}from"./index-50adf9a0.js";import{w as n}from"./prop.validators-dd337216.js";import{a as e}from"./reuse-9dd1192b.js";import{w as r}from"./controller-b4263f6b.js";import{a}from"./i18n-e297566c.js";import"./index-599f5430.js";import"./a11y.tipps-a876ebb7.js";import"./dev.utils-ec1c1b88.js";const l=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}:host{display:inline-block}:host>kol-button-wc,:host>kol-link-wc{width:inherit}:host>kol-button-wc a,:host>kol-button-wc button,:host>kol-link-wc a,:host>kol-link-wc button{cursor:pointer;display:inline-block;min-height:44px;min-width:44px;padding:0;text-align:center;transition-duration:0.5s;transition-property:background-color, color, border-color;width:inherit}:host>kol-button-wc a:active,:host>kol-button-wc button:active,:host>kol-link-wc a:active,:host>kol-link-wc button:active{outline:0 !important;box-shadow:none !important}:host>kol-button-wc a:disabled,:host>kol-button-wc button:disabled,:host>kol-link-wc a:disabled,:host>kol-link-wc button:disabled{box-shadow:none;cursor:not-allowed;opacity:0.5}",d=class{constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,e(this.host,this.ref)},this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._href=void 0,this._icon=void 0,this._iconOnly=!1,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._targetDescription=a("kol-open-link-in-tab"),this._tooltipAlign="right",this._variant="normal",this.state={}}render(){return t(o,null,t("kol-link-wc",{ref:this.catchRef,class:{button:!0,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0},_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_href:this._href,_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label,_on:this._on,_role:"button",_tabIndex:this._tabIndex,_target:this._target,_targetDescription:this._targetDescription,_tooltipAlign:this._tooltipAlign},t("slot",{name:"expert",slot:"expert"})))}validateCustomClass(t){n(this,"_customClass",t,{defaultValue:void 0})}validateVariant(t){r(this,"_variant",t)}componentWillLoad(){this.validateCustomClass(this._customClass),this.validateVariant(this._variant)}get host(){return s(this)}static get watchers(){return{_customClass:["validateCustomClass"],_variant:["validateVariant"]}}};d.style={default:l};export{d as kol_link_button};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["defaultStyleCss","KolLinkButton","this","catchRef","ref","propergateFocus","host","translate","render","h","Host","class","button","state","_variant","_customClass","length","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_href","_icon","_iconOnly","_label","_on","_role","_tabIndex","_target","_targetDescription","_tooltipAlign","name","slot","validateCustomClass","value","watchString","defaultValue","undefined","validateVariant","watchButtonVariant","componentWillLoad"],"sources":["./src/components/link-button/style.css?tag=kol-link-button&mode=default&encapsulation=shadow","./src/components/link-button/component.tsx"],"sourcesContent":["@import '../button.css';\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tKoliBriButtonVariant,\n\tLinkButtonStates,\n\tLinkOnCallbacks,\n\tLinkTarget,\n\tOptionalLinkButtonProps,\n\tOptionalLinkButtonStates,\n\tRequiredLinkButtonProps,\n\tRequiredLinkButtonStates,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { watchString } from '../../utils/prop.validators';\nimport { propergateFocus } from '../../utils/reuse';\nimport { watchButtonVariant } from '../button/controller';\nimport { Alignment } from '../../types/props/alignment';\nimport { translate } from '../../i18n';\n\ntype State = {\n\tstate: Generic.Element.Members<RequiredLinkButtonStates, OptionalLinkButtonStates>;\n};\n\n@Component({\n\ttag: 'kol-link-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLinkButton\n\timplements\n\t\tGeneric.Element.Members<RequiredLinkButtonProps, OptionalLinkButtonProps>,\n\t\tGeneric.Element.Watchers<RequiredLinkButtonStates, OptionalLinkButtonStates>,\n\t\tState\n{\n\t@Element() private readonly host?: HTMLKolLinkButtonElement;\n\tprivate ref?: HTMLKolLinkWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-link-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this.state._variant as string]: this.state._variant !== 'custom',\n\t\t\t\t\t\t[this.state._customClass as string]:\n\t\t\t\t\t\t\tthis.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_href={this._href}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconOnly={this._iconOnly}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role
|
|
1
|
+
{"version":3,"names":["defaultStyleCss","KolLinkButton","this","catchRef","ref","propergateFocus","host","translate","render","h","Host","class","button","state","_variant","_customClass","length","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_href","_icon","_iconOnly","_label","_on","_role","_tabIndex","_target","_targetDescription","_tooltipAlign","name","slot","validateCustomClass","value","watchString","defaultValue","undefined","validateVariant","watchButtonVariant","componentWillLoad"],"sources":["./src/components/link-button/style.css?tag=kol-link-button&mode=default&encapsulation=shadow","./src/components/link-button/component.tsx"],"sourcesContent":["@import '../button.css';\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tKoliBriButtonVariant,\n\tLinkButtonStates,\n\tLinkOnCallbacks,\n\tLinkTarget,\n\tOptionalLinkButtonProps,\n\tOptionalLinkButtonStates,\n\tRequiredLinkButtonProps,\n\tRequiredLinkButtonStates,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { watchString } from '../../utils/prop.validators';\nimport { propergateFocus } from '../../utils/reuse';\nimport { watchButtonVariant } from '../button/controller';\nimport { Alignment } from '../../types/props/alignment';\nimport { translate } from '../../i18n';\n\ntype State = {\n\tstate: Generic.Element.Members<RequiredLinkButtonStates, OptionalLinkButtonStates>;\n};\n\n@Component({\n\ttag: 'kol-link-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLinkButton\n\timplements\n\t\tGeneric.Element.Members<RequiredLinkButtonProps, OptionalLinkButtonProps>,\n\t\tGeneric.Element.Watchers<RequiredLinkButtonStates, OptionalLinkButtonStates>,\n\t\tState\n{\n\t@Element() private readonly host?: HTMLKolLinkButtonElement;\n\tprivate ref?: HTMLKolLinkWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-link-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this.state._variant as string]: this.state._variant !== 'custom',\n\t\t\t\t\t\t[this.state._customClass as string]:\n\t\t\t\t\t\t\tthis.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_href={this._href}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconOnly={this._iconOnly}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role=\"button\"\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_target={this._target}\n\t\t\t\t\t_targetDescription={this._targetDescription}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t>\n\t\t\t\t\t{/*\n\t\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t*/}\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-link-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Gibt an, welchen aktuellen Auswahlstatus der Link hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/**\n\t * Gibt an, ob durch den Link etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop({ reflect: true }) public _ariaExpanded?: boolean;\n\n\t/**\n\t * Gibt einen beschreibenden Text für den Screenreader an. Damit die\n\t * Sprachsteuerung von interaktiven Elementen funktioniert, muss der\n\t * Aria-Label-Text mit dem Label-Text des Buttons beginnen.\n\t *\n\t * - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop({ reflect: true }) public _ariaSelected?: boolean;\n\n\t/**\n\t * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t */\n\t@Prop() public _customClass?: string;\n\n\t/**\n\t * Gibt an, ob der Link deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Gibt die Ziel-Url des Links an.\n\t */\n\t@Prop() public _href!: string;\n\n\t/**\n\t * Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt einen beschreibenden Text für das Text-Element an.\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für den Link an.\n\t */\n\t@Prop() public _on?: LinkOnCallbacks;\n\n\t/**\n\t * Gibt an, welche Role der Schalter hat.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Definiert das Verhalten, bei dem der Link geöffnet werden soll.\n\t */\n\t@Prop() public _target?: LinkTarget;\n\n\t/**\n\t * Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.\n\t */\n\t@Prop() public _targetDescription?: string = translate('kol-open-link-in-tab');\n\n\t/**\n\t * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Alignment = 'right';\n\n\t/**\n\t * Gibt an, welche Ausprägung der Button hat.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: LinkButtonStates = {};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: string): void {\n\t\twatchString(this, '_customClass', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriButtonVariant): void {\n\t\twatchButtonVariant(this, '_variant', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":";;;mUAAA,MAAMA,EAAkB,65D,MCkCXC,EAAa,M,yBASRC,KAAAC,SAAYC,IAC5BF,KAAKE,IAAMA,EACXC,EAAgBH,KAAKI,KAAMJ,KAAKE,IAAI,E,wLA8EiB,M,yDAeA,M,sIA8BTG,EAAU,wB,mBAKZ,Q,cAKM,S,WAKP,E,CAvInCC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,eACCL,IAAKF,KAAKC,SACVQ,MAAO,CACNC,OAAQ,KACR,CAACV,KAAKW,MAAMC,UAAqBZ,KAAKW,MAAMC,WAAa,SACzD,CAACZ,KAAKW,MAAME,cACXb,KAAKW,MAAMC,WAAa,iBAAmBZ,KAAKW,MAAME,eAAiB,UAAYb,KAAKW,MAAME,aAAaC,OAAS,GAEtHC,cAAef,KAAKe,cACpBC,aAAchB,KAAKgB,aACnBC,cAAejB,KAAKiB,cACpBC,WAAYlB,KAAKkB,WACjBC,cAAenB,KAAKmB,cACpBC,UAAWpB,KAAKoB,UAChBC,MAAOrB,KAAKqB,MACZC,MAAOtB,KAAKsB,MACZC,UAAWvB,KAAKuB,UAChBC,OAAQxB,KAAKwB,OACbC,IAAKzB,KAAKyB,IACVC,MAAM,SACNC,UAAW3B,KAAK2B,UAChBC,QAAS5B,KAAK4B,QACdC,mBAAoB7B,KAAK6B,mBACzBC,cAAe9B,KAAK8B,eAMpBvB,EAAA,QAAMwB,KAAK,SAASC,KAAK,Y,CA6GtBC,oBAAoBC,GAC1BC,EAAYnC,KAAM,eAAgBkC,EAAO,CACxCE,aAAcC,W,CAQTC,gBAAgBJ,GACtBK,EAAmBvC,KAAM,WAAYkC,E,CAM/BM,oBACNxC,KAAKiC,oBAAoBjC,KAAKa,cAC9Bb,KAAKsC,gBAAgBtC,KAAKY,S"}
|
|
@@ -20,6 +20,7 @@ type OptionalStates = OptionalProps;
|
|
|
20
20
|
type States = Generic.Element.Members<RequiredStates, OptionalStates>;
|
|
21
21
|
export declare class KolAccordion implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {
|
|
22
22
|
private buttonRef?;
|
|
23
|
+
private readonly nonce;
|
|
23
24
|
private catchAriaExpanded;
|
|
24
25
|
private triggerAriaExpanded;
|
|
25
26
|
render(): JSX.Element;
|
|
@@ -5,7 +5,7 @@ import { Stringified } from './common';
|
|
|
5
5
|
import { KoliBriCustomIcon, KoliBriIconProp } from './icon';
|
|
6
6
|
import { Alignment } from './props/alignment';
|
|
7
7
|
export type AriaCurrent = boolean | 'page' | 'step' | 'location' | 'date' | 'time';
|
|
8
|
-
export type AlternativButtonLinkRole = 'tab';
|
|
8
|
+
export type AlternativButtonLinkRole = 'button' | 'link' | 'tab';
|
|
9
9
|
type RequiredButtonAndLinkProps = {
|
|
10
10
|
label: string;
|
|
11
11
|
};
|
package/doc/badge.md
CHANGED
|
@@ -103,7 +103,7 @@ Die zusätzliche Ausgabe eines **Icon** gewährleistet, dass der Nutzer auch hie
|
|
|
103
103
|
| `_icon` | `_icon` | Gibt einen Identifier eines Icons aus den Icofont's an. (https://icofont.com/) | `string \| undefined \| { top: string \| KoliBriCustomIcon; right?: string \| KoliBriCustomIcon \| undefined; bottom?: string \| KoliBriCustomIcon \| undefined; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right: string \| KoliBriCustomIcon; bottom?: string \| KoliBriCustomIcon \| undefined; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right?: string \| KoliBriCustomIcon \| undefined; bottom: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right?: string \| KoliBriCustomIcon \| undefined; bottom?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }` | `undefined` |
|
|
104
104
|
| `_iconOnly` | `_icon-only` | Gibt an, ob nur das Icon angezeigt wird. | `boolean \| undefined` | `false` |
|
|
105
105
|
| `_label` _(required)_ | `_label` | Gibt den Label-Text des Badges an. | `string` | `undefined` |
|
|
106
|
-
| `_smartButton` | `_smart-button` | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `string \| undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?:
|
|
106
|
+
| `_smartButton` | `_smart-button` | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `string \| undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: Alignment \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _customClass?: string \| undefined; _variant?: KoliBriButtonVariant \| undefined; }` | `undefined` |
|
|
107
107
|
|
|
108
108
|
|
|
109
109
|
## CSS Custom Properties
|
package/doc/button-link.md
CHANGED
|
@@ -43,7 +43,7 @@ Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `seconda
|
|
|
43
43
|
| `_id` | `_id` | Gibt die ID der Schaltfläche an. (Selection, Testing) | `string \| undefined` | `undefined` |
|
|
44
44
|
| `_label` _(required)_ | `_label` | Gibt einen beschreibenden Text für das Text-Element an. | `string` | `undefined` |
|
|
45
45
|
| `_on` | -- | Gibt die EventCallback-Funktionen für die Button-Events an. | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, unknown> \| undefined; onMouseDown?: EventCallback<MouseEvent> \| undefined; }` | `undefined` |
|
|
46
|
-
| `_role` | `_role` | Gibt an, welche Role der Schalter hat. | `"tab" \| undefined`
|
|
46
|
+
| `_role` | `_role` | Gibt an, welche Role der Schalter hat. | `"button" \| "link" \| "tab" \| undefined` | `undefined` |
|
|
47
47
|
| `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` |
|
|
48
48
|
| `_tooltipAlign` | `_tooltip-align` | Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` |
|
|
49
49
|
| `_type` | `_type` | Gibt an, welche Typ der Button hat. | `"button" \| "reset" \| "submit" \| undefined` | `'button'` |
|
package/doc/button.md
CHANGED
|
@@ -152,7 +152,7 @@ Probleme mit Disabled-Status
|
|
|
152
152
|
| `_id` | `_id` | Gibt die ID der Schaltfläche an. (Selection, Testing) | `string \| undefined` | `undefined` |
|
|
153
153
|
| `_label` _(required)_ | `_label` | Gibt den Label für die Beschriftung der Schaltfläche an. | `string` | `undefined` |
|
|
154
154
|
| `_on` | -- | Gibt die EventCallback-Funktionen für die Button-Events an. | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, unknown> \| undefined; onMouseDown?: EventCallback<MouseEvent> \| undefined; }` | `undefined` |
|
|
155
|
-
| `_role` | `_role` | Gibt an, welche Role der Schalter hat. | `"tab" \| undefined`
|
|
155
|
+
| `_role` | `_role` | Gibt an, welche Role der Schalter hat. | `"button" \| "link" \| "tab" \| undefined` | `undefined` |
|
|
156
156
|
| `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` |
|
|
157
157
|
| `_tooltipAlign` | `_tooltip-align` | Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` |
|
|
158
158
|
| `_type` | `_type` | Gibt an, welche Typ der Button hat. | `"button" \| "reset" \| "submit" \| undefined` | `'button'` |
|
package/doc/input-color.md
CHANGED
|
@@ -50,24 +50,24 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread
|
|
|
50
50
|
|
|
51
51
|
## Properties
|
|
52
52
|
|
|
53
|
-
| Property | Attribute | Description | Type
|
|
54
|
-
| ------------------ | ---------------- | -------------------------------------------------------------------------------------------------------- |
|
|
55
|
-
| `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined`
|
|
56
|
-
| `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined`
|
|
57
|
-
| `_autoComplete` | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann. | `"off" \| "on" \| undefined`
|
|
58
|
-
| `_disabled` | `_disabled` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined`
|
|
59
|
-
| `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined`
|
|
60
|
-
| `_hideLabel` | `_hide-label` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined`
|
|
61
|
-
| `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined`
|
|
62
|
-
| `_icon` | `_icon` | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | `string \| undefined \| { right: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { right?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }`
|
|
63
|
-
| `_id` _(required)_ | `_id` | Gibt die technische ID des Eingabefeldes an. | `string`
|
|
64
|
-
| `_list` | `_list` | Gibt die Liste der Vorschlagswörter an. | `string \| string[] \| undefined`
|
|
65
|
-
| `_name` | `_name` | Gibt den technischen Namen des Eingabefeldes an. | `string \| undefined`
|
|
66
|
-
| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined`
|
|
67
|
-
| `_smartButton` | -- | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?:
|
|
68
|
-
| `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined`
|
|
69
|
-
| `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined`
|
|
70
|
-
| `_value` | `_value` | Gibt den Wert des Eingabefeldes an. | `string \| undefined`
|
|
53
|
+
| Property | Attribute | Description | Type | Default |
|
|
54
|
+
| ------------------ | ---------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
|
|
55
|
+
| `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
|
|
56
|
+
| `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
|
|
57
|
+
| `_autoComplete` | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann. | `"off" \| "on" \| undefined` | `undefined` |
|
|
58
|
+
| `_disabled` | `_disabled` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined` | `undefined` |
|
|
59
|
+
| `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
|
|
60
|
+
| `_hideLabel` | `_hide-label` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined` | `undefined` |
|
|
61
|
+
| `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined` | `''` |
|
|
62
|
+
| `_icon` | `_icon` | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | `string \| undefined \| { right: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { right?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }` | `undefined` |
|
|
63
|
+
| `_id` _(required)_ | `_id` | Gibt die technische ID des Eingabefeldes an. | `string` | `undefined` |
|
|
64
|
+
| `_list` | `_list` | Gibt die Liste der Vorschlagswörter an. | `string \| string[] \| undefined` | `undefined` |
|
|
65
|
+
| `_name` | `_name` | Gibt den technischen Namen des Eingabefeldes an. | `string \| undefined` | `undefined` |
|
|
66
|
+
| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
|
|
67
|
+
| `_smartButton` | -- | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: Alignment \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _customClass?: string \| undefined; _variant?: KoliBriButtonVariant \| undefined; }` | `undefined` |
|
|
68
|
+
| `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined` | `undefined` |
|
|
69
|
+
| `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` |
|
|
70
|
+
| `_value` | `_value` | Gibt den Wert des Eingabefeldes an. | `string \| undefined` | `undefined` |
|
|
71
71
|
|
|
72
72
|
|
|
73
73
|
## CSS Custom Properties
|
package/doc/input-date.md
CHANGED
|
@@ -59,30 +59,30 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
|
|
|
59
59
|
|
|
60
60
|
## Properties
|
|
61
61
|
|
|
62
|
-
| Property | Attribute | Description | Type
|
|
63
|
-
| ------------------ | ---------------- | -------------------------------------------------------------------------------------------------------- |
|
|
64
|
-
| `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined`
|
|
65
|
-
| `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined`
|
|
66
|
-
| `_autoComplete` | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann. | `"off" \| "on" \| undefined`
|
|
67
|
-
| `_disabled` | `_disabled` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined`
|
|
68
|
-
| `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined`
|
|
69
|
-
| `_hideLabel` | `_hide-label` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined`
|
|
70
|
-
| `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined`
|
|
71
|
-
| `_icon` | `_icon` | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | `string \| undefined \| { right: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { right?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }`
|
|
72
|
-
| `_id` _(required)_ | `_id` | Gibt die technische ID des Eingabefeldes an. | `string`
|
|
73
|
-
| `_list` | `_list` | Gibt die Liste der Vorschlagszahlen an. | `string \| string[] \| undefined`
|
|
74
|
-
| `_max` | `_max` | Gibt den größtmöglichen Datumswert an. | `Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| undefined`
|
|
75
|
-
| `_min` | `_min` | Gibt den kleinstmöglichen Datumswert an. | `Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| undefined`
|
|
76
|
-
| `_name` | `_name` | Gibt den technischen Namen des Eingabefeldes an. | `string \| undefined`
|
|
77
|
-
| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined`
|
|
78
|
-
| `_readOnly` | `_read-only` | Gibt an, ob das Eingabefeld nur lesend ist. | `boolean \| undefined`
|
|
79
|
-
| `_required` | `_required` | Gibt an, ob das Eingabefeld ein Pflichtfeld ist. | `boolean \| undefined`
|
|
80
|
-
| `_smartButton` | -- | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?:
|
|
81
|
-
| `_step` | `_step` | Gibt die Schrittweite der Wertveränderung an | `number \| undefined`
|
|
82
|
-
| `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined`
|
|
83
|
-
| `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined`
|
|
84
|
-
| `_type` | `_type` | Gibt den Typ des Eingabefeldes an. | `"date" \| "datetime-local" \| "month" \| "time" \| "week"`
|
|
85
|
-
| `_value` | `_value` | Gibt den Wert des Eingabefeldes an. | `Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| null \| undefined`
|
|
62
|
+
| Property | Attribute | Description | Type | Default |
|
|
63
|
+
| ------------------ | ---------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
|
|
64
|
+
| `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
|
|
65
|
+
| `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
|
|
66
|
+
| `_autoComplete` | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann. | `"off" \| "on" \| undefined` | `undefined` |
|
|
67
|
+
| `_disabled` | `_disabled` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined` | `undefined` |
|
|
68
|
+
| `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
|
|
69
|
+
| `_hideLabel` | `_hide-label` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined` | `undefined` |
|
|
70
|
+
| `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined` | `''` |
|
|
71
|
+
| `_icon` | `_icon` | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | `string \| undefined \| { right: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { right?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }` | `undefined` |
|
|
72
|
+
| `_id` _(required)_ | `_id` | Gibt die technische ID des Eingabefeldes an. | `string` | `undefined` |
|
|
73
|
+
| `_list` | `_list` | Gibt die Liste der Vorschlagszahlen an. | `string \| string[] \| undefined` | `undefined` |
|
|
74
|
+
| `_max` | `_max` | Gibt den größtmöglichen Datumswert an. | `Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| undefined` | `undefined` |
|
|
75
|
+
| `_min` | `_min` | Gibt den kleinstmöglichen Datumswert an. | `Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| undefined` | `undefined` |
|
|
76
|
+
| `_name` | `_name` | Gibt den technischen Namen des Eingabefeldes an. | `string \| undefined` | `undefined` |
|
|
77
|
+
| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
|
|
78
|
+
| `_readOnly` | `_read-only` | Gibt an, ob das Eingabefeld nur lesend ist. | `boolean \| undefined` | `undefined` |
|
|
79
|
+
| `_required` | `_required` | Gibt an, ob das Eingabefeld ein Pflichtfeld ist. | `boolean \| undefined` | `undefined` |
|
|
80
|
+
| `_smartButton` | -- | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: Alignment \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _customClass?: string \| undefined; _variant?: KoliBriButtonVariant \| undefined; }` | `undefined` |
|
|
81
|
+
| `_step` | `_step` | Gibt die Schrittweite der Wertveränderung an | `number \| undefined` | `undefined` |
|
|
82
|
+
| `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined` | `undefined` |
|
|
83
|
+
| `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` |
|
|
84
|
+
| `_type` | `_type` | Gibt den Typ des Eingabefeldes an. | `"date" \| "datetime-local" \| "month" \| "time" \| "week"` | `'date'` |
|
|
85
|
+
| `_value` | `_value` | Gibt den Wert des Eingabefeldes an. | `Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| null \| undefined` | `undefined` |
|
|
86
86
|
|
|
87
87
|
|
|
88
88
|
## CSS Custom Properties
|