npm - @public-ui/components - Versions diffs - 1.6.0-rc.1 → 1.6.0-rc.3 - Mend

@public-ui/components 1.6.0-rc.1 → 1.6.0-rc.3

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.

Files changed (738) hide show

package/dist/cjs/kol-input-radio.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-input-radio.entry.cjs.js","mappings":"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","names":["getRenderStates","h","Host","index","propagateFocus","nonce","InputRadioController"],"sources":["./src/components/input-radio/style.css?tag=kol-input-radio&mode=default&encapsulation=shadow","./src/components/input-radio/component.tsx"],"sourcesContent":["@import url(../input.css);\n:host {\n\t--border-width: 2px;\n\t--input-size: 1.5em;\n}\nkol-input .icons {\n\tdisplay: none;\n}\nlabel {\n\tcursor: pointer;\n}\ninput {\n\tappearance: none;\n\tborder-width: var(--border-width);\n\tborder-style: solid;\n\tborder-radius: 100%;\n\tcursor: pointer;\n\tdisplay: flex;\n\theight: var(--input-size);\n\tmargin: 0;\n\tmin-height: var(--input-size);\n\tmin-width: var(--input-size);\n\tpadding: 0;\n\twidth: var(--input-size);\n}\ninput:before {\n\tborder-radius: 100%;\n\tcontent: '';\n\tmargin: auto;\n\theight: calc(var(--input-size) / 2);\n\twidth: calc(var(--input-size) / 2);\n}\ninput:checked:before {\n\tbackground-color: #000;\n}\nfieldset {\n\tdisplay: flex;\n}\nfieldset.vertical {\n\tflex-direction: column;\n}\nfieldset [slot='input'] {\n\talign-items: center;\n\tdisplay: flex;\n}\n/* required star is on fieldset legend /\n.required label > span::after {\n\tcontent: '';\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, Option } from '../../types/input/types';\nimport { Orientation } from '../../types/orientation';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputRadioController } from './controller';\nimport { ComponentApi, States } from './types';\n\n/\n @slot - Die Legende/Überschrift der Radiobuttons.\n /\n@Component({\n\ttag: 'kol-input-radio',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRadio implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputRadioElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy, hasError } = getRenderStates(this.state);\n\t\tconst showExpertSlot = this.state._label === ''; // _label=\"\" or _label\n\t\tconst showDefaultSlot = this.state._label === '…'; // deprecated: default slot will be removed in v2.0.0\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<fieldset\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t\trequired: this.state._required === true,\n\t\t\t\t\t\t[this.state._orientation]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<legend class=\"block w-full mb-1 leading-normal\">\n\t\t\t\t\t\t{/ INFO: span is needed for css styling :after content like a star () or optional text ! /}\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! /}\n\t\t\t\t\t\t\t{showExpertSlot ? <slot name=\"expert\"></slot> : showDefaultSlot ? <slot></slot> : this.state._label}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</legend>\n\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t/\n\t\t\t\t\t\t Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t /\n\t\t\t\t\t\tconst customId = `${this.state._id}-${index}`;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<kol-input\n\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\tradio: true,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tkey={customId}\n\t\t\t\t\t\t\t\t_disabled={this.state._disabled \|\| option.disabled}\n\t\t\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t\t\t_id={customId}\n\t\t\t\t\t\t\t\t_renderNoLabel={true}\n\t\t\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\tref={this.state._value === option.value ? this.catchRef : undefined}\n\t\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by radio?!\n\t\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\t\taria-labelledby={`${customId}-label`}\n\t\t\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\tid={customId}\n\t\t\t\t\t\t\t\t\t\tchecked={this.state._value === option.value}\n\t\t\t\t\t\t\t\t\t\tname={this.state._name \|\| this.state._id}\n\t\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled \|\| option.disabled}\n\t\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\t\t\t\tvalue={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\t\t\thtmlFor={`${customId}`}\n\t\t\t\t\t\t\t\t\t\tid={`${customId}-label`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\theight: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tmargin: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tpadding: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tvisibility: this.state._hideLabel && this.state._required !== true ? 'hidden' : undefined,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t<span>{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</kol-input>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\t{hasError && (\n\t\t\t\t\t\t<kol-alert id=\"error\" _alert={true} _type=\"error\" _variant=\"msg\">\n\t\t\t\t\t\t\t{this.state._error}\n\t\t\t\t\t\t</kol-alert>\n\t\t\t\t\t)}\n\t\t\t\t</fieldset>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/\n\t Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/\n\t Gibt den Text für eine Fehlermeldung an.\n\t /\n\t@Prop() public _error?: string;\n\n\t/\n\t Versteckt das sichtbare Label des Elements.\n\t /\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/\n\t Gibt den Hinweistext an.\n\t /\n\t@Prop() public _hint?: string = '';\n\n\t/\n\t Gibt die technische ID des Eingabefeldes an.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Das Label dient der Beschriftung unterschiedlicher Elemente.\n\t * - Button -> label text\n\t * - Heading -> headline text\n\t * - Input, Select und Textarea -> label text\n\t * - Summary -> summary text\n\t * - Table -> caption text\n\t * - etc.\n\t \n\t Das Label ist häufig ein Pflichtattribut und kann leer gesetzt werden,\n\t * wenn man das Label mittels dem Expert-Slot überschreiben will.\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Gibt die Liste der Optionen für das Eingabefeld an.\n\t /\n\t@Prop() public _list!: Stringified<Option<W3CInputValue>[]>;\n\n\t/\n\t Gibt den technischen Namen des Eingabefeldes an.\n\t /\n\t@Prop() public _name?: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für das Input-Event an.\n\t /\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/\n\t Gibt die Ausrichtung der LinkList an.\n\t /\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t/\n\t Macht das Eingabeelement zu einem Pflichtfeld.\n\t /\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/\n\t Gibt an, welchen Tab-Index dieses Input hat.\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/\n\t Gibt den Wert der Radio an. (Known Bug: https://github.com/ionic-team/stencil/issues/3902)\n\t */\n\t@Prop() public _value?: Stringified<W3CInputValue>;\n\n\t@State() public state: States = {\n\t\t_id: nonce(), // ⚠ required\n\t\t_label: '…', // ⚠ required\n\t\t_list: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'radio', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\tthis.controller.validateOrientation(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\tthis.controller.setValue(event, option.value as string); // TODO: fix type\n\t\t\t}\n\t\t}\n\t};\n}\n"],"version":3}
1	+ {"file":"kol-input-radio.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,orEAAorE;;MCsB/rE,aAAa;EASlB,MAAM;IACZ,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAGA,4BAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC;IAChD,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,GAAG,CAAC;IAClD,QACCC,QAACC,UAAI,QACJD,sBACC,KAAK,EAAE;QACN,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,IAAI;QACvC,KAAK,EAAE,QAAQ,KAAK,IAAI;QACxB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,IAAI;QACvC,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI;OAC/B,IAEDA,oBAAQ,KAAK,EAAC,kCAAkC,IAE/CA,sBAEE,cAAc,GAAGA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,GAAG,eAAe,GAAGA,qBAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAC7F,CACC,EACR,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,EAAEE,OAAK;MAMnC,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,IAAIA,OAAK,EAAE,CAAC;MAC9C,QACCF,uBACC,KAAK,EAAE;UACN,KAAK,EAAE,IAAI;SACX,EACD,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,MAAM,CAAC,QAAQ,EAClD,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,GAAG,EAAE,QAAQ,EACb,cAAc,EAAE,IAAI,EACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,IAE7BA,iBAAK,IAAI,EAAC,OAAO,IAChBA,iCACC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EACnE,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,sBACd,eAAe,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,SAAS,qBACnE,GAAG,QAAQ,QAAQ,EACpC,KAAK,EAAC,EAAE,EACR,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,QAAQ,EACZ,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,KAAK,EAC3C,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EACxC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,MAAM,CAAC,QAAQ,EACjD,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC9B,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC9B,KAAK,EAAE,IAAIE,OAAK,EAAE,IACd,IAAI,CAAC,UAAU,CAAC,QAAQ,IAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACtB,EACFF,mBACC,OAAO,EAAE,GAAG,QAAQ,EAAE,EACtB,EAAE,EAAE,GAAG,QAAQ,QAAQ,EACvB,KAAK,EAAE;UACN,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,IAAI,GAAG,GAAG,GAAG,SAAS;UAChF,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,IAAI,GAAG,GAAG,GAAG,SAAS;UAChF,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,IAAI,GAAG,GAAG,GAAG,SAAS;UACjF,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,IAAI,GAAG,QAAQ,GAAG,SAAS;SACzF,IAEDA,sBACCA,sBAAO,MAAM,CAAC,KAAK,CAAQ,CACrB,CACA,CACH,CACK,EACX;KACF,CAAC,EACD,QAAQ,KACRA,uBAAW,EAAE,EAAC,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,IAC9D,IAAI,CAAC,KAAK,CAAC,MAAM,CACP,CACZ,CACS,CACL,EACN;GACF;EA2FD;;IAtLiB,aAAQ,GAAG,CAAC,GAAsB;MAClD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACfG,oBAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;IA6QM,aAAQ,GAAG,CAAC,KAAY;MAC/B,IAAI,KAAK,CAAC,MAAM,YAAY,gBAAgB,EAAE;QAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAClE,IAAI,MAAM,KAAK,SAAS,EAAE;UACzB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,KAAe,CAAC,CAAC;SACxD;OACD;KACD,CAAC;;kBAhLgE,IAAI;;;;iBAoBtC,EAAE;;;;;;wBA8BU,UAAU;;;oBAec,KAAK;;iBAOzC;MAC/B,GAAG,EAAEC,eAAK,EAAE;MACZ,MAAM,EAAE,GAAG;MACX,KAAK,EAAE,EAAE;MACT,YAAY,EAAE,UAAU;KACxB;IAGA,IAAI,CAAC,UAAU,GAAG,IAAIC,+BAAoB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;GACrE;EAGM,iBAAiB,CAAC,KAAc;IACtC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;GACzC;EAGM,aAAa,CAAC,KAAe;IACnC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GACrC;EAGM,gBAAgB,CAAC,KAAe;IACtC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;GACxC;EAGM,aAAa,CAAC,KAAc;IAClC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GACrC;EAGM,iBAAiB,CAAC,KAAe;IACvC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;GACzC;EAGM,YAAY,CAAC,KAAc;IACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;GACpC;EAGM,UAAU,CAAC,KAAc;IAC/B,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;GAClC;EAGM,aAAa,CAAC,KAAc;IAClC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GACrC;EAGM,YAAY,CAAC,KAA4C;IAC/D,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;GACpC;EAGM,YAAY,CAAC,KAAc;IACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;GACpC;EAGM,UAAU,CAAC,KAA0B;IAC3C,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;GAClC;EAGM,mBAAmB,CAAC,KAAmB;IAC7C,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;GAC3C;EAGM,gBAAgB,CAAC,KAAe;IACtC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;GACxC;EAGM,gBAAgB,CAAC,KAAc;IACrC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;GACxC;EAGM,eAAe,CAAC,KAAe;IACrC,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;GACvC;EAGM,aAAa,CAAC,KAA4B;IAChD,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GACrC;EAEM,iBAAiB;IACvB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACjD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["getRenderStates","h","Host","index","propagateFocus","nonce","InputRadioController"],"sources":["./src/components/input-radio/style.css?tag=kol-input-radio&mode=default&encapsulation=shadow","./src/components/input-radio/component.tsx"],"sourcesContent":["@import url(../input.css);\n:host {\n\t--border-width: 2px;\n\t--input-size: 1.5em;\n}\nkol-input .icons {\n\tdisplay: none;\n}\nlabel {\n\tcursor: pointer;\n}\ninput {\n\tappearance: none;\n\tborder-width: var(--border-width);\n\tborder-style: solid;\n\tborder-radius: 100%;\n\tcursor: pointer;\n\tdisplay: flex;\n\theight: var(--input-size);\n\tmargin: 0;\n\tmin-height: var(--input-size);\n\tmin-width: var(--input-size);\n\tpadding: 0;\n\twidth: var(--input-size);\n}\ninput:before {\n\tborder-radius: 100%;\n\tcontent: '';\n\tmargin: auto;\n\theight: calc(var(--input-size) / 2);\n\twidth: calc(var(--input-size) / 2);\n}\ninput:checked:before {\n\tbackground-color: #000;\n}\nfieldset {\n\tdisplay: flex;\n}\nfieldset.vertical {\n\tflex-direction: column;\n}\nfieldset [slot='input'] {\n\talign-items: center;\n\tdisplay: flex;\n}\n/* required star is on fieldset legend /\n.required label > span::after {\n\tcontent: '';\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, Option } from '../../types/input/types';\nimport { Orientation } from '../../types/orientation';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputRadioController } from './controller';\nimport { ComponentApi, States } from './types';\n\n/\n @slot - Die Legende/Überschrift der Radiobuttons.\n /\n@Component({\n\ttag: 'kol-input-radio',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRadio implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputRadioElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy, hasError } = getRenderStates(this.state);\n\t\tconst showExpertSlot = this.state._label === ''; // _label=\"\" or _label\n\t\tconst showDefaultSlot = this.state._label === '…'; // deprecated: default slot will be removed in v2.0.0\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<fieldset\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t\trequired: this.state._required === true,\n\t\t\t\t\t\t[this.state._orientation]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<legend class=\"block w-full mb-1 leading-normal\">\n\t\t\t\t\t\t{/ INFO: span is needed for css styling :after content like a star () or optional text ! /}\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! /}\n\t\t\t\t\t\t\t{showExpertSlot ? <slot name=\"expert\"></slot> : showDefaultSlot ? <slot></slot> : this.state._label}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</legend>\n\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t/\n\t\t\t\t\t\t Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t /\n\t\t\t\t\t\tconst customId = `${this.state._id}-${index}`;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<kol-input\n\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\tradio: true,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tkey={customId}\n\t\t\t\t\t\t\t\t_disabled={this.state._disabled \|\| option.disabled}\n\t\t\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t\t\t_id={customId}\n\t\t\t\t\t\t\t\t_renderNoLabel={true}\n\t\t\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\tref={this.state._value === option.value ? this.catchRef : undefined}\n\t\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by radio?!\n\t\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\t\taria-labelledby={`${customId}-label`}\n\t\t\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\tid={customId}\n\t\t\t\t\t\t\t\t\t\tchecked={this.state._value === option.value}\n\t\t\t\t\t\t\t\t\t\tname={this.state._name \|\| this.state._id}\n\t\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled \|\| option.disabled}\n\t\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\t\t\t\tvalue={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\t\t\thtmlFor={`${customId}`}\n\t\t\t\t\t\t\t\t\t\tid={`${customId}-label`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\theight: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tmargin: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tpadding: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tvisibility: this.state._hideLabel && this.state._required !== true ? 'hidden' : undefined,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t<span>{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</kol-input>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\t{hasError && (\n\t\t\t\t\t\t<kol-alert id=\"error\" _alert={true} _type=\"error\" _variant=\"msg\">\n\t\t\t\t\t\t\t{this.state._error}\n\t\t\t\t\t\t</kol-alert>\n\t\t\t\t\t)}\n\t\t\t\t</fieldset>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/\n\t Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/\n\t Gibt den Text für eine Fehlermeldung an.\n\t /\n\t@Prop() public _error?: string;\n\n\t/\n\t Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t /\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/\n\t Gibt den Hinweistext an.\n\t /\n\t@Prop() public _hint?: string = '';\n\n\t/\n\t Gibt die interne ID des primären Elements in der Komponente an.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Gibt die Liste der Optionen für das Eingabefeld an.\n\t /\n\t@Prop() public _list!: Stringified<Option<W3CInputValue>[]>;\n\n\t/\n\t Gibt den technischen Namen des Eingabefeldes an.\n\t /\n\t@Prop() public _name?: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für das Input-Event an.\n\t /\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/\n\t Gibt die horizontale oder vertikale Ausrichtung der Komponente an.\n\t /\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t/\n\t Macht das Eingabeelement zu einem Pflichtfeld.\n\t /\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/\n\t Gibt an, welchen Tab-Index das primäre Element in der Komponente 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 Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/\n\t Gibt den Wert der Radio an. (Known Bug: https://github.com/ionic-team/stencil/issues/3902)\n\t */\n\t@Prop() public _value?: Stringified<W3CInputValue>;\n\n\t@State() public state: States = {\n\t\t_id: nonce(), // ⚠ required\n\t\t_label: '…', // ⚠ required\n\t\t_list: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'radio', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\tthis.controller.validateOrientation(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\tthis.controller.setValue(event, option.value as string); // TODO: fix type\n\t\t\t}\n\t\t}\n\t};\n}\n"],"version":3}

package/dist/cjs/kol-input-range.cjs.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-94bf4fa8.js"),dev_utils=require("./dev.utils-d69c0a9f.js"),reuse=require("./reuse-0fe7470f.js"),controller=require("./controller-a4d41073.js"),prop_validators=require("./prop.validators-0e600d26.js"),controllerIcon=require("./controller-icon-84ab02f7.js");require("./a11y.tipps-251f022e.js"),require("./tab-index-d4f662c6.js"),require("./label-f7bafefb.js"),require("./index-7159f3d9.js"),require("./icon-c6dc105e.js");class InputRangeController extends controllerIcon.InputIconController{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){prop_validators.watchValidator(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){prop_validators.watchJsonArrayString(this.component,"_list",(t=>"object"==typeof t&&"string"==typeof t.label&&t.label.length>0),t)}validateMax(t){prop_validators.watchNumber(this.component,"_max",t)}validateMin(t){prop_validators.watchNumber(this.component,"_min",t)}validateStep(t){prop_validators.watchNumber(this.component,"_step",t)}validateValue(t){prop_validators.watchNumber(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateList(this.component._list),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}input[type='range']{appearance:none;background-color:#d3d3d3;border:0;display:inline-block;height:0.5rem;line-height:1.5em;padding:0;margin:0}input[type='range']::-webkit-slider-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-webkit-appearance:none}input[type='range']::-moz-range-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-moz-appearance:none}",KolInputRange=class{render(){const{ariaDescribedBy:t}=controller.getRenderStates(this.state),e=Array.isArray(this.state._list)&&this.state._list.length>0,i=""===this.state._label,a="…"===this.state._label;return index.h(index.Host,null,index.h("kol-input",{class:{range:!0},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},index.h("span",{slot:"label"},i?index.h("slot",{name:"expert"}):a?index.h("slot",null):this.state._label),index.h("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name,slot:"input",spellcheck:"false",step:this.state._step,type:"range",value:this.state._value},this.controller.onFacade)),e&&[index.h("datalist",{id:`${this.state._id}-list`},this.state._list.map((t=>index.h("option",{value:t.value}))))]))}constructor(t){index.registerInstance(this,t),this.catchRef=t=>{this.ref=t,reuse.propagateFocus(this.host,this.ref)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._max=void 0,this._min=void 0,this._name=void 0,this._on=void 0,this._step=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:dev_utils.nonce(),_label:"…",_list:[]},this.controller=new InputRangeController(this,"range",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.controller.validateList(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateStep(t){this.controller.validateStep(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_step:["validateStep"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputRange.style={default:defaultStyleCss},exports.kol_input_range=KolInputRange;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-44abe473.js"),dev_utils=require("./dev.utils-d69c0a9f.js"),reuse=require("./reuse-0fe7470f.js"),controller=require("./controller-31f22d30.js"),prop_validators=require("./prop.validators-5e04ba38.js"),controllerIcon=require("./controller-icon-d3ae7955.js");require("./a11y.tipps-251f022e.js"),require("./tab-index-48c54f71.js"),require("./label-e8736aba.js"),require("./index-36fd94bb.js"),require("./icon-ac20975f.js");class InputRangeController extends controllerIcon.InputIconController{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){prop_validators.watchValidator(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){prop_validators.watchJsonArrayString(this.component,"_list",(t=>"object"==typeof t&&"string"==typeof t.label&&t.label.length>0),t)}validateMax(t){prop_validators.watchNumber(this.component,"_max",t)}validateMin(t){prop_validators.watchNumber(this.component,"_min",t)}validateStep(t){prop_validators.watchNumber(this.component,"_step",t)}validateValue(t){prop_validators.watchNumber(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateList(this.component._list),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}input[type='range']{appearance:none;background-color:#d3d3d3;border:1px solid #000;display:inline-block;height:0.5rem;line-height:1.5em;padding:0;margin:0}input[type='range']::-webkit-slider-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-webkit-appearance:none}input[type='range']::-moz-range-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-moz-appearance:none}",KolInputRange=class{render(){const{ariaDescribedBy:t}=controller.getRenderStates(this.state),e=Array.isArray(this.state._list)&&this.state._list.length>0,i=""===this.state._label,a="…"===this.state._label;return index.h(index.Host,null,index.h("kol-input",{class:{range:!0},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},index.h("span",{slot:"label"},i?index.h("slot",{name:"expert"}):a?index.h("slot",null):this.state._label),index.h("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name,slot:"input",spellcheck:"false",step:this.state._step,type:"range",value:this.state._value},this.controller.onFacade)),e&&[index.h("datalist",{id:`${this.state._id}-list`},this.state._list.map((t=>index.h("option",{value:t.value}))))]))}constructor(t){index.registerInstance(this,t),this.catchRef=t=>{this.ref=t,reuse.propagateFocus(this.host,this.ref)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._max=void 0,this._min=void 0,this._name=void 0,this._on=void 0,this._step=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:dev_utils.nonce(),_label:"…",_list:[]},this.controller=new InputRangeController(this,"range",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.controller.validateList(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateStep(t){this.controller.validateStep(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_step:["validateStep"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputRange.style={default:defaultStyleCss},exports.kol_input_range=KolInputRange;

package/dist/cjs/kol-input-range.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-input-range.entry.cjs.js","mappings":"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","names":["InputIconController","watchValidator","watchJsonArrayString","watchNumber","getRenderStates","h","Host","propagateFocus","nonce"],"sources":["./src/components/input-range/controller.ts","./src/components/input-range/style.css?tag=kol-input-range&mode=default&encapsulation=shadow","./src/components/input-range/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnOff, Option } from '../../types/input/types';\nimport { watchJsonArrayString, watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputRangeController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' \|\| value === 'off'),\n\t\t\tnew Set(['on \| off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateList(value?: Stringified<Option<number>[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis.component,\n\t\t\t'_list',\n\t\t\t(item: Option<number>) => typeof item === 'object' && typeof item.label === 'string' && item.label.length > 0,\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n/\n For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n /\ninput[type='range'] {\n\tappearance: none;\n\tbackground-color: #d3d3d3;\n\tborder: 0;\n\tdisplay: inline-block;\n\theight: 0.5rem;\n\tline-height: 1.5em;\n\tpadding: 0;\n\tmargin: 0;\n}\ninput[type='range']::-webkit-slider-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-webkit-appearance: none;\n}\ninput[type='range']::-moz-range-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-moz-appearance: none;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTypeOnDefault, InputTypeOnOff, Option } from '../../types/input/types';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputRangeController } from './controller';\nimport { ComponentApi, States } from './types';\n\n/\n @slot - Die Beschriftung des Eingabeelements.\n /\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasList = Array.isArray(this.state._list) && this.state._list.length > 0;\n\t\tconst showExpertSlot = this.state._label === ''; // _label=\"\" or _label\n\t\tconst showDefaultSlot = this.state._label === '…'; // deprecated: default slot will be removed in v2.0.0\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\trange: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">{showExpertSlot ? <slot name=\"expert\"></slot> : showDefaultSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\tvalue={this.state._value as number}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t/>\n\t\t\t\t\t{hasList && [\n\t\t\t\t\t\t<datalist id={`${this.state._id}-list`}>\n\t\t\t\t\t\t\t{this.state._list.map((option: Option<number>) => (\n\t\t\t\t\t\t\t\t<option value={option.value}></option>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</datalist>,\n\t\t\t\t\t\t// <ul class=\"grid gap-1 text-sm grid-flow-col\">\n\t\t\t\t\t\t// {this.state._list.map((option: InputOption<number>) => (\n\t\t\t\t\t\t// <li class=\"border-1\">{option.label}</li>\n\t\t\t\t\t\t// ))}\n\t\t\t\t\t\t// </ul>,\n\t\t\t\t\t]}\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRangeController;\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/\n\t Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t /\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/\n\t Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/\n\t Gibt den Text für eine Fehlermeldung an.\n\t /\n\t@Prop() public _error?: string;\n\n\t/\n\t Versteckt das sichtbare Label des Elements.\n\t /\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/\n\t Gibt den Hinweistext an.\n\t /\n\t@Prop() public _hint?: string = '';\n\n\t/\n\t Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/\n\t Gibt die technische ID des Eingabefeldes an.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Das Label dient der Beschriftung unterschiedlicher Elemente.\n\t * - Button -> label text\n\t * - Heading -> headline text\n\t * - Input, Select und Textarea -> label text\n\t * - Summary -> summary text\n\t * - Table -> caption text\n\t * - etc.\n\t \n\t Das Label ist häufig ein Pflichtattribut und kann leer gesetzt werden,\n\t * wenn man das Label mittels dem Expert-Slot überschreiben will.\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Gibt die Liste der Vorschlagswörter an.\n\t /\n\t@Prop() public _list?: Stringified<Option<number>[]>;\n\n\t/\n\t Gibt den Maximalwert des Eingabefeldes an.\n\t /\n\t@Prop() public _max?: number;\n\n\t/\n\t Gibt den Minimalwert des Eingabefeldes an.\n\t /\n\t@Prop() public _min?: number;\n\n\t/\n\t Gibt den technischen Namen des Eingabefeldes an.\n\t /\n\t@Prop() public _name?: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für das Input-Event an.\n\t /\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/\n\t Gibt die Schrittweite der Wertveränderung an.\n\t /\n\t@Prop() public _step?: number;\n\n\t/\n\t Gibt an, welchen Tab-Index dieses Input hat.\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/\n\t Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: number;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: nonce(), // ⚠ required\n\t\t_label: '…', // ⚠ required\n\t\t_list: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'range', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<number>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-input-range.entry.cjs.js","mappings":"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","names":["InputIconController","watchValidator","watchJsonArrayString","watchNumber","getRenderStates","h","Host","propagateFocus","nonce"],"sources":["./src/components/input-range/controller.ts","./src/components/input-range/style.css?tag=kol-input-range&mode=default&encapsulation=shadow","./src/components/input-range/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnOff, Option } from '../../types/input/types';\nimport { watchJsonArrayString, watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputRangeController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' \|\| value === 'off'),\n\t\t\tnew Set(['on \| off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateList(value?: Stringified<Option<number>[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis.component,\n\t\t\t'_list',\n\t\t\t(item: Option<number>) => typeof item === 'object' && typeof item.label === 'string' && item.label.length > 0,\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n/\n For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n /\ninput[type='range'] {\n\tappearance: none;\n\tbackground-color: #d3d3d3;\n\tborder: 1px solid #000;\n\tdisplay: inline-block;\n\theight: 0.5rem;\n\tline-height: 1.5em;\n\tpadding: 0;\n\tmargin: 0;\n}\ninput[type='range']::-webkit-slider-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-webkit-appearance: none;\n}\ninput[type='range']::-moz-range-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-moz-appearance: none;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTypeOnDefault, InputTypeOnOff, Option } from '../../types/input/types';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputRangeController } from './controller';\nimport { ComponentApi, States } from './types';\n\n/\n @slot - Die Beschriftung des Eingabeelements.\n /\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasList = Array.isArray(this.state._list) && this.state._list.length > 0;\n\t\tconst showExpertSlot = this.state._label === ''; // _label=\"\" or _label\n\t\tconst showDefaultSlot = this.state._label === '…'; // deprecated: default slot will be removed in v2.0.0\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\trange: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">{showExpertSlot ? <slot name=\"expert\"></slot> : showDefaultSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\tvalue={this.state._value as number}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t/>\n\t\t\t\t\t{hasList && [\n\t\t\t\t\t\t<datalist id={`${this.state._id}-list`}>\n\t\t\t\t\t\t\t{this.state._list.map((option: Option<number>) => (\n\t\t\t\t\t\t\t\t<option value={option.value}></option>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</datalist>,\n\t\t\t\t\t\t// <ul class=\"grid gap-1 text-sm grid-flow-col\">\n\t\t\t\t\t\t// {this.state._list.map((option: InputOption<number>) => (\n\t\t\t\t\t\t// <li class=\"border-1\">{option.label}</li>\n\t\t\t\t\t\t// ))}\n\t\t\t\t\t\t// </ul>,\n\t\t\t\t\t]}\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRangeController;\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/\n\t Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t /\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/\n\t Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/\n\t Gibt den Text für eine Fehlermeldung an.\n\t /\n\t@Prop() public _error?: string;\n\n\t/\n\t Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t /\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/\n\t Gibt den Hinweistext an.\n\t /\n\t@Prop() public _hint?: string = '';\n\n\t/\n\t Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/\n\t Gibt die interne ID des primären Elements in der Komponente an.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Gibt die Liste der Vorschlagswörter an.\n\t /\n\t@Prop() public _list?: Stringified<Option<number>[]>;\n\n\t/\n\t Gibt den größtmöglichen Eingabewert an.\n\t /\n\t@Prop() public _max?: number;\n\n\t/\n\t Gibt den kleinstmöglichen Eingabewert an.\n\t /\n\t@Prop() public _min?: number;\n\n\t/\n\t Gibt den technischen Namen des Eingabefeldes an.\n\t /\n\t@Prop() public _name?: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für das Input-Event an.\n\t /\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/\n\t Gibt die Schrittweite der Wertveränderung an.\n\t /\n\t@Prop() public _step?: number;\n\n\t/\n\t Gibt an, welchen Tab-Index das primäre Element in der Komponente 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 Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/\n\t Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: number;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: nonce(), // ⚠ required\n\t\t_label: '…', // ⚠ required\n\t\t_list: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'range', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<number>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"version":3}

package/dist/cjs/kol-input-text.cjs.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-94bf4fa8.js"),a11y_tipps=require("./a11y.tipps-251f022e.js"),reuse=require("./reuse-0fe7470f.js"),controller=require("./controller-9e5e2756.js"),controller$2=require("./controller-a4d41073.js"),controller$1=require("./controller-efc49b38.js"),prop_validators=require("./prop.validators-0e600d26.js"),hideLabel=require("./hide-label-3c04c118.js");require("./dev.utils-d69c0a9f.js"),require("./tab-index-d4f662c6.js"),require("./label-f7bafefb.js"),require("./controller-42d1f729.js"),require("./controller-icon-84ab02f7.js"),require("./icon-c6dc105e.js"),require("./index-7159f3d9.js");const validateAlert=(t,e)=>{prop_validators.watchBoolean(t,"_alert",e)},validateReadOnly=(t,e)=>{prop_validators.watchBoolean(t,"_readOnly",e)},validateRequired=(t,e)=>{prop_validators.watchBoolean(t,"_required",e)},validateTouched=(t,e)=>{prop_validators.watchBoolean(t,"_touched",e)},defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}";a11y_tipps.featureHint("[KolInputText] Pre- und post-Label für Währung usw.");const KolInputText=class{render(){const{ariaDescribedBy:t}=controller$2.getRenderStates(this.state),e=Array.isArray(this.state._list)&&this.state._list.length>0,i=""===this.state._label,a="…"===this.state._label;return index.h(index.Host,{class:{"has-value":this.state._hasValue}},index.h("kol-input",{class:{[this.state._type]:!0},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},index.h("span",{slot:"label"},i?index.h("slot",{name:"expert"}):a?index.h("slot",null):this.state._label),index.h("input",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",title:"",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(t){index.registerInstance(this,t),this.catchRef=t=>{var e;this.ref=t,reuse.propagateFocus(this.host,this.ref),this.disconnectedCallback(),null===(e=this.ref)||void 0===e||e.addEventListener("search",this.onChange)},this.onKeyUp=t=>{"Enter"===t.code||"NumpadEnter"===t.code?controller.propagateSubmitEventToForm({form:this.host,ref:this.ref}):this.onChange(t)},this.onChange=t=>{var e,i;this.oldValue!==(null===(e=this.ref)||void 0===e?void 0:e.value)&&(this.oldValue=null===(i=this.ref)||void 0===i?void 0:i.value,this.controller.onFacade.onChange(t))},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=void 0,this._required=void 0,this._size=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_id:"id",_hasValue:!1,_label:"…",_list:[],_type:"text"},this.controller=new controller$1.InputTextController(this,"text",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){validateAlert(this,t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){hideLabel.validateHideLabel(this,t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.controller.validateList(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){validateReadOnly(this,t)}validateRequired(t){validateRequired(this,t)}validateSize(t){this.controller.validateSize(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){validateTouched(this,t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}disconnectedCallback(){var t;null===(t=this.ref)||void 0===t||t.removeEventListener("search",this.onChange)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};KolInputText.style={default:defaultStyleCss},exports.kol_input_text=KolInputText;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-44abe473.js"),a11y_tipps=require("./a11y.tipps-251f022e.js"),reuse=require("./reuse-0fe7470f.js"),controller=require("./controller-77a2ce9f.js"),controller$2=require("./controller-31f22d30.js"),controller$1=require("./controller-1b763c05.js"),prop_validators=require("./prop.validators-5e04ba38.js"),hideLabel=require("./hide-label-cb7ae994.js");require("./dev.utils-d69c0a9f.js"),require("./tab-index-48c54f71.js"),require("./label-e8736aba.js"),require("./controller-abf026e3.js"),require("./controller-icon-d3ae7955.js"),require("./icon-ac20975f.js"),require("./index-36fd94bb.js");const validateAlert=(t,e)=>{prop_validators.watchBoolean(t,"_alert",e)},validateReadOnly=(t,e)=>{prop_validators.watchBoolean(t,"_readOnly",e)},validateRequired=(t,e)=>{prop_validators.watchBoolean(t,"_required",e)},validateTouched=(t,e)=>{prop_validators.watchBoolean(t,"_touched",e)},defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}";a11y_tipps.featureHint("[KolInputText] Pre- und post-Label für Währung usw.");const KolInputText=class{render(){const{ariaDescribedBy:t}=controller$2.getRenderStates(this.state),e=Array.isArray(this.state._list)&&this.state._list.length>0,i=""===this.state._label,a="…"===this.state._label;return index.h(index.Host,{class:{"has-value":this.state._hasValue}},index.h("kol-input",{class:{[this.state._type]:!0},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},index.h("span",{slot:"label"},i?index.h("slot",{name:"expert"}):a?index.h("slot",null):this.state._label),index.h("input",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",title:"",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(t){index.registerInstance(this,t),this.catchRef=t=>{var e;this.ref=t,reuse.propagateFocus(this.host,this.ref),this.disconnectedCallback(),null===(e=this.ref)||void 0===e||e.addEventListener("search",this.onChange)},this.onKeyUp=t=>{"Enter"===t.code||"NumpadEnter"===t.code?controller.propagateSubmitEventToForm({form:this.host,ref:this.ref}):this.onChange(t)},this.onChange=t=>{var e,i;this.oldValue!==(null===(e=this.ref)||void 0===e?void 0:e.value)&&(this.oldValue=null===(i=this.ref)||void 0===i?void 0:i.value,this.controller.onFacade.onChange(t))},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=void 0,this._required=void 0,this._size=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_id:"id",_hasValue:!1,_label:"…",_list:[],_type:"text"},this.controller=new controller$1.InputTextController(this,"text",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){validateAlert(this,t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){hideLabel.validateHideLabel(this,t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.controller.validateList(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){validateReadOnly(this,t)}validateRequired(t){validateRequired(this,t)}validateSize(t){this.controller.validateSize(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){validateTouched(this,t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}disconnectedCallback(){var t;null===(t=this.ref)||void 0===t||t.removeEventListener("search",this.onChange)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};KolInputText.style={default:defaultStyleCss},exports.kol_input_text=KolInputText;

package/dist/cjs/kol-input-text.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-input-text.entry.cjs.js","mappings":"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","names":["watchBoolean","featureHint","getRenderStates","h","Host","propagateFocus","propagateSubmitEventToForm","InputTextController","validateHideLabel"],"sources":["./src/types/props/alert.ts","./src/types/props/read-only.ts","./src/types/props/required.ts","./src/types/props/touched.ts","./src/components/input-text/style.css?tag=kol-input-text&mode=default&encapsulation=shadow","./src/components/input-text/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types /\n/* de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n /\n/* en\n * Makes hints readable for screenreaders.\n /\nexport type PropAlert = {\n\talert: boolean;\n};\n\n/ validator /\nexport const validateAlert = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_alert', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/ types /\n/* de\n * Setzt den Zugriff auf dieses Eingabeelement auf nur lesen.\n /\n/* en\n * Makes the input element read only.\n /\nexport type PropReadOnly = {\n\treadOnly: boolean;\n};\n\n/ validator /\nexport const validateReadOnly = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_readOnly', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/ types /\n/* de\n * Macht das Eingabeelement zu einem Pflichtfeld.\n /\n/* en\n * Makes the input element required.\n /\nexport type PropRequired = {\n\trequired: boolean;\n};\n\n/ validator /\nexport const validateRequired = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_required', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/ types /\n/* de\n * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n /\n/* en\n * Shows if the input was touched by a user.\n /\nexport type PropTouched = {\n\ttouched: boolean;\n};\n\n/ validator /\nexport const validateTouched = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_touched', value);\n};\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTextType } from '../../types/input/control/text';\n\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { validateAlert, validateHideLabel, validateReadOnly, validateRequired, validateTouched } from '../../types/props';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputTextController } from './controller';\nimport { ComponentApi, States } from './types';\n\nfeatureHint(`[KolInputText] Pre- und post-Label für Währung usw.`);\n\n/\n @slot - Die Beschriftung des Eingabefeldes.\n /\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputText implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate ref?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t\tthis.disconnectedCallback();\n\t\tthis.ref?.addEventListener('search', this.onChange);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter' \|\| event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.oldValue !== this.ref?.value) {\n\t\t\tthis.oldValue = this.ref?.value;\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasList = Array.isArray(this.state._list) && this.state._list.length > 0;\n\t\tconst showExpertSlot = this.state._label === ''; // _label=\"\" or _label\n\t\tconst showDefaultSlot = this.state._label === '…'; // deprecated: default slot will be removed in v2.0.0\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._type]: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_list={this.state._list}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">{showExpertSlot ? <slot name=\"expert\"></slot> : showDefaultSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\tpattern={this.state._pattern}\n\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t// title={this.state._title}\n\t\t\t\t\t\ttype={this.state._type}\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t// onInput={this.controller.onFacade.onChange}\n\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t/>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputTextController;\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/\n\t Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t /\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/\n\t Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/\n\t Gibt den Text für eine Fehlermeldung an.\n\t /\n\t@Prop() public _error?: string;\n\n\t/\n\t Versteckt das sichtbare Label des Elements.\n\t /\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/\n\t Gibt den Hinweistext an.\n\t /\n\t@Prop() public _hint?: string = '';\n\n\t/\n\t Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/\n\t Gibt die technische ID des Eingabefeldes an.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Das Label dient der Beschriftung unterschiedlicher Elemente.\n\t * - Button -> label text\n\t * - Heading -> headline text\n\t * - Input, Select und Textarea -> label text\n\t * - Summary -> summary text\n\t * - Table -> caption text\n\t * - etc.\n\t \n\t Das Label ist häufig ein Pflichtattribut und kann leer gesetzt werden,\n\t * wenn man das Label mittels dem Expert-Slot überschreiben will.\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Gibt die Liste der Vorschlagswörter an.\n\t /\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/\n\t Gibt an, wie viele Zeichen man maximal eingeben kann.\n\t /\n\t@Prop() public _maxLength?: number;\n\n\t/\n\t Gibt den technischen Namen des Eingabefeldes an.\n\t /\n\t@Prop() public _name?: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für das Input-Event an.\n\t /\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/\n\t Gibt ein Prüfmuster für das Eingabefeld an.\n\t /\n\t@Prop() public _pattern?: string;\n\n\t/\n\t Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t /\n\t@Prop() public _placeholder?: string;\n\n\t/\n\t Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t /\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/\n\t Macht das Eingabeelement zu einem Pflichtfeld.\n\t /\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/\n\t Setzt die Breite des Eingabefeldes in Buchstabenbreiten.\n\t /\n\t@Prop() public _size?: number;\n\n\t/\n\t Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\n\t /\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/\n\t Gibt an, welchen Tab-Index dieses Input hat.\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/\n\t Gibt an, ob es ein Text-, Suche-, URL- oder Telefon-Eingabefeld ist.\n\t /\n\t@Prop() public _type?: InputTextType = 'text';\n\n\t/\n\t Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: 'id',\n\t\t_hasValue: false,\n\t\t_label: '…', // ⚠ required\n\t\t_list: [],\n\t\t_type: 'text',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'text', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tvalidateAlert(this, value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<string[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tvalidateReadOnly(this, value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tvalidateRequired(this, value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps \| string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tvalidateTouched(this, value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: InputTextType): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.oldValue = this._value;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ref?.removeEventListener('search', this.onChange);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-input-text.entry.cjs.js","mappings":"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","names":["watchBoolean","featureHint","getRenderStates","h","Host","propagateFocus","propagateSubmitEventToForm","InputTextController","validateHideLabel"],"sources":["./src/types/props/alert.ts","./src/types/props/read-only.ts","./src/types/props/required.ts","./src/types/props/touched.ts","./src/components/input-text/style.css?tag=kol-input-text&mode=default&encapsulation=shadow","./src/components/input-text/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types /\n/* de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n /\n/* en\n * Makes hints readable for screenreaders.\n /\nexport type PropAlert = {\n\talert: boolean;\n};\n\n/ validator /\nexport const validateAlert = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_alert', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/ types /\n/* de\n * Setzt den Zugriff auf dieses Eingabeelement auf nur lesen.\n /\n/* en\n * Makes the input element read only.\n /\nexport type PropReadOnly = {\n\treadOnly: boolean;\n};\n\n/ validator /\nexport const validateReadOnly = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_readOnly', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/ types /\n/* de\n * Macht das Eingabeelement zu einem Pflichtfeld.\n /\n/* en\n * Makes the input element required.\n /\nexport type PropRequired = {\n\trequired: boolean;\n};\n\n/ validator /\nexport const validateRequired = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_required', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/ types /\n/* de\n * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n /\n/* en\n * Shows if the input was touched by a user.\n /\nexport type PropTouched = {\n\ttouched: boolean;\n};\n\n/ validator /\nexport const validateTouched = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_touched', value);\n};\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTextType } from '../../types/input/control/text';\n\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { validateAlert, validateHideLabel, validateReadOnly, validateRequired, validateTouched } from '../../types/props';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputTextController } from './controller';\nimport { ComponentApi, States } from './types';\n\nfeatureHint(`[KolInputText] Pre- und post-Label für Währung usw.`);\n\n/\n @slot - Die Beschriftung des Eingabefeldes.\n /\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputText implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate ref?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t\tthis.disconnectedCallback();\n\t\tthis.ref?.addEventListener('search', this.onChange);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter' \|\| event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.oldValue !== this.ref?.value) {\n\t\t\tthis.oldValue = this.ref?.value;\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasList = Array.isArray(this.state._list) && this.state._list.length > 0;\n\t\tconst showExpertSlot = this.state._label === ''; // _label=\"\" or _label\n\t\tconst showDefaultSlot = this.state._label === '…'; // deprecated: default slot will be removed in v2.0.0\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._type]: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_list={this.state._list}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">{showExpertSlot ? <slot name=\"expert\"></slot> : showDefaultSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\tpattern={this.state._pattern}\n\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t// title={this.state._title}\n\t\t\t\t\t\ttype={this.state._type}\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t// onInput={this.controller.onFacade.onChange}\n\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t/>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputTextController;\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/\n\t Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t /\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/\n\t Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/\n\t Gibt den Text für eine Fehlermeldung an.\n\t /\n\t@Prop() public _error?: string;\n\n\t/\n\t Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t /\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/\n\t Gibt den Hinweistext an.\n\t /\n\t@Prop() public _hint?: string = '';\n\n\t/\n\t Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/\n\t Gibt die interne ID des primären Elements in der Komponente an.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Gibt die Liste der Vorschlagswörter an.\n\t /\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/\n\t Gibt an, wie viele Zeichen maximal eingegeben werden können.\n\t /\n\t@Prop() public _maxLength?: number;\n\n\t/\n\t Gibt den technischen Namen des Eingabefeldes an.\n\t /\n\t@Prop() public _name?: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für das Input-Event an.\n\t /\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/\n\t Gibt ein Prüfmuster (Pattern) für das Eingabefeld an.\n\t /\n\t@Prop() public _pattern?: string;\n\n\t/\n\t Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t /\n\t@Prop() public _placeholder?: string;\n\n\t/\n\t Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t /\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/\n\t Macht das Eingabeelement zu einem Pflichtfeld.\n\t /\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/\n\t Setzt die Breite des Eingabefeldes in Buchstabenbreiten.\n\t /\n\t@Prop() public _size?: number;\n\n\t/\n\t Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\n\t /\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/\n\t Gibt an, welchen Tab-Index das primäre Element in der Komponente 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 Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/\n\t Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.\n\t /\n\t@Prop() public _type?: InputTextType = 'text';\n\n\t/\n\t Gibt den Wert des Eingabefeldes an.\n\t /\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: 'id',\n\t\t_hasValue: false,\n\t\t_label: '…', // ⚠ required\n\t\t_list: [],\n\t\t_type: 'text',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'text', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tvalidateAlert(this, value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<string[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tvalidateReadOnly(this, value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tvalidateRequired(this, value);\n\t}\n\n\t/\n\t @deprecated\n\t */\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps \| string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tvalidateTouched(this, value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: InputTextType): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.oldValue = this._value;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ref?.removeEventListener('search', this.onChange);\n\t}\n}\n"],"version":3}

package/dist/cjs/kol-kolibri.cjs.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-94bf4fa8.js"),color=require("./color-93a094ef.js"),i18n=require("./i18n-bd375706.js"),prop_validators=require("./prop.validators-0e600d26.js"),a11y_tipps=require("./a11y.tipps-251f022e.js");require("./index-2e0791f2.js"),require("./index-7159f3d9.js"),require("./dev.utils-d69c0a9f.js"),require("./reuse-0fe7470f.js");const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}text{font-size:90px;letter-spacing:normal;word-spacing:normal}",max=360;function degreeToRadians(e){return e*Math.PI/180}function getColorNumber(e){return Math.round((Math.cos(degreeToRadians(e))+1)/2*225)}const KolKolibri=class{constructor(e){index.registerInstance(this,e),this.handleColorChange=(e,t)=>{if("string"==typeof e){const i=color.colorRgba(e);t.set("_color",{red:i[0],green:i[1],blue:i[2]})}else a11y_tipps.devHint("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._animate=void 0,this._color="#003c78",this._labeled=void 0,this.state={_animate:!1,_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const e=!0===this.state._animate?`rgb(${getColorNumber(this.state._color.red)},${getColorNumber(this.state._color.green)},${getColorNumber(this.state._color.blue)})`:`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return index.h(index.Host,null,index.h("svg",{role:"img","aria-label":i18n.translate("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:e},index.h("path",{d:"M353 322L213 304V434L353 322Z"}),index.h("path",{d:"M209 564V304L149 434L209 564Z"}),index.h("path",{d:"M357 316L417 250L361 210L275 244L357 316Z"}),index.h("path",{d:"M329 218L237 92L250 222L272 241L329 218Z"}),index.h("path",{d:"M353 318L35 36L213 300L353 318Z"}),index.h("path",{d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&index.h("text",{x:"250",y:"525",fill:e},"KoliBri")))}validateAnimate(e){prop_validators.watchBoolean(this,"_animate",e)}validateColor(e){color.validateColor(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){prop_validators.watchBoolean(this,"_labeled",e)}componentWillLoad(){this.validateAnimate(this._animate),this.validateColor(this._color),this.validateLabeled(this._labeled)}componentDidRender(){clearInterval(this.interval),this.state._animate&&(this.interval=setInterval((()=>{this.state=Object.assign(Object.assign({},this.state),{_color:{red:(this.state._color.red+1)%360,green:(this.state._color.green+2)%360,blue:(this.state._color.blue+3)%360}})}),50))}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_animate:["validateAnimate"],_color:["validateColor"],_labeled:["validateLabeled"]}}};KolKolibri.style={default:defaultStyleCss},exports.kol_kolibri=KolKolibri;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-44abe473.js"),color=require("./color-8faddadf.js"),i18n=require("./i18n-cc52d740.js"),prop_validators=require("./prop.validators-5e04ba38.js"),a11y_tipps=require("./a11y.tipps-251f022e.js");require("./index-329335d1.js"),require("./index-36fd94bb.js"),require("./dev.utils-d69c0a9f.js"),require("./reuse-0fe7470f.js");const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}text{font-size:90px;letter-spacing:normal;word-spacing:normal}",max=360;function degreeToRadians(e){return e*Math.PI/180}function getColorNumber(e){return Math.round((Math.cos(degreeToRadians(e))+1)/2*225)}const KolKolibri=class{constructor(e){index.registerInstance(this,e),this.handleColorChange=(e,t)=>{if("string"==typeof e){const i=color.colorRgba(e);t.set("_color",{red:i[0],green:i[1],blue:i[2]})}else a11y_tipps.devHint("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._animate=void 0,this._color="#003c78",this._labeled=void 0,this.state={_animate:!1,_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const e=!0===this.state._animate?`rgb(${getColorNumber(this.state._color.red)},${getColorNumber(this.state._color.green)},${getColorNumber(this.state._color.blue)})`:`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return index.h(index.Host,null,index.h("svg",{role:"img","aria-label":i18n.translate("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:e},index.h("path",{d:"M353 322L213 304V434L353 322Z"}),index.h("path",{d:"M209 564V304L149 434L209 564Z"}),index.h("path",{d:"M357 316L417 250L361 210L275 244L357 316Z"}),index.h("path",{d:"M329 218L237 92L250 222L272 241L329 218Z"}),index.h("path",{d:"M353 318L35 36L213 300L353 318Z"}),index.h("path",{d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&index.h("text",{x:"250",y:"525",fill:e},"KoliBri")))}validateAnimate(e){prop_validators.watchBoolean(this,"_animate",e)}validateColor(e){color.validateColor(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){prop_validators.watchBoolean(this,"_labeled",e)}componentWillLoad(){this.validateAnimate(this._animate),this.validateColor(this._color),this.validateLabeled(this._labeled)}componentDidRender(){clearInterval(this.interval),this.state._animate&&(this.interval=setInterval((()=>{this.state=Object.assign(Object.assign({},this.state),{_color:{red:(this.state._color.red+1)%360,green:(this.state._color.green+2)%360,blue:(this.state._color.blue+3)%360}})}),50))}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_animate:["validateAnimate"],_color:["validateColor"],_labeled:["validateLabeled"]}}};KolKolibri.style={default:defaultStyleCss},exports.kol_kolibri=KolKolibri;

package/dist/cjs/kol-link-button.cjs.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-94bf4fa8.js"),i18n=require("./i18n-bd375706.js"),reuse=require("./reuse-0fe7470f.js");require("./index-2e0791f2.js"),require("./index-7159f3d9.js"),require("./a11y.tipps-251f022e.js"),require("./dev.utils-d69c0a9f.js");const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){display:inline-flex;place-items:center;text-align:center;text-decoration-line:none}:is(a,button)>kol-span-wc{margin:auto;width:100%}:is(button):disabled{cursor:not-allowed;opacity:0.5}",KolLinkButton=class{constructor(t){index.registerInstance(this,t),this.catchRef=t=>{this.ref=t,reuse.propagateFocus(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._download=!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=i18n.translate("kol-open-link-in-tab"),this._tooltipAlign="right",this._variant="normal"}render(){return index.h(index.Host,null,index.h("kol-link-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_download:this._download,_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},index.h("slot",{name:"expert",slot:"expert"})))}get host(){return index.getElement(this)}};KolLinkButton.style={default:defaultStyleCss},exports.kol_link_button=KolLinkButton;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-44abe473.js"),i18n=require("./i18n-cc52d740.js"),reuse=require("./reuse-0fe7470f.js");require("./index-329335d1.js"),require("./index-36fd94bb.js"),require("./a11y.tipps-251f022e.js"),require("./dev.utils-d69c0a9f.js");const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){display:inline-flex;place-items:center;text-align:center;text-decoration-line:none}:is(a,button)>kol-span-wc{margin:auto;width:100%}:is(button):disabled{cursor:not-allowed;opacity:0.5}",KolLinkButton=class{constructor(t){index.registerInstance(this,t),this.catchRef=t=>{this.ref=t,reuse.propagateFocus(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._download=!1,this._hideLabel=!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=i18n.translate("kol-open-link-in-tab"),this._tooltipAlign="right",this._variant="normal"}render(){return index.h(index.Host,null,index.h("kol-link-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icon:this._icon,_label:this._label,_on:this._on,_role:"button",_tabIndex:this._tabIndex,_target:this._target,_targetDescription:this._targetDescription,_tooltipAlign:this._tooltipAlign},index.h("slot",{name:"expert",slot:"expert"})))}get host(){return index.getElement(this)}};KolLinkButton.style={default:defaultStyleCss},exports.kol_link_button=KolLinkButton;

package/dist/cjs/kol-link-button.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-link-button.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,u5BAAu5B;;MCwBl6B,aAAa;;;IAIR,aAAQ,GAAG,CAAC,GAA0B;MACtD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACfA,oBAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;;;;;;;~~qBAyEoD~~,KAAK;qBAKb,KAAK;;;~~qBAeG~~,KAAK;;;;;;8BA+BdC,cAAS,CAAC,sBAAsB,CAAC;~~yBAKnC~~,OAAO;~~oBAKD~~,QAAQ;;~~EApIlD~~,MAAM;IACZ,QACCC,QAACC,UAAI,QACJD,yBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAE;QACN,MAAM,EAAE,IAAI;QACZ,CAAC,IAAI,CAAC,QAAkB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ;QACrD,CAAC,IAAI,CAAC,YAAsB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;OAClI,EACD,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,~~KAAK~~,EAAE,IAAI,CAAC,~~KAAK~~,~~EACjB~~,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,~~SAAS~~,EAAE,IAAI,CAAC,~~SAAS~~,~~EACzB~~,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAC,QAAQ,EACd,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,aAAa,EAAE,IAAI,CAAC,aAAa,IAEjCA,kBAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC5B,CACR,EACN;GACF;;;;;;;;;","names":["propagateFocus","translate","h","Host"],"sources":["./src/components/link-button/style.css?tag=kol-link-button&mode=default&encapsulation=shadow","./src/components/link-button/component.tsx"],"sourcesContent":["@import url(../button.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { translate } from '../../i18n';\nimport {\n\tAlternativButtonLinkRole,\n\tKoliBriButtonVariant,\n\tLinkOnCallbacks,\n\tLinkTarget,\n\tOptionalLinkButtonProps,\n\tRequiredLinkButtonProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { AriaCurrent, ~~Alignment~~ } from '../../types/props';\nimport { propagateFocus } from '../../utils/reuse';\n\n@Component({\n\ttag: 'kol-link-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLinkButton implements Generic.Element.Members<RequiredLinkButtonProps, OptionalLinkButtonProps> {\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\tpropagateFocus(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._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._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_download={this._download}\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<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 Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.\n\t /\n\t@Prop() public _download?: boolean \| string = 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 Iconklasse (z.B.: \"codicon codicon-home\")\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 Setzt ~~den~~ ~~sichtbaren~~ ~~Text~~ ~~des~~ ~~Elements~~.\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für den Link an.\n\t * @deprecated\n\t /\n\t@Prop() public _on?: LinkOnCallbacks;\n\n\t/\n\t ~~Setzt~~ die ~~Role~~ der ~~Schaltfläche~~.\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 Gibt an wo 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 ~~Link-Button~~ ~~hat~~.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n}\n"],"version":3}
1	+ {"file":"kol-link-button.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,u5BAAu5B;;MCwBl6B,aAAa;;;IAIR,aAAQ,GAAG,CAAC,GAA0B;MACtD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACfA,oBAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;;;;;;;qBAqEoD,KAAK;qBAKb,KAAK;sBAKI,KAAK;;;qBAgBN,KAAK;;;;;;8BA+BdC,cAAS,CAAC,sBAAsB,CAAC;yBAKvC,OAAO;oBAKG,QAAQ;;EAtIlD,MAAM;IACZ,QACCC,QAACC,UAAI,QACJD,yBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAE;QACN,MAAM,EAAE,IAAI;QACZ,CAAC,IAAI,CAAC,QAAkB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ;QACrD,CAAC,IAAI,CAAC,YAAsB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;OAClI,EACD,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAC,QAAQ,EACd,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,aAAa,EAAE,IAAI,CAAC,aAAa,IAEjCA,kBAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC5B,CACR,EACN;GACF;;;;;;;;;","names":["propagateFocus","translate","h","Host"],"sources":["./src/components/link-button/style.css?tag=kol-link-button&mode=default&encapsulation=shadow","./src/components/link-button/component.tsx"],"sourcesContent":["@import url(../button.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { translate } from '../../i18n';\nimport {\n\tAlternativButtonLinkRole,\n\tKoliBriButtonVariant,\n\tLinkOnCallbacks,\n\tLinkTarget,\n\tOptionalLinkButtonProps,\n\tRequiredLinkButtonProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { AriaCurrent, Align } from '../../types/props';\nimport { propagateFocus } from '../../utils/reuse';\n\n@Component({\n\ttag: 'kol-link-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLinkButton implements Generic.Element.Members<RequiredLinkButtonProps, OptionalLinkButtonProps> {\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\tpropagateFocus(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._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._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_download={this._download}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_href={this._href}\n\t\t\t\t\t_icon={this._icon}\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<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 das interaktive Element der Komponente 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 das interaktive Element in der Komponente 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 Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t /\n\t@Prop() public _ariaLabel?: string;\n\n\t/\n\t Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. 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 Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/\n\t Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.\n\t /\n\t@Prop() public _download?: boolean \| string = false;\n\n\t/\n\t Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t /\n\t@Prop({ reflect: true }) public _hideLabel?: 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 Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/\n\t Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t /\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/\n\t Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für den Link an.\n\t * @deprecated\n\t /\n\t@Prop() public _on?: LinkOnCallbacks;\n\n\t/\n\t Gibt die Rolle des primären Elements in der Komponente an.\n\t /\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/\n\t Gibt an, welchen Tab-Index das primäre Element in der Komponente 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 Gibt an wo 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 bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Align = 'right';\n\n\t/\n\t Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n}\n"],"version":3}

package/dist/cjs/kol-link-group.cjs.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-94bf4fa8.js"),a11y_tipps=require("./a11y.tipps-251f022e.js"),prop_validators=require("./prop.validators-0e600d26.js"),validation=require("./validation-067abd6e.js"),validation$1=require("./validation-2b48ad79.js");require("./dev.utils-d69c0a9f.js"),require("./reuse-0fe7470f.js"),require("./index-7159f3d9.js");const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{list-style:none;margin:0;padding:0}nav.horizontal ul{display:flex;flex-wrap:wrap}nav.horizontal li{margin-left:1.25rem;margin-right:0.25rem}nav.horizontal li:first-child{margin-left:0}nav.horizontal li:last-child{margin-right:0}nav.vertical li{margin-left:1.75rem;margin-right:0.5rem}li.list-none{list-style-type:none !important;margin-left:0}",ListItem=i=>{const t=[];return i.links.map(((e,a)=>{t.push(index.h("li",{key:a,class:{ident:a>0&&"vertical"===i.orientation,"list-none":0===a&&"horizontal"===i.orientation},style:{listStyleType:i.listStyleType}},index.h("kol-link",Object.assign({},e))))})),t},KolLinkGroup=class{constructor(i){index.registerInstance(this,i),this.isUl=!0,this._ariaLabel=void 0,this._listStyleType=void 0,this._heading=void 0,this._level=void 0,this._links=void 0,this._ordered=void 0,this._orientation="vertical",this.state={_ariaLabel:"…",_listStyleType:"disc",_links:[],_orientation:"vertical"}}render(){var i;return index.h("nav",{"aria-label":this.state._ariaLabel,class:{vertical:"vertical"===this.state._orientation,horizontal:"horizontal"===this.state._orientation}},"string"==typeof this.state._heading&&(null===(i=this.state._heading)||void 0===i?void 0:i.length)>0&&index.h("kol-heading-wc",{_label:this.state._heading,_level:this.state._level}),!1===this.isUl?index.h("ol",null,index.h(ListItem,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})):index.h("ul",null,index.h(ListItem,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})))}validateAriaLabel(i){prop_validators.watchString(this,"_ariaLabel",i,{required:!0}),a11y_tipps.a11yHintLabelingLandmarks(i)}validateListStyleType(i){prop_validators.watchValidator(this,"_listStyleType",(i=>{switch(i){case"disc":case"circle":case"square":case"none":return this.isUl=!0,!0;case"decimal":case"decimal-leading-zero":case"lower-alpha":case"lower-latin":case"lower-greek":case"lower-roman":case"upper-alpha":case"upper-latin":case"upper-roman":return this.isUl=!1,!0;default:return!1}}),new Set(["https://www.w3schools.com/tags/tag_ol.asp"]),i)}validateHeading(i){prop_validators.watchString(this,"_heading",i)}validateLevel(i){validation.watchHeadingLevel(this,i)}validateLinks(i){validation$1.watchNavLinks("KolLinkGroup",this,i)}validateOrdered(i){prop_validators.watchBoolean(this,"_ordered",i)}validateOrientation(i){prop_validators.watchValidator(this,"_orientation",(i=>"horizontal"===i||"vertical"===i),new Set(["Orientation {horizontal, vertical}"]),i,{defaultValue:"vertical"})}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateListStyleType(this._listStyleType),this.validateHeading(this._heading),this.validateLevel(this._level),this.validateLinks(this._links),this.validateOrientation(this._orientation)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_listStyleType:["validateListStyleType"],_heading:["validateHeading"],_level:["validateLevel"],_links:["validateLinks"],_ordered:["validateOrdered"],_orientation:["validateOrientation"]}}};KolLinkGroup.style={default:defaultStyleCss},exports.kol_link_group=KolLinkGroup;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-44abe473.js"),a11y_tipps=require("./a11y.tipps-251f022e.js"),prop_validators=require("./prop.validators-5e04ba38.js"),validation=require("./validation-b985d357.js"),validation$1=require("./validation-b25e2db5.js");require("./dev.utils-d69c0a9f.js"),require("./reuse-0fe7470f.js"),require("./index-36fd94bb.js");const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{list-style:none;margin:0;padding:0}nav.horizontal ul{display:flex;flex-wrap:wrap}nav.horizontal li{margin-left:1.25rem;margin-right:0.25rem}nav.horizontal li:first-child{margin-left:0}nav.horizontal li:last-child{margin-right:0}nav.vertical li{margin-left:1.75rem;margin-right:0.5rem}li.list-none{list-style-type:none !important;margin-left:0}",ListItem=i=>{const t=[];return i.links.map(((e,a)=>{t.push(index.h("li",{key:a,class:{ident:a>0&&"vertical"===i.orientation,"list-none":0===a&&"horizontal"===i.orientation},style:{listStyleType:i.listStyleType}},index.h("kol-link",Object.assign({},e))))})),t},KolLinkGroup=class{constructor(i){index.registerInstance(this,i),this.isUl=!0,this._ariaLabel=void 0,this._listStyleType=void 0,this._heading=void 0,this._level=void 0,this._links=void 0,this._ordered=void 0,this._orientation="vertical",this.state={_ariaLabel:"…",_listStyleType:"disc",_links:[],_orientation:"vertical"}}render(){var i;return index.h("nav",{"aria-label":this.state._ariaLabel,class:{vertical:"vertical"===this.state._orientation,horizontal:"horizontal"===this.state._orientation}},"string"==typeof this.state._heading&&(null===(i=this.state._heading)||void 0===i?void 0:i.length)>0&&index.h("kol-heading-wc",{_label:this.state._heading,_level:this.state._level}),!1===this.isUl?index.h("ol",null,index.h(ListItem,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})):index.h("ul",null,index.h(ListItem,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})))}validateAriaLabel(i){prop_validators.watchString(this,"_ariaLabel",i,{required:!0}),a11y_tipps.a11yHintLabelingLandmarks(i)}validateListStyleType(i){prop_validators.watchValidator(this,"_listStyleType",(i=>{switch(i){case"disc":case"circle":case"square":case"none":return this.isUl=!0,!0;case"decimal":case"decimal-leading-zero":case"lower-alpha":case"lower-latin":case"lower-greek":case"lower-roman":case"upper-alpha":case"upper-latin":case"upper-roman":return this.isUl=!1,!0;default:return!1}}),new Set(["https://www.w3schools.com/tags/tag_ol.asp"]),i)}validateHeading(i){prop_validators.watchString(this,"_heading",i)}validateLevel(i){validation.watchHeadingLevel(this,i)}validateLinks(i){validation$1.watchNavLinks("KolLinkGroup",this,i)}validateOrdered(i){prop_validators.watchBoolean(this,"_ordered",i)}validateOrientation(i){prop_validators.watchValidator(this,"_orientation",(i=>"horizontal"===i||"vertical"===i),new Set(["Orientation {horizontal, vertical}"]),i,{defaultValue:"vertical"})}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateListStyleType(this._listStyleType),this.validateHeading(this._heading),this.validateLevel(this._level),this.validateLinks(this._links),this.validateOrientation(this._orientation)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_listStyleType:["validateListStyleType"],_heading:["validateHeading"],_level:["validateLevel"],_links:["validateLinks"],_ordered:["validateOrdered"],_orientation:["validateOrientation"]}}};KolLinkGroup.style={default:defaultStyleCss},exports.kol_link_group=KolLinkGroup;

package/dist/cjs/kol-link-group.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-link-group.entry.cjs.js","mappings":"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","names":["index","h","watchString","a11yHintLabelingLandmarks","watchValidator","watchHeadingLevel","watchNavLinks","watchBoolean"],"sources":["./src/components/link-group/style.css?tag=kol-link-group&mode=default&encapsulation=shadow","./src/components/link-group/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\nnav.horizontal ul {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\nnav.horizontal li {\n\tmargin-left: 1.25rem;\n\tmargin-right: 0.25rem;\n}\nnav.horizontal li:first-child {\n\tmargin-left: 0;\n}\nnav.horizontal li:last-child {\n\tmargin-right: 0;\n}\nnav.vertical li {\n\tmargin-left: 1.75rem;\n\tmargin-right: 0.5rem;\n}\nli.list-none {\n\tlist-style-type: none !important;\n\tmargin-left: 0;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { LinkProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { Orientation } from '../../types/orientation';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchBoolean, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { watchNavLinks } from '../nav/validation';\n\nconst ListItem = (props: { links: LinkProps[]; orientation: Orientation; listStyleType: ListStyleType }): JSX.Element => {\n\tconst list: JSX.Element[] = [];\n\tprops.links.map((link, index: number) => {\n\t\tlist.push(\n\t\t\t(\n\t\t\t\t<li\n\t\t\t\t\tkey={index}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tident: index > 0 && props.orientation === 'vertical',\n\t\t\t\t\t\t'list-none': index === 0 && props.orientation === 'horizontal',\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tlistStyleType: props.listStyleType,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-link {...link}></kol-link>\n\t\t\t\t</li>\n\t\t\t) as JSX.Element\n\t\t);\n\t});\n\treturn list;\n};\n\nexport type ListStyleType =\n\t\| 'disc'\n\t\| 'circle'\n\t\| 'square'\n\t\| 'none'\n\t\| 'decimal'\n\t\| 'decimal-leading-zero'\n\t\| 'lower-alpha'\n\t\| 'lower-greek'\n\t\| 'lower-latin'\n\t\| 'lower-roman'\n\t\| 'upper-alpha'\n\t\| 'upper-latin'\n\t\| 'upper-roman';\n\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<LinkProps[]>;\n};\ntype OptionalProps = {\n\theading: string;\n\tlevel: HeadingLevel;\n\tlistStyleType: ListStyleType;\n\tordered: boolean;\n\torientation: Orientation;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: LinkProps[];\n\tlistStyleType: ListStyleType;\n\torientation: Orientation;\n};\ntype OptionalStates = {\n\theading: string;\n\tlevel: HeadingLevel;\n\tordered: boolean;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-link-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLinkGroup implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav\n\t\t\t\taria-label={this.state._ariaLabel}\n\t\t\t\tclass={{\n\t\t\t\t\tvertical: this.state._orientation === 'vertical',\n\t\t\t\t\thorizontal: this.state._orientation === 'horizontal',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{typeof this.state._heading === 'string' && this.state._heading?.length > 0 && (\n\t\t\t\t\t<kol-heading-wc _label={this.state._heading} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t)}\n\n\t\t\t\t{this.isUl === false ? (\n\t\t\t\t\t<ol>\n\t\t\t\t\t\t<ListItem links={this.state._links} orientation={this.state._orientation} listStyleType={this.state._listStyleType} />\n\t\t\t\t\t</ol>\n\t\t\t\t) : (\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<ListItem links={this.state._links} orientation={this.state._orientation} listStyleType={this.state._listStyleType} />\n\t\t\t\t\t</ul>\n\t\t\t\t)}\n\t\t\t</nav>\n\t\t);\n\t}\n\n\tprivate isUl = true;\n\n\t/*\n\t Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t /\n\t@Prop() public _ariaLabel!: string;\n\n\t/\n\t Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet\n\t /\n\t@Prop() public _listStyleType?: ListStyleType;\n\n\t/\n\t Gibt die optionale Überschrift zur Link-Gruppe an.\n\t /\n\t@Prop() public _heading?: string;\n\n\t/\n\t Setzt den H-Level, von 1 bis 6, der Überschrift.\n\t /\n\t@Prop() public _level?: HeadingLevel;\n\n\t/\n\t Setzt die Liste der darzustellenden Links.\n\t /\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t/\n\t Gibt an, ob eine Ordered- oder eine Unordered-List verwendet werden soll.\n\t * @deprecated Wird mittels der Property _list-style-type automatisch gesteuert.\n\t /\n\t@Prop({ reflect: true }) public _ordered?: boolean;\n\n\t/\n\t Gibt die Ausrichtung der LinkList an.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_listStyleType: 'disc',\n\t\t_links: [],\n\t\t_orientation: 'vertical',\n\t};\n\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\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t@Watch('_listStyleType')\n\tpublic validateListStyleType(value?: ListStyleType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_listStyleType',\n\t\t\t(value) => {\n\t\t\t\tswitch (value) {\n\t\t\t\t\tcase 'disc':\n\t\t\t\t\tcase 'circle':\n\t\t\t\t\tcase 'square':\n\t\t\t\t\tcase 'none':\n\t\t\t\t\t\tthis.isUl = true;\n\t\t\t\t\t\treturn true;\n\t\t\t\t\tcase 'decimal':\n\t\t\t\t\tcase 'decimal-leading-zero':\n\t\t\t\t\tcase 'lower-alpha':\n\t\t\t\t\tcase 'lower-latin':\n\t\t\t\t\tcase 'lower-greek':\n\t\t\t\t\tcase 'lower-roman':\n\t\t\t\t\tcase 'upper-alpha':\n\t\t\t\t\tcase 'upper-latin':\n\t\t\t\t\tcase 'upper-roman':\n\t\t\t\t\t\tthis.isUl = false;\n\t\t\t\t\t\treturn true;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t},\n\t\t\tnew Set(['https://www.w3schools.com/tags/tag_ol.asp']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolLinkGroup', this, value);\n\t}\n\n\t@Watch('_ordered')\n\tpublic validateOrdered(value?: boolean): void {\n\t\twatchBoolean(this, '_ordered', value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' \|\| value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t}\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateListStyleType(this._listStyleType);\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateLinks(this._links);\n\t\t//this.validateOrdered(this._ordered);\n\t\tthis.validateOrientation(this._orientation);\n\t}\n}\n\n// console.log(\n// stringifyJson([\n// { _label: 'Fehler 1', _id: '#anschrift_anschrift_adresse_strasse', _icon: 'error' },\n// { _label: 'Fehler 2', _id: '#anschrift_anschrift_adresse_hausnummer', _icon: 'error' },\n// ])\n// );\n"],"version":3}
1	+ {"file":"kol-link-group.entry.cjs.js","mappings":"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","names":["index","h","watchString","a11yHintLabelingLandmarks","watchValidator","watchHeadingLevel","watchNavLinks","watchBoolean"],"sources":["./src/components/link-group/style.css?tag=kol-link-group&mode=default&encapsulation=shadow","./src/components/link-group/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\nnav.horizontal ul {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\nnav.horizontal li {\n\tmargin-left: 1.25rem;\n\tmargin-right: 0.25rem;\n}\nnav.horizontal li:first-child {\n\tmargin-left: 0;\n}\nnav.horizontal li:last-child {\n\tmargin-right: 0;\n}\nnav.vertical li {\n\tmargin-left: 1.75rem;\n\tmargin-right: 0.5rem;\n}\nli.list-none {\n\tlist-style-type: none !important;\n\tmargin-left: 0;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { LinkProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { Orientation } from '../../types/orientation';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchBoolean, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { watchNavLinks } from '../nav/validation';\n\nconst ListItem = (props: { links: LinkProps[]; orientation: Orientation; listStyleType: ListStyleType }): JSX.Element => {\n\tconst list: JSX.Element[] = [];\n\tprops.links.map((link, index: number) => {\n\t\tlist.push(\n\t\t\t(\n\t\t\t\t<li\n\t\t\t\t\tkey={index}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tident: index > 0 && props.orientation === 'vertical',\n\t\t\t\t\t\t'list-none': index === 0 && props.orientation === 'horizontal',\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tlistStyleType: props.listStyleType,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-link {...link}></kol-link>\n\t\t\t\t</li>\n\t\t\t) as JSX.Element\n\t\t);\n\t});\n\treturn list;\n};\n\nexport type ListStyleType =\n\t\| 'disc'\n\t\| 'circle'\n\t\| 'square'\n\t\| 'none'\n\t\| 'decimal'\n\t\| 'decimal-leading-zero'\n\t\| 'lower-alpha'\n\t\| 'lower-greek'\n\t\| 'lower-latin'\n\t\| 'lower-roman'\n\t\| 'upper-alpha'\n\t\| 'upper-latin'\n\t\| 'upper-roman';\n\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<LinkProps[]>;\n};\ntype OptionalProps = {\n\theading: string;\n\tlevel: HeadingLevel;\n\tlistStyleType: ListStyleType;\n\tordered: boolean;\n\torientation: Orientation;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: LinkProps[];\n\tlistStyleType: ListStyleType;\n\torientation: Orientation;\n};\ntype OptionalStates = {\n\theading: string;\n\tlevel: HeadingLevel;\n\tordered: boolean;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-link-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLinkGroup implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav\n\t\t\t\taria-label={this.state._ariaLabel}\n\t\t\t\tclass={{\n\t\t\t\t\tvertical: this.state._orientation === 'vertical',\n\t\t\t\t\thorizontal: this.state._orientation === 'horizontal',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{typeof this.state._heading === 'string' && this.state._heading?.length > 0 && (\n\t\t\t\t\t<kol-heading-wc _label={this.state._heading} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t)}\n\n\t\t\t\t{this.isUl === false ? (\n\t\t\t\t\t<ol>\n\t\t\t\t\t\t<ListItem links={this.state._links} orientation={this.state._orientation} listStyleType={this.state._listStyleType} />\n\t\t\t\t\t</ol>\n\t\t\t\t) : (\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<ListItem links={this.state._links} orientation={this.state._orientation} listStyleType={this.state._listStyleType} />\n\t\t\t\t\t</ul>\n\t\t\t\t)}\n\t\t\t</nav>\n\t\t);\n\t}\n\n\tprivate isUl = true;\n\n\t/*\n\t Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t /\n\t@Prop() public _ariaLabel!: string;\n\n\t/\n\t Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet\n\t /\n\t@Prop() public _listStyleType?: ListStyleType;\n\n\t/\n\t Gibt die optionale Überschrift zur Link-Gruppe an.\n\t /\n\t@Prop() public _heading?: string;\n\n\t/\n\t Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll.\n\t /\n\t@Prop() public _level?: HeadingLevel;\n\n\t/\n\t Gibt die Liste der darzustellenden Button, Links oder Texte an.\n\t /\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t/\n\t Gibt an, ob eine Ordered- oder eine Unordered-List verwendet werden soll.\n\t * @deprecated Wird mittels der Property _list-style-type automatisch gesteuert.\n\t /\n\t@Prop({ reflect: true }) public _ordered?: boolean;\n\n\t/\n\t Gibt die horizontale oder vertikale Ausrichtung der Komponente an.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_listStyleType: 'disc',\n\t\t_links: [],\n\t\t_orientation: 'vertical',\n\t};\n\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\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t@Watch('_listStyleType')\n\tpublic validateListStyleType(value?: ListStyleType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_listStyleType',\n\t\t\t(value) => {\n\t\t\t\tswitch (value) {\n\t\t\t\t\tcase 'disc':\n\t\t\t\t\tcase 'circle':\n\t\t\t\t\tcase 'square':\n\t\t\t\t\tcase 'none':\n\t\t\t\t\t\tthis.isUl = true;\n\t\t\t\t\t\treturn true;\n\t\t\t\t\tcase 'decimal':\n\t\t\t\t\tcase 'decimal-leading-zero':\n\t\t\t\t\tcase 'lower-alpha':\n\t\t\t\t\tcase 'lower-latin':\n\t\t\t\t\tcase 'lower-greek':\n\t\t\t\t\tcase 'lower-roman':\n\t\t\t\t\tcase 'upper-alpha':\n\t\t\t\t\tcase 'upper-latin':\n\t\t\t\t\tcase 'upper-roman':\n\t\t\t\t\t\tthis.isUl = false;\n\t\t\t\t\t\treturn true;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t},\n\t\t\tnew Set(['https://www.w3schools.com/tags/tag_ol.asp']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolLinkGroup', this, value);\n\t}\n\n\t@Watch('_ordered')\n\tpublic validateOrdered(value?: boolean): void {\n\t\twatchBoolean(this, '_ordered', value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' \|\| value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t}\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateListStyleType(this._listStyleType);\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateLinks(this._links);\n\t\t//this.validateOrdered(this._ordered);\n\t\tthis.validateOrientation(this._orientation);\n\t}\n}\n\n// console.log(\n// stringifyJson([\n// { _label: 'Fehler 1', _id: '#anschrift_anschrift_adresse_strasse', _icon: 'error' },\n// { _label: 'Fehler 2', _id: '#anschrift_anschrift_adresse_hausnummer', _icon: 'error' },\n// ])\n// );\n"],"version":3}