npm - @public-ui/components - Versions diffs - 1.7.12 → 1.7.13 - Mend

@public-ui/components 1.7.12 → 1.7.13

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 (753) hide show

package/dist/components/kol-progress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-progress.js","mappings":";;;;;;;AAAA,IAAY,0BAKX;AALD,WAAY,0BAA0B;IACrC,yCAAa,CAAA;IACb,6CAAiB,CAAA;IACjB,qEAAyC,CAAA;IACzC,qEAAyC,CAAA;AAC1C,CAAC,EALW,0BAA0B,KAA1B,0BAA0B;;ACAtC,MAAM,eAAe,GAAG,67CAA67C,CAAC;AACt9C,iCAAe,eAAe;;ACM9B,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;AAG/D,MAAM,iBAAiB,GAAG,CAAC,KAAa;IACvC,MAAM,UAAU,GAAG,GAAG,CAAC;IACvB,MAAM,eAAe,GAAG,KAAK,CAAC;IAC9B,MAAM,kBAAkB,GAAG,KAAK,CAAC;IAEjC,IAAI,MAAM,GAAG,eAAe,CAAC;IAC7B,IAAI,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,kBAAkB,GAAG,KAAK,CAAC;IACvD,QAAQ,KAAK,CAAC,QAAQ;QACrB,KAAK,mBAAmB;YACvB,IAAI,KAAK,CAAC,MAAM,EAAE;gBACjB,MAAM,GAAG,kBAAkB,CAAC;gBAC5B,MAAM,GAAG,eAAe,CAAC;aACzB;QAEF,KAAK,OAAO,CAAC;QACb,KAAK,mBAAmB;YACvB,QACC,WAAK,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,IACtF,cAAQ,KAAK,EAAC,YAAY,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,GAAU,EACxH,cAAQ,KAAK,EAAC,YAAY,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,GAAU,EACtH,cAAQ,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,GAAU,EAClH,cAAQ,KAAK,EAAC,YAAY,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,GAAU,EACtH,cAAQ,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,GAAU,EAClH,cACC,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,oBACN,OAAO,sBACJ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,IAAI,IAAI,UAAU,CAAC,MAAM,UAAU,IAAI,kBAChF,GAAG,EAChB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,MAAM,GACC,EACT,KAAK,CAAC,MAAM,KACZ,2BAAkB,MAAM,EAAC,CAAC,EAAC,KAAK,EAAC,CAAC,EAAE,MAAM,iBAAc,QAAQ,EAAC,IAAI,EAAC,cAAc,IAClF,KAAK,CAAC,MAAM,CACP,CACP,EACD,2BAAkB,MAAM,EAAC,CAAC,EAAC,KAAK,EAAC,CAAC,EAAE,MAAM,iBAAc,QAAQ,EAAC,IAAI,EAAC,cAAc,IAClF,KAAK,CAAC,MAAM,EACZ,KAAK,CAAC,KAAK,CACN,CACF,EACL;QACH;YACC,QACC,WAAK,KAAK,EAAC,KAAK,IACd,KAAK,CAAC,MAAM,IAAI,eAAM,KAAK,CAAC,MAAM,CAAO,EAC1C,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,IAC5C,WAAK,KAAK,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,IACtE,YAAM,KAAK,EAAC,YAAY,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,EAAC,KAAK,EAAC,KAAK,GAAQ,EACtI,YACC,KAAK,EAAC,UAAU,EAChB,CAAC,EAAC,KAAK,EACP,CAAC,EAAC,KAAK,EACP,MAAM,EAAC,GAAG,EACV,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,kBACR,GAAG,EAChB,KAAK,EAAE,EAAE,IAAI,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,GAChC,EACR,YAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,EAAC,KAAK,EAAC,KAAK,GAAQ,CAC7H,EACN,2BAAkB,MAAM,iBAAa,QAAQ,uBAAmB,SAAS,EAAC,IAAI,EAAC,cAAc,IAC3F,KAAK,CAAC,MAAM,EACZ,KAAK,CAAC,KAAK,CACN,CACF,CACD,EACL;KACH;AACF,CAAC,CAAC;MASW,UAAU;;;;;;;;qBAmCU,GAAG;;;qBAYH;YAC/B,IAAI,EAAE,GAAG;YACT,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,CAAC;YACT,QAAQ,EAAE,KAAK;YACf,UAAU,EAAE,CAAC;SACb;;IAjDM,MAAM;QACZ,QACC,EAAC,IAAI,QACH,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,EAC9B,6BAAqB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAa,EACxI,yBAAgB,QAAQ,mBAAe,eAAe,EAAC,MAAM,UAC3D,IAAI,CAAC,KAAK,CAAC,UAAU,WAAO,IAAI,CAAC,KAAK,CAAC,IAAI,OAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CACzD,CACD,EACN;KACF;IA0CM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC3B;IAGM,WAAW,CAAC,KAAc;QAChC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC9B,KAAK,GAAG,GAAG,CAAC;SACZ;QACD,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE;YAChC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAIM,YAAY,CAAC,KAAkC;QACrD,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;KAC5B;IAGM,YAAY,CAAC,KAAc;QACjC,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;KAClC;IAGM,aAAa,CAAC,KAAc;QAClC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC9B,KAAK,GAAG,CAAC,CAAC;SACV;QACD,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;YAElC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAAkC;QACxD,cAAc,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,GAAG,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,CAAC;KACzI;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;QAElD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;YAC3B,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;gBAChD,IAAI,CAAC,KAAK,mCACN,IAAI,CAAC,KAAK,KACb,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAC7B,CAAC;aACF;SACD,EAAE,IAAI,CAAsB,CAAC;KAC9B;IAEM,oBAAoB;QAC1B,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/types/progress.ts","src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/component.tsx"],"sourcesContent":["export enum KoliBriProgressVariantEnum {\n\t'bar' = 'bar',\n\t'cycle' = 'cycle',\n\t'cycle-value-label' = 'cycle-value-label',\n\t'cycle-label-value' = 'cycle-label-value',\n}\n\nexport type KoliBriProgressVariantType = `${KoliBriProgressVariantEnum}`;\n","@import url(../style.css);\nprogress {\n\tdisplay: block;\n\theight: 0;\n\toverflow: hidden;\n\twidth: 0;\n}\n.bar .border {\n\tfill: transparent;\n\tstroke: black;\n}\n.bar .background {\n\tfill: lightgray;\n\tstroke: white;\n}\n.bar .progress {\n\tfill: #0075ff;\n\tstroke: transparent;\n\ttransition: 250ms ease-in-out 50ms;\n}\n.cycle .background {\n\tfill: transparent;\n\tstroke: lightgray;\n}\n.cycle .border {\n\tfill: transparent;\n\tstroke: black;\n}\n.cycle .whitespace {\n\tfill: transparent;\n\tstroke: white;\n}\n.cycle .progress {\n\tfill: transparent;\n\tstroke: #0075ff;\n\ttransform-origin: 50% 50%;\n\ttransform: rotate(-90deg);\n\ttransition: 250ms ease-in-out 50ms;\n}\n/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion /\n@media (prefers-reduced-motion) {\n\t.progress {\n\t\ttransition-duration: 0s;\n\t\ttransition-delay: 0s;\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { KoliBriProgressVariantEnum, KoliBriProgressVariantType } from '../../types/progress';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { API, States } from './types';\n\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: States): JSX.Element => {\n\tconst fullCircle = 342;\n\tconst textPositionTop = '43%';\n\tconst textPositionBottom = '57%';\n\n\tlet labelY = textPositionTop;\n\tlet valueY = state._label ? textPositionBottom : '50%';\n\tswitch (state._variant) {\n\t\tcase 'cycle-value-label':\n\t\t\tif (state._label) {\n\t\t\t\tlabelY = textPositionBottom;\n\t\t\t\tvalueY = textPositionTop;\n\t\t\t}\n\t\t// eslint-disable-next-line no-fallthrough\n\t\tcase 'cycle':\n\t\tcase 'cycle-label-value':\n\t\t\treturn (\n\t\t\t\t<svg class=\"cycle\" width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle class=\"background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) fullCircle)}px ${fullCircle}px`}\n\t\t\t\t\t\tstroke-width=\"6\"\n\t\t\t\t\t\tcx=\"60\"\n\t\t\t\t\t\tcy=\"60\"\n\t\t\t\t\t\tr=\"54.5\"\n\t\t\t\t\t></circle>\n\t\t\t\t\t{state._label && (\n\t\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={labelY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._label}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t)}\n\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={valueY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div class=\"bar\">\n\t\t\t\t\t{state._label && <div>{state._label}</div>}\n\t\t\t\t\t<div style={{ display: 'flex', gap: '0.3em' }}>\n\t\t\t\t\t\t<svg width=\"100\" viewBox=\"0 0 102 8\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<rect class=\"background\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100\"></rect>\n\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\t\t\tx=\"2.5\"\n\t\t\t\t\t\t\t\ty=\"2.5\"\n\t\t\t\t\t\t\t\theight=\"7\"\n\t\t\t\t\t\t\t\trx=\"3.5\"\n\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\t\t\t\twidth={95 * (state._value / state._max)}\n\t\t\t\t\t\t\t></rect>\n\t\t\t\t\t\t\t<rect class=\"border\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100\"></rect>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<text aria-hidden=\"true\" text-anchor=\"middle\" dominant-baseline=\"central\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements API {\n\tprivate interval?: number;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t<progress aria-busy={this.state._value < this.state._max ? 'true' : 'false'} max={this.state._max} value={this.state._value}></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" hidden>\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/*\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label?: LabelPropType;\n\n\t/\n\t Defines at which value the progress display is completed.\n\t /\n\t@Prop() public _max!: number;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t * @deprecated will be removed in v2, use _variant\n\t /\n\t@Prop() public _type?: KoliBriProgressVariantType;\n\n\t/\n\t Defines the unit of the step values (not shown).\n\t /\n\t@Prop() public _unit?: string = '%';\n\n\t/\n\t Defines the progress.\n\t /\n\t@Prop() public _value!: number;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriProgressVariantType;\n\n\t@State() public state: States = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t// @deprecated remove with v2\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriProgressVariantType): void {\n\t\tthis.validateVariant(value);\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressVariantType): void {\n\t\twatchValidator(this, '_variant', (value) => typeof value === 'string' && VALID_VARIANTS.includes(value), new Set(VALID_VARIANTS), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant \|\| this._type);\n\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000) as unknown as number;\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-progress.js","mappings":"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","names":[],"sources":["src/types/progress.ts","src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/component.tsx"],"sourcesContent":["export enum KoliBriProgressVariantEnum {\n\t'bar' = 'bar',\n\t'cycle' = 'cycle',\n\t'cycle-value-label' = 'cycle-value-label',\n\t'cycle-label-value' = 'cycle-label-value',\n}\n\nexport type KoliBriProgressVariantType = `${KoliBriProgressVariantEnum}`;\n","@import url(../style.css);\nprogress {\n\tdisplay: block;\n\theight: 0;\n\toverflow: hidden;\n\twidth: 0;\n}\n.bar .border {\n\tfill: transparent;\n\tstroke: black;\n}\n.bar .background {\n\tfill: lightgray;\n\tstroke: white;\n}\n.bar .progress {\n\tfill: #0075ff;\n\tstroke: transparent;\n\ttransition: 250ms ease-in-out 50ms;\n}\n.cycle .background {\n\tfill: transparent;\n\tstroke: lightgray;\n}\n.cycle .border {\n\tfill: transparent;\n\tstroke: black;\n}\n.cycle .whitespace {\n\tfill: transparent;\n\tstroke: white;\n}\n.cycle .progress {\n\tfill: transparent;\n\tstroke: #0075ff;\n\ttransform-origin: 50% 50%;\n\ttransform: rotate(-90deg);\n\ttransition: 250ms ease-in-out 50ms;\n}\n/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion /\n@media (prefers-reduced-motion) {\n\t.progress {\n\t\ttransition-duration: 0s;\n\t\ttransition-delay: 0s;\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { KoliBriProgressVariantEnum, KoliBriProgressVariantType } from '../../types/progress';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { API, States } from './types';\n\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: States): JSX.Element => {\n\tconst fullCircle = 342;\n\tconst textPositionTop = '43%';\n\tconst textPositionBottom = '57%';\n\n\tlet labelY = textPositionTop;\n\tlet valueY = state._label ? textPositionBottom : '50%';\n\tswitch (state._variant) {\n\t\tcase 'cycle-value-label':\n\t\t\tif (state._label) {\n\t\t\t\tlabelY = textPositionBottom;\n\t\t\t\tvalueY = textPositionTop;\n\t\t\t}\n\t\t// eslint-disable-next-line no-fallthrough\n\t\tcase 'cycle':\n\t\tcase 'cycle-label-value':\n\t\t\treturn (\n\t\t\t\t<svg class=\"cycle\" width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle class=\"background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) fullCircle)}px ${fullCircle}px`}\n\t\t\t\t\t\tstroke-width=\"6\"\n\t\t\t\t\t\tcx=\"60\"\n\t\t\t\t\t\tcy=\"60\"\n\t\t\t\t\t\tr=\"54.5\"\n\t\t\t\t\t></circle>\n\t\t\t\t\t{state._label && (\n\t\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={labelY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._label}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t)}\n\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={valueY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div class=\"bar\">\n\t\t\t\t\t{state._label && <div>{state._label}</div>}\n\t\t\t\t\t<div style={{ display: 'flex', gap: '0.3em' }}>\n\t\t\t\t\t\t<svg width=\"100\" viewBox=\"0 0 102 8\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<rect class=\"background\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100\"></rect>\n\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\t\t\tx=\"2.5\"\n\t\t\t\t\t\t\t\ty=\"2.5\"\n\t\t\t\t\t\t\t\theight=\"7\"\n\t\t\t\t\t\t\t\trx=\"3.5\"\n\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\t\t\t\twidth={95 * (state._value / state._max)}\n\t\t\t\t\t\t\t></rect>\n\t\t\t\t\t\t\t<rect class=\"border\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100\"></rect>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<text aria-hidden=\"true\" text-anchor=\"middle\" dominant-baseline=\"central\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements API {\n\tprivate interval?: number;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t<progress aria-busy={this.state._value < this.state._max ? 'true' : 'false'} max={this.state._max} value={this.state._value}></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" hidden>\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/*\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label?: LabelPropType;\n\n\t/\n\t Defines at which value the progress display is completed.\n\t /\n\t@Prop() public _max!: number;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t * @deprecated will be removed in v2, use _variant\n\t /\n\t@Prop() public _type?: KoliBriProgressVariantType;\n\n\t/\n\t Defines the unit of the step values (not shown).\n\t /\n\t@Prop() public _unit?: string = '%';\n\n\t/\n\t Defines the progress.\n\t /\n\t@Prop() public _value!: number;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriProgressVariantType;\n\n\t@State() public state: States = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t// @deprecated remove with v2\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriProgressVariantType): void {\n\t\tthis.validateVariant(value);\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressVariantType): void {\n\t\twatchValidator(this, '_variant', (value) => typeof value === 'string' && VALID_VARIANTS.includes(value), new Set(VALID_VARIANTS), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant \|\| this._type);\n\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000) as unknown as number;\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"version":3}

package/dist/components/kol-quote.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{b as watchString,w as watchValidator,s as showExpertSlot}from"./prop.validators.js";import{d as defineCustomElement$6}from"./component.js";import{d as defineCustomElement$5}from"./shadow2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}cite,figure,q+figcaption{display:inline;margin:0;padding:0}blockquote:before{content:open-quote}blockquote::after{content:close-quote}cite:before{content:'—'}.block cite:before{padding-right:0.5em}.inline cite:before{padding:0.5em}",KolQuoteDefaultStyle0=defaultStyleCss,KolQuote$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._caption=void 0,this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateCaption(t){this.validateLabel(t)}validateLabel(t){validateLabel(this,t)}validateHref(t){watchString(this,"_href",t,{required:!0})}validateQuote(t){watchString(this,"_quote",t,{required:!0})}validateVariant(t){watchValidator(this,"_variant",(t=>"block"===t||"inline"===t),new Set(["block","inline"]),t)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label||this._caption),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const t=showExpertSlot(this.state._quote);return h(Host,null,h("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?h("blockquote",{cite:this.state._href},this.state._quote,h("span",{"aria-hidden":t?void 0:"true",hidden:!t},h("slot",{name:"expert"}))):h("q",{cite:this.state._href},this.state._quote,h("span",{"aria-hidden":t?void 0:"true",hidden:!t},h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&h("figcaption",null,h("cite",null,h("kol-link",{_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_caption:["validateCaption"],_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}static get style(){return{default:KolQuoteDefaultStyle0}}},[33,"kol-quote",{_caption:[1],_label:[1],_href:[1],_quote:[1],_variant:[1],state:[32]},void 0,{_caption:["validateCaption"],_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-quote","kol-icon","kol-link","kol-link-wc","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-quote":customElements.get(t)||customElements.define(t,KolQuote$1);break;case"kol-icon":customElements.get(t)||defineCustomElement$6();break;case"kol-link":customElements.get(t)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolQuote=KolQuote$1,defineCustomElement=defineCustomElement$1;export{KolQuote,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{b as watchString,w as watchValidator,s as showExpertSlot}from"./prop.validators.js";import{d as defineCustomElement$6}from"./component.js";import{d as defineCustomElement$5}from"./shadow2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}cite,figure,q+figcaption{display:inline;margin:0;padding:0}blockquote:before{content:open-quote}blockquote::after{content:close-quote}cite:before{content:'—'}.block cite:before{padding-right:0.5em}.inline cite:before{padding:0.5em}",KolQuoteDefaultStyle0=defaultStyleCss,KolQuote$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._caption=void 0,this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateCaption(e){this.validateLabel(e)}validateLabel(e){validateLabel(this,e)}validateHref(e){watchString(this,"_href",e,{required:!0})}validateQuote(e){watchString(this,"_quote",e,{required:!0})}validateVariant(e){watchValidator(this,"_variant",(e=>"block"===e||"inline"===e),new Set(["block","inline"]),e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label||this._caption),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=showExpertSlot(this.state._quote);return h(Host,{key:"d7e18d09d749c969274be2240c8d499e76199c2f"},h("figure",{key:"18a29720fa2f2eaf8fa3c41912ce5b3c3fe31ff4",class:{[this.state._variant]:!0}},"block"===this.state._variant?h("blockquote",{cite:this.state._href},this.state._quote,h("span",{"aria-hidden":e?void 0:"true",hidden:!e},h("slot",{name:"expert"}))):h("q",{cite:this.state._href},this.state._quote,h("span",{"aria-hidden":e?void 0:"true",hidden:!e},h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&h("figcaption",null,h("cite",null,h("kol-link",{_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_caption:["validateCaption"],_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}static get style(){return{default:KolQuoteDefaultStyle0}}},[33,"kol-quote",{_caption:[1],_label:[1],_href:[1],_quote:[1],_variant:[1],state:[32]},void 0,{_caption:["validateCaption"],_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-quote","kol-icon","kol-link","kol-link-wc","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-quote":customElements.get(e)||customElements.define(e,KolQuote$1);break;case"kol-icon":customElements.get(e)||defineCustomElement$6();break;case"kol-link":customElements.get(e)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolQuote=KolQuote$1,defineCustomElement=defineCustomElement$1;export{KolQuote,defineCustomElement};

package/dist/components/kol-quote.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-quote.js","mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,qlCAAqlC,CAAC;AAC9mC,8BAAe,eAAe;;MCcjBA,UAAQ;;;;;;;;;wBAyB4B,QAAQ;qBAExB;YAC/B,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,QAAQ;SAClB;;IAGM,eAAe,CAAC,KAAc;QACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC1B;IAGM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC3B;IAGM,YAAY,CAAC,KAAoB;QACvC,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;YACjC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,aAAa,CAAC,KAAc;QAClC,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;YAClC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAA2B;QACjD,cAAc,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;KAC1H;IAEM,iBAAiB;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;IAEM,MAAM;QACZ,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxD,QACC,EAAC,IAAI,~~QACJ~~,~~cACC,~~KAAK,EAAE;gBACN,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI;aAC3B,IAEA,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,OAAO,IAC/B,kBAAY,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAChC,IAAI,CAAC,KAAK,CAAC,MAAM,EAClB,2BAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7E,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACK,KAEb,SAAG,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IACvB,IAAI,CAAC,KAAK,CAAC,MAAM,EAClB,2BAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7E,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACJ,CACJ,EACA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,KACrE,sBACC,gBACC,gBAAU,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAC,QAAQ,GAAG,CAC3E,CACK,CACb,CACO,CACH,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolQuote"],"sources":["src/components/quote/style.css?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["@import url(../style.css);\ncite,\nfigure,\nq + figcaption {\n\tdisplay: inline;\n\tmargin: 0;\n\tpadding: 0;\n}\nblockquote:before {\n\tcontent: open-quote;\n}\nblockquote::after {\n\tcontent: close-quote;\n}\ncite:before {\n\tcontent: '—';\n}\n.block cite:before {\n\tpadding-right: 0.5em;\n}\n.inline cite:before {\n\tpadding: 0.5em;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HrefPropType } from '../../types/props/href';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { showExpertSlot } from '../../utils/reuse';\nimport { API, KoliBriQuoteVariant, States } from './types';\n\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements API {\n\t/*\n\t Deprecated: Defines the visible caption of the component.\n\t * @deprecated Use _label.\n\t /\n\t@Prop() public _caption?: string;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label?: string;\n\n\t/\n\t Sets the target URI of the link or citation source.\n\t /\n\t@Prop() public _href!: HrefPropType;\n\n\t/\n\t Defines the text of the quote.\n\t /\n\t@Prop() public _quote!: string;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: States = {\n\t\t_href: '', // ⚠ required\n\t\t_quote: '', // ⚠ requireds\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'block' \|\| value === 'inline', new Set(['block', 'inline']), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label \|\| this._caption);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<figure\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t\t<blockquote cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</blockquote>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<q cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</q>\n\t\t\t\t\t)}\n\t\t\t\t\t{typeof this.state._label === 'string' && this.state._label.length > 0 && (\n\t\t\t\t\t\t<figcaption>\n\t\t\t\t\t\t\t<cite>\n\t\t\t\t\t\t\t\t<kol-link _href={this.state._href} _label={this.state._label} _target=\"_blank\" />\n\t\t\t\t\t\t\t</cite>\n\t\t\t\t\t\t</figcaption>\n\t\t\t\t\t)}\n\t\t\t\t</figure>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-quote.js","mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,qlCAAqlC,CAAC;AAC9mC,8BAAe,eAAe;;MCcjBA,UAAQ;;;;;;;;;wBAyB4B,QAAQ;qBAExB;YAC/B,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,QAAQ;SAClB;;IAGM,eAAe,CAAC,KAAc;QACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC1B;IAGM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC3B;IAGM,YAAY,CAAC,KAAoB;QACvC,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;YACjC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,aAAa,CAAC,KAAc;QAClC,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;YAClC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAA2B;QACjD,cAAc,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;KAC1H;IAEM,iBAAiB;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;IAEM,MAAM;QACZ,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxD,QACC,EAAC,IAAI,uDACJ,+DACC,KAAK,EAAE;gBACN,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI;aAC3B,IAEA,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,OAAO,IAC/B,kBAAY,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAChC,IAAI,CAAC,KAAK,CAAC,MAAM,EAClB,2BAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7E,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACK,KAEb,SAAG,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IACvB,IAAI,CAAC,KAAK,CAAC,MAAM,EAClB,2BAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7E,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACJ,CACJ,EACA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,KACrE,sBACC,gBACC,gBAAU,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAC,QAAQ,GAAG,CAC3E,CACK,CACb,CACO,CACH,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolQuote"],"sources":["src/components/quote/style.css?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["@import url(../style.css);\ncite,\nfigure,\nq + figcaption {\n\tdisplay: inline;\n\tmargin: 0;\n\tpadding: 0;\n}\nblockquote:before {\n\tcontent: open-quote;\n}\nblockquote::after {\n\tcontent: close-quote;\n}\ncite:before {\n\tcontent: '—';\n}\n.block cite:before {\n\tpadding-right: 0.5em;\n}\n.inline cite:before {\n\tpadding: 0.5em;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HrefPropType } from '../../types/props/href';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { showExpertSlot } from '../../utils/reuse';\nimport { API, KoliBriQuoteVariant, States } from './types';\n\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements API {\n\t/*\n\t Deprecated: Defines the visible caption of the component.\n\t * @deprecated Use _label.\n\t /\n\t@Prop() public _caption?: string;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label?: string;\n\n\t/\n\t Sets the target URI of the link or citation source.\n\t /\n\t@Prop() public _href!: HrefPropType;\n\n\t/\n\t Defines the text of the quote.\n\t /\n\t@Prop() public _quote!: string;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: States = {\n\t\t_href: '', // ⚠ required\n\t\t_quote: '', // ⚠ requireds\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'block' \|\| value === 'inline', new Set(['block', 'inline']), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label \|\| this._caption);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<figure\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t\t<blockquote cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</blockquote>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<q cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</q>\n\t\t\t\t\t)}\n\t\t\t\t\t{typeof this.state._label === 'string' && this.state._label.length > 0 && (\n\t\t\t\t\t\t<figcaption>\n\t\t\t\t\t\t\t<cite>\n\t\t\t\t\t\t\t\t<kol-link _href={this.state._href} _label={this.state._label} _target=\"_blank\" />\n\t\t\t\t\t\t\t</cite>\n\t\t\t\t\t\t</figcaption>\n\t\t\t\t\t)}\n\t\t\t\t</figure>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/kol-skip-nav.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation.js";import{d as defineCustomElement$5}from"./component.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}ul{display:grid;list-style:none;place-items:center}ul li{height:0}kol-link-wc a{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}kol-link-wc a:focus{background-color:#fff;left:unset;position:unset}",KolSkipNavDefaultStyle0=defaultStyleCss,KolSkipNav$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._ariaLabel=void 0,this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return h("nav",{"aria-label":this.state._label},h("ul",null,this.state._links.map(((e,t)=>h("li",{key:t},h("kol-link-wc",Object.assign({},e)))))))}validateAriaLabel(e){this.validateLabel(e)}validateLabel(e,t,a=!1){a||removeNavLabel(this.state._label),validateLabel(this,e,{required:!0}),addNavLabel(this.state._label)}validateLinks(e){watchNavLinks("KolSkipNav",this,e)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:KolSkipNavDefaultStyle0}}},[33,"kol-skip-nav",{_ariaLabel:[1,"_aria-label"],_label:[1],_links:[1],state:[32]},void 0,{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-skip-nav","kol-icon","kol-link-wc","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-skip-nav":customElements.get(e)||customElements.define(e,KolSkipNav$1);break;case"kol-icon":customElements.get(e)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolSkipNav=KolSkipNav$1,defineCustomElement=defineCustomElement$1;export{KolSkipNav,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation.js";import{d as defineCustomElement$5}from"./component.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}ul{display:grid;list-style:none;place-items:center}ul li{height:0}kol-link-wc a{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}kol-link-wc a:focus{background-color:#fff;left:unset;position:unset}",KolSkipNavDefaultStyle0=defaultStyleCss,KolSkipNav$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._ariaLabel=void 0,this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return h("nav",{key:"8ec0b3a2de8c96ad8538dad8db2ce8c5b2ad2667","aria-label":this.state._label},h("ul",{key:"644b35fbe9ac6d486c0e098a7e588878e13dac80"},this.state._links.map(((e,t)=>h("li",{key:t},h("kol-link-wc",Object.assign({},e)))))))}validateAriaLabel(e){this.validateLabel(e)}validateLabel(e,t,a=!1){a||removeNavLabel(this.state._label),validateLabel(this,e,{required:!0}),addNavLabel(this.state._label)}validateLinks(e){watchNavLinks("KolSkipNav",this,e)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:KolSkipNavDefaultStyle0}}},[33,"kol-skip-nav",{_ariaLabel:[1,"_aria-label"],_label:[1],_links:[1],state:[32]},void 0,{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-skip-nav","kol-icon","kol-link-wc","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-skip-nav":customElements.get(e)||customElements.define(e,KolSkipNav$1);break;case"kol-icon":customElements.get(e)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolSkipNav=KolSkipNav$1,defineCustomElement=defineCustomElement$1;export{KolSkipNav,defineCustomElement};

package/dist/components/kol-skip-nav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-skip-nav.js","mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,klCAAklC,CAAC;AAC3mC,gCAAe,eAAe;;MCejBA,YAAU;;;;;;;;qBAkCU;YAC/B,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,EAAE;SACV;;IApCM,MAAM;QACZ,QACC,~~yBAAiB~~,IAAI,CAAC,KAAK,CAAC,MAAM,IACjC,~~cACE~~,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,KAAa;YACrD,QACC,UAAI,GAAG,EAAE,KAAK,IACb,mCAAiB,IAAI,EAAgB,CACjC,EACJ;SACF,CAAC,CACE,CACA,EACL;KACF;IA4BM,iBAAiB,CAAC,KAAc;QACtC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC1B;IAGM,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;QACrF,IAAI,CAAC,OAAO,EAAE;YACb,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAClC;QACD,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;QACH,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAC/B;IAGM,aAAa,CAAC,KAAgC;QACpD,aAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACzC;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QACpE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;IAEM,oBAAoB;QAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolSkipNav"],"sources":["src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\nkol-link-wc a {\n\tleft: -99999px;\n\toverflow: hidden;\n\tposition: absolute;\n\tz-index: 9999999;\n\tline-height: 1em;\n}\nkol-link-wc a:focus {\n\tbackground-color: #fff;\n\tleft: unset;\n\tposition: unset;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { LinkProps } from '../link/types';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, States } from './types';\n\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link-wc {...link}></kol-link-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/*\n\t Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t \n\t @deprecated use _label instead\n\t /\n\t@Prop() public _ariaLabel?: string;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\n\n\t/\n\t Defines the list of links combined with their labels to render.\n\t /\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t/\n\t @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label \|\| this._ariaLabel, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-skip-nav.js","mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,klCAAklC,CAAC;AAC3mC,gCAAe,eAAe;;MCejBA,YAAU;;;;;;;;qBAkCU;YAC/B,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,EAAE;SACV;;IApCM,MAAM;QACZ,QACC,0EAAiB,IAAI,CAAC,KAAK,CAAC,MAAM,IACjC,6DACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,KAAa;YACrD,QACC,UAAI,GAAG,EAAE,KAAK,IACb,mCAAiB,IAAI,EAAgB,CACjC,EACJ;SACF,CAAC,CACE,CACA,EACL;KACF;IA4BM,iBAAiB,CAAC,KAAc;QACtC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC1B;IAGM,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;QACrF,IAAI,CAAC,OAAO,EAAE;YACb,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAClC;QACD,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;QACH,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAC/B;IAGM,aAAa,CAAC,KAAgC;QACpD,aAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACzC;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QACpE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;IAEM,oBAAoB;QAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolSkipNav"],"sources":["src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\nkol-link-wc a {\n\tleft: -99999px;\n\toverflow: hidden;\n\tposition: absolute;\n\tz-index: 9999999;\n\tline-height: 1em;\n}\nkol-link-wc a:focus {\n\tbackground-color: #fff;\n\tleft: unset;\n\tposition: unset;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { LinkProps } from '../link/types';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, States } from './types';\n\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link-wc {...link}></kol-link-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/*\n\t Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t \n\t @deprecated use _label instead\n\t /\n\t@Prop() public _ariaLabel?: string;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\n\n\t/\n\t Defines the list of links combined with their labels to render.\n\t /\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t/\n\t @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label \|\| this._ariaLabel, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}

package/dist/components/kol-span.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{d as defineCustomElement$3}from"./component.js";import{d as defineCustomElement$2}from"./component2.js";const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}",KolSpanDefaultStyle0=defaultStyleCss,KolSpan$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._hideLabel=!1,this._icon=void 0,this._icons=void 0,this._iconOnly=void 0,this._label=void 0}render(){return h("kol-span-wc",{_icons:this._icons||this._icon,_hideLabel:this._hideLabel,_label:this._label},h("slot",{name:"expert",slot:"expert"}))}static get style(){return{default:KolSpanDefaultStyle0}}},[33,"kol-span",{_hideLabel:[4,"_hide-label"],_icon:[1],_icons:[1],_iconOnly:[4,"_icon-only"],_label:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-span","kol-icon","kol-span-wc"].forEach((e=>{switch(e){case"kol-span":customElements.get(e)||customElements.define(e,KolSpan$1);break;case"kol-icon":customElements.get(e)||defineCustomElement$3();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolSpan=KolSpan$1,defineCustomElement=defineCustomElement$1;export{KolSpan,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{d as defineCustomElement$3}from"./component.js";import{d as defineCustomElement$2}from"./component2.js";const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}",KolSpanDefaultStyle0=defaultStyleCss,KolSpan$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._hideLabel=!1,this._icon=void 0,this._icons=void 0,this._iconOnly=void 0,this._label=void 0}render(){return h("kol-span-wc",{key:"76067a8adf112183b6d04b05ee9f521903eaf840",_icons:this._icons||this._icon,_hideLabel:this._hideLabel,_label:this._label},h("slot",{key:"df6518b1e9775d64c12295efe403403da58715f2",name:"expert",slot:"expert"}))}static get style(){return{default:KolSpanDefaultStyle0}}},[33,"kol-span",{_hideLabel:[4,"_hide-label"],_icon:[1],_icons:[1],_iconOnly:[4,"_icon-only"],_label:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-span","kol-icon","kol-span-wc"].forEach((e=>{switch(e){case"kol-span":customElements.get(e)||customElements.define(e,KolSpan$1);break;case"kol-icon":customElements.get(e)||defineCustomElement$3();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolSpan=KolSpan$1,defineCustomElement=defineCustomElement$1;export{KolSpan,defineCustomElement};

package/dist/components/kol-span.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-span.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,82BAA82B,CAAC;AACv4B,6BAAe,eAAe;;MCajBA,SAAO;;;;;0BAcmB,KAAK;;;;;;IAbpC,MAAM;QACZ,QACC,~~mBAAa~~,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAC/F,~~YAAM~~,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC5B,EACb;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolSpan"],"sources":["src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","src/components/span/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n","import { Component, h, JSX, Prop } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconsProp } from '../../types/icons';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icons={this._icons \|\| this._icon} _hideLabel={this._hideLabel} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/*\n\t Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t @deprecated Use _icons.\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriIconsProp>;\n\n\t/\n\t Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\n\n\t/\n\t Deprecated: Hides the label and shows the description in a Tooltip instead.\n\t * @deprecated use _hide-label\n\t /\n\t@Prop() public _iconOnly?: boolean;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n}\n"],"version":3}
1	+ {"file":"kol-span.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,82BAA82B,CAAC;AACv4B,6BAAe,eAAe;;MCajBA,SAAO;;;;;0BAcmB,KAAK;;;;;;IAbpC,MAAM;QACZ,QACC,oEAAa,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAC/F,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC5B,EACb;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolSpan"],"sources":["src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","src/components/span/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n","import { Component, h, JSX, Prop } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconsProp } from '../../types/icons';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icons={this._icons \|\| this._icon} _hideLabel={this._hideLabel} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/*\n\t Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t @deprecated Use _icons.\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriIconsProp>;\n\n\t/\n\t Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\n\n\t/\n\t Deprecated: Hides the label and shows the description in a Tooltip instead.\n\t * @deprecated use _hide-label\n\t /\n\t@Prop() public _iconOnly?: boolean;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n}\n"],"version":3}

package/dist/components/kol-spin.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{v as validateShow}from"./show.js";import{w as watchValidator}from"./prop.validators.js";const validateSpinVariant=(i,t)=>{watchValidator(i,"_variant",(i=>"cycle"===i||"dot"===i||"none"===i),new Set(["cycle","dot","none"]),t)},defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}.spin.cycle{width:3rem;height:3rem}.spin.cycle>.loader{display:block;width:100%;height:100%;border-radius:50%;position:relative;animation:2s linear infinite rotate}.spin.cycle>.loader::before{content:'';box-sizing:border-box;position:absolute;inset:0px;border-radius:50%;border:5px solid #333;animation:3s linear infinite prixClipFix}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes prixClipFix{0%{border-color:#fff;clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}25%{border-color:#666;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}50%{border-color:#fc0;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}75%{border-color:red;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}100%{border-color:#000;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}}@media (prefers-reduced-motion){.spin.cycle>.loader{animation-duration:4s}.spin.cycle>.loader::before{animation-duration:6s}}.spin.dot{height:1rem;width:3rem}.spin.dot>span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-radius:50%;border:0.1rem solid #fff;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}.spin.dot>span:first-child{background-color:#fc0;z-index:0;animation:1s infinite spin1;left:0.1rem}.spin.dot>span:nth-child(2){background-color:red;z-index:1;animation:1s infinite spin2;left:0.1rem}.spin.dot>span:nth-child(3){background-color:#000;z-index:1;animation:1s infinite spin2;left:1.1rem}.spin.dot>span:nth-child(4){background-color:#666;z-index:0;animation:1s infinite spin3;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}@media (prefers-reduced-motion){.spin.dot>span:first-child,.spin.dot>span:nth-child(2),.spin.dot>span:nth-child(3),.spin.dot>span:nth-child(4){animation-duration:2s}}.spin{display:block;padding:0.125rem;position:relative}",KolSpinDefaultStyle0=defaultStyleCss;function renderSpin(i){switch(i){case"cycle":return h("span",{class:"loader"});case"none":return h("slot",{name:"expert"});default:return h(Fragment,null,h("span",{class:"bg-spin-1"}),h("span",{class:"bg-spin-2"}),h("span",{class:"bg-spin-3"}),h("span",{class:"bg-neutral"}))}}const KolSpin$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return h(Host,null,this.state._show?h("span",{"aria-busy":"true","aria-label":translate("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},renderSpin(this.state._variant)):this.showToggled&&h("span",{"aria-label":translate("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,validateShow(this,i)}validateVariant(i){validateSpinVariant(this,i)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}static get style(){return{default:KolSpinDefaultStyle0}}},[33,"kol-spin",{_show:[1540],_variant:[1],state:[32]},void 0,{_show:["validateShow"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-spin"].forEach((i=>{if("kol-spin"===i)customElements.get(i)||customElements.define(i,KolSpin$1)}))}const KolSpin=KolSpin$1,defineCustomElement=defineCustomElement$1;export{KolSpin,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{v as validateShow}from"./show.js";import{w as watchValidator}from"./prop.validators.js";const validateSpinVariant=(i,t)=>{watchValidator(i,"_variant",(i=>"cycle"===i||"dot"===i||"none"===i),new Set(["cycle","dot","none"]),t)},defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}.spin.cycle{width:3rem;height:3rem}.spin.cycle>.loader{display:block;width:100%;height:100%;border-radius:50%;position:relative;animation:2s linear infinite rotate}.spin.cycle>.loader::before{content:'';box-sizing:border-box;position:absolute;inset:0px;border-radius:50%;border:5px solid #333;animation:3s linear infinite prixClipFix}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes prixClipFix{0%{border-color:#fff;clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}25%{border-color:#666;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}50%{border-color:#fc0;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}75%{border-color:red;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}100%{border-color:#000;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}}@media (prefers-reduced-motion){.spin.cycle>.loader{animation-duration:4s}.spin.cycle>.loader::before{animation-duration:6s}}.spin.dot{height:1rem;width:3rem}.spin.dot>span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-radius:50%;border:0.1rem solid #fff;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}.spin.dot>span:first-child{background-color:#fc0;z-index:0;animation:1s infinite spin1;left:0.1rem}.spin.dot>span:nth-child(2){background-color:red;z-index:1;animation:1s infinite spin2;left:0.1rem}.spin.dot>span:nth-child(3){background-color:#000;z-index:1;animation:1s infinite spin2;left:1.1rem}.spin.dot>span:nth-child(4){background-color:#666;z-index:0;animation:1s infinite spin3;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}@media (prefers-reduced-motion){.spin.dot>span:first-child,.spin.dot>span:nth-child(2),.spin.dot>span:nth-child(3),.spin.dot>span:nth-child(4){animation-duration:2s}}.spin{display:block;padding:0.125rem;position:relative}",KolSpinDefaultStyle0=defaultStyleCss;function renderSpin(i){switch(i){case"cycle":return h("span",{class:"loader"});case"none":return h("slot",{name:"expert"});default:return h(Fragment,null,h("span",{class:"bg-spin-1"}),h("span",{class:"bg-spin-2"}),h("span",{class:"bg-spin-3"}),h("span",{class:"bg-neutral"}))}}const KolSpin$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return h(Host,{key:"acea6ca3c535ee30fa850c122b56704db547e8e3"},this.state._show?h("span",{"aria-busy":"true","aria-label":translate("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},renderSpin(this.state._variant)):this.showToggled&&h("span",{"aria-label":translate("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,validateShow(this,i)}validateVariant(i){validateSpinVariant(this,i)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}static get style(){return{default:KolSpinDefaultStyle0}}},[33,"kol-spin",{_show:[1540],_variant:[1],state:[32]},void 0,{_show:["validateShow"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-spin"].forEach((i=>{if("kol-spin"===i)customElements.get(i)||customElements.define(i,KolSpin$1)}))}const KolSpin=KolSpin$1,defineCustomElement=defineCustomElement$1;export{KolSpin,defineCustomElement};

package/dist/components/kol-spin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-spin.js","mappings":";;;;;;;;AAmBO,MAAM,mBAAmB,GAAG,CAAC,SAAoC,EAAE,KAA2B;IACpG,cAAc,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,MAAM,EAAE,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AACtJ,CAAC;;ACrBD,MAAM,eAAe,GAAG,izFAAizF,CAAC;AAC10F,6BAAe,eAAe;;ACM9B,SAAS,UAAU,CAAC,OAA4B;IAC/C,QAAQ,OAAO;QACd,KAAK,OAAO;YACX,OAAO,YAAM,KAAK,EAAC,QAAQ,GAAQ,CAAC;QACrC,KAAK,MAAM;YACV,OAAO,YAAM,IAAI,EAAC,QAAQ,GAAQ,CAAC;QACpC;YACC,QACC,EAAC,QAAQ,QACR,YAAM,KAAK,EAAC,WAAW,GAAQ,EAC/B,YAAM,KAAK,EAAC,WAAW,GAAQ,EAC/B,YAAM,KAAK,EAAC,WAAW,GAAQ,EAC/B,YAAM,KAAK,EAAC,YAAY,GAAQ,CACtB,EACV;KACH;AACF,CAAC;MASYA,SAAO;;;;;QACX,gBAAW,GAAG,KAAK,CAAC;qBA8BqC,KAAK;wBAKtB,KAAK;qBAErB;YAC/B,QAAQ,EAAE,KAAK;SACf;;IArCM,MAAM;QACZ,QACC,EAAC,IAAI,~~QACH~~,IAAI,CAAC,KAAK,CAAC,KAAK,IAChB,yBACW,MAAM,gBACJ,SAAS,CAAC,oBAAoB,CAAC,eACjC,QAAQ,EAClB,KAAK,EAAE;gBACN,IAAI,EAAE,IAAI;gBACV,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI;aAE3B,EACD,IAAI,EAAC,OAAO,IAEX,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAC1B,KAEP,IAAI,CAAC,WAAW,IAAI,0BAAkB,SAAS,CAAC,iBAAiB,CAAC,eAAY,OAAO,eAAW,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC7H,CACK,EACN;KACF;IAkBM,YAAY,CAAC,KAAoB;QACvC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;QACrE,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC1B;IAGM,eAAe,CAAC,KAA2B;QACjD,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KACjC;IAEM,iBAAiB;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolSpin"],"sources":["src/types/props/variant/spin.ts","src/components/spin/style.css?tag=kol-spin&mode=default&encapsulation=shadow","src/components/spin/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../../utils/prop.validators';\n\n/* types /\n/\n Loading-spinner\n * - https://github.com/vineethtrv/css-loader\n /\nexport type SpinVariantPropType = 'cycle' \| 'dot' \| 'none';\n\n/\n Defines the variant of spin navigation.\n /\nexport type PropSpinVariant = {\n\tvariant: SpinVariantPropType;\n};\n\n/ validator /\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariantPropType): void => {\n\twatchValidator(component, '_variant', (value) => value === 'cycle' \|\| value === 'dot' \|\| value === 'none', new Set(['cycle', 'dot', 'none']), value);\n};\n","@import url(../style.css);\n@import url(cycle.css);\n@import url(dot.css);\n.spin {\n\tdisplay: block;\n\tpadding: 0.125rem;\n\tposition: relative;\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { ShowPropType, validateShow } from '../../types/props/show';\nimport { SpinVariantPropType, validateSpinVariant } from '../../types/props/variant/spin';\nimport { API, States } from './types';\n\nfunction renderSpin(variant: SpinVariantPropType): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<Fragment>\n\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t</Fragment>\n\t\t\t);\n\t}\n}\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements API {\n\tprivate showToggled = false;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={translate('kol-action-running')}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\tspin: true,\n\t\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t\t\t/ [`spin--${this.state._variant}`]: true, witch benefit have this notation? /\n\t\t\t\t\t\t}}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={translate('kol-action-done')} aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: SpinVariantPropType = 'dot';\n\n\t@State() public state: States = {\n\t\t_variant: 'dot',\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\tvalidateShow(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariantPropType): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-spin.js","mappings":";;;;;;;;AAmBO,MAAM,mBAAmB,GAAG,CAAC,SAAoC,EAAE,KAA2B;IACpG,cAAc,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,MAAM,EAAE,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AACtJ,CAAC;;ACrBD,MAAM,eAAe,GAAG,izFAAizF,CAAC;AAC10F,6BAAe,eAAe;;ACM9B,SAAS,UAAU,CAAC,OAA4B;IAC/C,QAAQ,OAAO;QACd,KAAK,OAAO;YACX,OAAO,YAAM,KAAK,EAAC,QAAQ,GAAQ,CAAC;QACrC,KAAK,MAAM;YACV,OAAO,YAAM,IAAI,EAAC,QAAQ,GAAQ,CAAC;QACpC;YACC,QACC,EAAC,QAAQ,QACR,YAAM,KAAK,EAAC,WAAW,GAAQ,EAC/B,YAAM,KAAK,EAAC,WAAW,GAAQ,EAC/B,YAAM,KAAK,EAAC,WAAW,GAAQ,EAC/B,YAAM,KAAK,EAAC,YAAY,GAAQ,CACtB,EACV;KACH;AACF,CAAC;MASYA,SAAO;;;;;QACX,gBAAW,GAAG,KAAK,CAAC;qBA8BqC,KAAK;wBAKtB,KAAK;qBAErB;YAC/B,QAAQ,EAAE,KAAK;SACf;;IArCM,MAAM;QACZ,QACC,EAAC,IAAI,uDACH,IAAI,CAAC,KAAK,CAAC,KAAK,IAChB,yBACW,MAAM,gBACJ,SAAS,CAAC,oBAAoB,CAAC,eACjC,QAAQ,EAClB,KAAK,EAAE;gBACN,IAAI,EAAE,IAAI;gBACV,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI;aAE3B,EACD,IAAI,EAAC,OAAO,IAEX,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAC1B,KAEP,IAAI,CAAC,WAAW,IAAI,0BAAkB,SAAS,CAAC,iBAAiB,CAAC,eAAY,OAAO,eAAW,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC7H,CACK,EACN;KACF;IAkBM,YAAY,CAAC,KAAoB;QACvC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;QACrE,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC1B;IAGM,eAAe,CAAC,KAA2B;QACjD,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KACjC;IAEM,iBAAiB;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolSpin"],"sources":["src/types/props/variant/spin.ts","src/components/spin/style.css?tag=kol-spin&mode=default&encapsulation=shadow","src/components/spin/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../../utils/prop.validators';\n\n/* types /\n/\n Loading-spinner\n * - https://github.com/vineethtrv/css-loader\n /\nexport type SpinVariantPropType = 'cycle' \| 'dot' \| 'none';\n\n/\n Defines the variant of spin navigation.\n /\nexport type PropSpinVariant = {\n\tvariant: SpinVariantPropType;\n};\n\n/ validator /\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariantPropType): void => {\n\twatchValidator(component, '_variant', (value) => value === 'cycle' \|\| value === 'dot' \|\| value === 'none', new Set(['cycle', 'dot', 'none']), value);\n};\n","@import url(../style.css);\n@import url(cycle.css);\n@import url(dot.css);\n.spin {\n\tdisplay: block;\n\tpadding: 0.125rem;\n\tposition: relative;\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { ShowPropType, validateShow } from '../../types/props/show';\nimport { SpinVariantPropType, validateSpinVariant } from '../../types/props/variant/spin';\nimport { API, States } from './types';\n\nfunction renderSpin(variant: SpinVariantPropType): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<Fragment>\n\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t</Fragment>\n\t\t\t);\n\t}\n}\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements API {\n\tprivate showToggled = false;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={translate('kol-action-running')}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\tspin: true,\n\t\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t\t\t/ [`spin--${this.state._variant}`]: true, witch benefit have this notation? /\n\t\t\t\t\t\t}}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={translate('kol-action-done')} aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: SpinVariantPropType = 'dot';\n\n\t@State() public state: States = {\n\t\t_variant: 'dot',\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\tvalidateShow(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariantPropType): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"version":3}

package/dist/components/kol-split-button.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateShow}from"./show.js";import{d as defineCustomElement$5}from"./component5.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host{display:flex;position:relative}.main-button{flex-grow:1;text-align:left}.main-button kol-span-wc{place-items:start}.secondary-button button{height:100%}.horizontal-line{background-color:rgba(0, 0, 0, 0.2);border-radius:2px;height:70%;margin-block:auto;width:1px}.popover{height:0;left:0;min-width:100%;overflow:hidden;position:absolute;top:100%;transition:height 0.3s ease-in-out}.popover-content{inset:0 0 auto 0;min-width:100%;position:absolute}",KolSplitButtonDefaultStyle0=defaultStyleCss,KolSplitButton$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.clickButtonHandler={onClick:t=>{var o,e;"function"==typeof(null===(o=this._on)||void 0===o?void 0:o.onClick)?null===(e=this._on)||void 0===e||e.onClick(t,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:()=>this.toggleDropdown()},this.openDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height=`${this.dropdownContent.clientHeight}px`,this.state=Object.assign(Object.assign({},this.state),{_show:!0}))},this.closeDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height="",this.state=Object.assign(Object.assign({},this.state),{_show:!1}))},this.toggleDropdown=t=>{("boolean"==typeof t?t:!this.state._show)?this.openDropdown():this.closeDropdown()},this.forceCounter=100,this.forceOpenDropdown=()=>{var t;this.forceCounter>0&&((null===(t=this.dropdownContent)||void 0===t?void 0:t.clientHeight)?this.openDropdown():setTimeout(this.forceOpenDropdown,10),this.forceCounter--)},this.catchDropdownElements=t=>{t&&(this.dropdown=t,setTimeout((()=>{this.dropdownContent=t.firstChild,this._show&&this.forceOpenDropdown()})))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._show=!1,this._showDropdown=!1,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){return h(Host,null,h("kol-button-wc",{class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons||this._icon,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),h("div",{class:"horizontal-line"}),h("kol-button-wc",{class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:"dropdown "+(this.state._show?"schließen":"öffnen"),_on:this.clickToggleHandler}),h("div",{class:"popover",ref:this.catchDropdownElements},h("div",{class:"popover-content"},h("slot",null))))}validateShowDropdown(t){this.validateShow(t)}validateShow(t){validateShow(this,t,{hooks:{afterPatch:t=>{this.toggleDropdown(!!t)}}})}componentWillLoad(){this.validateShow(this._show||this._show)}static get watchers(){return{_show:["validateShowDropdown","validateShow"]}}static get style(){return{default:KolSplitButtonDefaultStyle0}}},[33,"kol-split-button",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaExpanded:[4,"_aria-expanded"],_ariaLabel:[1,"_aria-label"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icon:[1],_icons:[1],_id:[1],_label:[1],_name:[1],_on:[16],_role:[1],_syncValueBySelector:[1,"_sync-value-by-selector"],_show:[1540],_showDropdown:[1540,"_show-dropdown"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],state:[32]},void 0,{_show:["validateShowDropdown","validateShow"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-split-button","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-split-button":customElements.get(t)||customElements.define(t,KolSplitButton$1);break;case"kol-button-wc":customElements.get(t)||defineCustomElement$5();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolSplitButton=KolSplitButton$1,defineCustomElement=defineCustomElement$1;export{KolSplitButton,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateShow}from"./show.js";import{d as defineCustomElement$5}from"./component5.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host{display:flex;position:relative}.main-button{flex-grow:1;text-align:left}.main-button kol-span-wc{place-items:start}.secondary-button button{height:100%}.horizontal-line{background-color:rgba(0, 0, 0, 0.2);border-radius:2px;height:70%;margin-block:auto;width:1px}.popover{height:0;left:0;min-width:100%;overflow:hidden;position:absolute;top:100%;transition:height 0.3s ease-in-out}.popover-content{inset:0 0 auto 0;min-width:100%;position:absolute}",KolSplitButtonDefaultStyle0=defaultStyleCss,KolSplitButton$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.clickButtonHandler={onClick:t=>{var o,e;"function"==typeof(null===(o=this._on)||void 0===o?void 0:o.onClick)?null===(e=this._on)||void 0===e||e.onClick(t,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:()=>this.toggleDropdown()},this.openDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height=`${this.dropdownContent.clientHeight}px`,this.state=Object.assign(Object.assign({},this.state),{_show:!0}))},this.closeDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height="",this.state=Object.assign(Object.assign({},this.state),{_show:!1}))},this.toggleDropdown=t=>{("boolean"==typeof t?t:!this.state._show)?this.openDropdown():this.closeDropdown()},this.forceCounter=100,this.forceOpenDropdown=()=>{var t;this.forceCounter>0&&((null===(t=this.dropdownContent)||void 0===t?void 0:t.clientHeight)?this.openDropdown():setTimeout(this.forceOpenDropdown,10),this.forceCounter--)},this.catchDropdownElements=t=>{t&&(this.dropdown=t,setTimeout((()=>{this.dropdownContent=t.firstChild,this._show&&this.forceOpenDropdown()})))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._show=!1,this._showDropdown=!1,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){return h(Host,{key:"77a40c57394a116af5fd949db3e0db294c78ed03"},h("kol-button-wc",{key:"f2351f1fc873029a149d3cadba087b6ae454b67c",class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons||this._icon,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),h("div",{key:"8ff44a6250eefc056b9ce78916332aef97e05a8f",class:"horizontal-line"}),h("kol-button-wc",{key:"cfa410189c5cf8f2cb06ec2f3e02383ba4ae431b",class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:"dropdown "+(this.state._show?"schließen":"öffnen"),_on:this.clickToggleHandler}),h("div",{key:"d9d4d37a72a781e57bacb4f5c501c6e2a98459b3",class:"popover",ref:this.catchDropdownElements},h("div",{key:"4517c49f73440929a898250a88b31c2b4cd3e19d",class:"popover-content"},h("slot",{key:"5da8c5c3489e6fc93e50f4998d3d31e2dc216307"}))))}validateShowDropdown(t){this.validateShow(t)}validateShow(t){validateShow(this,t,{hooks:{afterPatch:t=>{this.toggleDropdown(!!t)}}})}componentWillLoad(){this.validateShow(this._show||this._show)}static get watchers(){return{_show:["validateShowDropdown","validateShow"]}}static get style(){return{default:KolSplitButtonDefaultStyle0}}},[33,"kol-split-button",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaExpanded:[4,"_aria-expanded"],_ariaLabel:[1,"_aria-label"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icon:[1],_icons:[1],_id:[1],_label:[1],_name:[1],_on:[16],_role:[1],_syncValueBySelector:[1,"_sync-value-by-selector"],_show:[1540],_showDropdown:[1540,"_show-dropdown"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],state:[32]},void 0,{_show:["validateShowDropdown","validateShow"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-split-button","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-split-button":customElements.get(t)||customElements.define(t,KolSplitButton$1);break;case"kol-button-wc":customElements.get(t)||defineCustomElement$5();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolSplitButton=KolSplitButton$1,defineCustomElement=defineCustomElement$1;export{KolSplitButton,defineCustomElement};

package/dist/components/kol-split-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-split-button.js","mappings":"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","names":["KolSplitButton"],"sources":["src/components/split-button/style.css?tag=kol-split-button&mode=default&encapsulation=shadow","src/components/split-button/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host {\n\tdisplay: flex;\n\tposition: relative;\n}\n.main-button {\n\tflex-grow: 1;\n\ttext-align: left;\n}\n.main-button kol-span-wc {\n\tplace-items: start;\n}\n.secondary-button button {\n\theight: 100%;\n}\n.horizontal-line {\n\tbackground-color: rgba(0, 0, 0, 0.2);\n\tborder-radius: 2px;\n\theight: 70%;\n\tmargin-block: auto;\n\twidth: 1px;\n}\n/* popover /\n.popover {\n\theight: 0;\n\tleft: 0;\n\tmin-width: 100%;\n\toverflow: hidden;\n\tposition: absolute;\n\ttop: 100%;\n\ttransition: height 0.3s ease-in-out;\n}\n.popover-content {\n\tinset: 0 0 auto 0;\n\tmin-width: 100%;\n\tposition: absolute;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';\nimport { ButtonCallbacksPropType } from '../../types/props/button-callbacks';\nimport { ButtonTypePropType } from '../../types/props/button-type';\nimport { ButtonVariantPropType } from '../../types/props/button-variant';\nimport { CustomClassPropType } from '../../types/props/custom-class';\nimport { IconsPropType } from '../../types/props/icons';\nimport { LabelPropType } from '../../types/props/label';\nimport { validateShow } from '../../types/props/show';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { StencilUnknown } from '../../types/unknown';\nimport { API, States } from './types';\n\n/\n @slot - Ermöglicht das Einfügen beliebigen HTMLs in das dropdown.\n /\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSplitButton implements API {\n\tprivate dropdown: HTMLDivElement \| undefined;\n\tprivate dropdownContent: HTMLDivElement \| undefined;\n\n\tprivate readonly clickButtonHandler = {\n\t\tonClick: (e: MouseEvent) => {\n\t\t\tif (typeof this._on?.onClick === 'function') {\n\t\t\t\t// TODO: this._on is not validated\n\t\t\t\tthis._on?.onClick(e, this._value);\n\t\t\t} else {\n\t\t\t\tthis.toggleDropdown();\n\t\t\t}\n\t\t},\n\t};\n\tprivate readonly clickToggleHandler = { onClick: () => this.toggleDropdown() };\n\n\tprivate readonly openDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = `${this.dropdownContent.clientHeight}px`;\n\t\t\tthis.state = { ...this.state, _show: true };\n\t\t}\n\t};\n\tprivate readonly closeDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = ``;\n\t\t\tthis.state = { ...this.state, _show: false };\n\t\t}\n\t};\n\tprivate readonly toggleDropdown = (value?: boolean) => {\n\t\tconst openIt = typeof value === 'boolean' ? value : !this.state._show;\n\t\tif (openIt) this.openDropdown();\n\t\telse this.closeDropdown();\n\t};\n\tprivate forceCounter = 100; // because the dropdown could be empty\n\tprivate readonly forceOpenDropdown = () => {\n\t\tif (this.forceCounter > 0) {\n\t\t\tif (this.dropdownContent?.clientHeight) this.openDropdown();\n\t\t\telse setTimeout(this.forceOpenDropdown, 10);\n\t\t\tthis.forceCounter--;\n\t\t}\n\t};\n\n\tprivate readonly catchDropdownElements = (e?: HTMLDivElement \| null) => {\n\t\tif (e) {\n\t\t\tthis.dropdown = e;\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.dropdownContent = e.firstChild as HTMLDivElement;\n\t\t\t\tif (this._show) this.forceOpenDropdown();\n\t\t\t});\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'main-button': true,\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_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icons={this._icons \|\| this._icon}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this.clickButtonHandler}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"horizontal-line\"></div>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass=\"secondary-button\"\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_icons=\"codicon codicon-triangle-down\"\n\t\t\t\t\t_label={`dropdown ${this.state._show ? 'schließen' : 'öffnen'}`} // @todo: translate\n\t\t\t\t\t_on={this.clickToggleHandler}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"popover\" ref={this.catchDropdownElements}>\n\t\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Defines which elements are controlled by this component. (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 Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t /\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/\n\t Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t \n\t @deprecated use _label instead\n\t /\n\t@Prop() public _ariaLabel?: string;\n\n\t/\n\t Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t /\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/\n\t Defines the custom class attribute if _variant=\"custom\" is set.\n\t /\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/\n\t Makes the element not focusable and ignore all events.\n\t /\n\t@Prop() public _disabled?: boolean = false;\n\n\t/\n\t Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t @deprecated Use _icons.\n\t /\n\t@Prop() public _icon?: IconsPropType;\n\n\t/\n\t Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icons?: IconsPropType;\n\n\t/\n\t Defines the internal ID of the primary component element.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label!: LabelPropType;\n\n\t/\n\t Defines the technical name of an input field.\n\t /\n\t@Prop() public _name?: string;\n\n\t/\n\t Defines the callback functions for button events.\n\t /\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/\n\t Defines the role of the components primary element.\n\t /\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/\n\t Selector for synchronizing the value with another input element.\n\t * @internal\n\t /\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/\n\t Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t/\n\t Deprecated: Defines whether to show the dropdown menu.\n\t * @deprecated use _show instead\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _showDropdown?: boolean = false;\n\n\t/\n\t Defines which tab-index the primary element of the component has. (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 Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t /\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/\n\t Defines either the type of the component or of the components interactive element.\n\t /\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/\n\t Defines the value that the button emits on click.\n\t /\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t /\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: States = {\n\t\t_show: false,\n\t};\n\n\t/\n\t @deprecated will be removed in the next major version\n\t */\n\t@Watch('_show')\n\tpublic validateShowDropdown(value?: boolean): void {\n\t\tthis.validateShow(value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tvalidateShow(this, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: (value) => {\n\t\t\t\t\tthis.toggleDropdown(!!value);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show \|\| this._show);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-split-button.js","mappings":"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","names":["KolSplitButton"],"sources":["src/components/split-button/style.css?tag=kol-split-button&mode=default&encapsulation=shadow","src/components/split-button/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host {\n\tdisplay: flex;\n\tposition: relative;\n}\n.main-button {\n\tflex-grow: 1;\n\ttext-align: left;\n}\n.main-button kol-span-wc {\n\tplace-items: start;\n}\n.secondary-button button {\n\theight: 100%;\n}\n.horizontal-line {\n\tbackground-color: rgba(0, 0, 0, 0.2);\n\tborder-radius: 2px;\n\theight: 70%;\n\tmargin-block: auto;\n\twidth: 1px;\n}\n/* popover /\n.popover {\n\theight: 0;\n\tleft: 0;\n\tmin-width: 100%;\n\toverflow: hidden;\n\tposition: absolute;\n\ttop: 100%;\n\ttransition: height 0.3s ease-in-out;\n}\n.popover-content {\n\tinset: 0 0 auto 0;\n\tmin-width: 100%;\n\tposition: absolute;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';\nimport { ButtonCallbacksPropType } from '../../types/props/button-callbacks';\nimport { ButtonTypePropType } from '../../types/props/button-type';\nimport { ButtonVariantPropType } from '../../types/props/button-variant';\nimport { CustomClassPropType } from '../../types/props/custom-class';\nimport { IconsPropType } from '../../types/props/icons';\nimport { LabelPropType } from '../../types/props/label';\nimport { validateShow } from '../../types/props/show';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { StencilUnknown } from '../../types/unknown';\nimport { API, States } from './types';\n\n/\n @slot - Ermöglicht das Einfügen beliebigen HTMLs in das dropdown.\n /\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSplitButton implements API {\n\tprivate dropdown: HTMLDivElement \| undefined;\n\tprivate dropdownContent: HTMLDivElement \| undefined;\n\n\tprivate readonly clickButtonHandler = {\n\t\tonClick: (e: MouseEvent) => {\n\t\t\tif (typeof this._on?.onClick === 'function') {\n\t\t\t\t// TODO: this._on is not validated\n\t\t\t\tthis._on?.onClick(e, this._value);\n\t\t\t} else {\n\t\t\t\tthis.toggleDropdown();\n\t\t\t}\n\t\t},\n\t};\n\tprivate readonly clickToggleHandler = { onClick: () => this.toggleDropdown() };\n\n\tprivate readonly openDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = `${this.dropdownContent.clientHeight}px`;\n\t\t\tthis.state = { ...this.state, _show: true };\n\t\t}\n\t};\n\tprivate readonly closeDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = ``;\n\t\t\tthis.state = { ...this.state, _show: false };\n\t\t}\n\t};\n\tprivate readonly toggleDropdown = (value?: boolean) => {\n\t\tconst openIt = typeof value === 'boolean' ? value : !this.state._show;\n\t\tif (openIt) this.openDropdown();\n\t\telse this.closeDropdown();\n\t};\n\tprivate forceCounter = 100; // because the dropdown could be empty\n\tprivate readonly forceOpenDropdown = () => {\n\t\tif (this.forceCounter > 0) {\n\t\t\tif (this.dropdownContent?.clientHeight) this.openDropdown();\n\t\t\telse setTimeout(this.forceOpenDropdown, 10);\n\t\t\tthis.forceCounter--;\n\t\t}\n\t};\n\n\tprivate readonly catchDropdownElements = (e?: HTMLDivElement \| null) => {\n\t\tif (e) {\n\t\t\tthis.dropdown = e;\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.dropdownContent = e.firstChild as HTMLDivElement;\n\t\t\t\tif (this._show) this.forceOpenDropdown();\n\t\t\t});\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'main-button': true,\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_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icons={this._icons \|\| this._icon}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this.clickButtonHandler}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"horizontal-line\"></div>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass=\"secondary-button\"\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_icons=\"codicon codicon-triangle-down\"\n\t\t\t\t\t_label={`dropdown ${this.state._show ? 'schließen' : 'öffnen'}`} // @todo: translate\n\t\t\t\t\t_on={this.clickToggleHandler}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"popover\" ref={this.catchDropdownElements}>\n\t\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Defines which elements are controlled by this component. (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 Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t /\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/\n\t Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t \n\t @deprecated use _label instead\n\t /\n\t@Prop() public _ariaLabel?: string;\n\n\t/\n\t Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t /\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/\n\t Defines the custom class attribute if _variant=\"custom\" is set.\n\t /\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/\n\t Makes the element not focusable and ignore all events.\n\t /\n\t@Prop() public _disabled?: boolean = false;\n\n\t/\n\t Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t @deprecated Use _icons.\n\t /\n\t@Prop() public _icon?: IconsPropType;\n\n\t/\n\t Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icons?: IconsPropType;\n\n\t/\n\t Defines the internal ID of the primary component element.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label!: LabelPropType;\n\n\t/\n\t Defines the technical name of an input field.\n\t /\n\t@Prop() public _name?: string;\n\n\t/\n\t Defines the callback functions for button events.\n\t /\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/\n\t Defines the role of the components primary element.\n\t /\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/\n\t Selector for synchronizing the value with another input element.\n\t * @internal\n\t /\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/\n\t Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t/\n\t Deprecated: Defines whether to show the dropdown menu.\n\t * @deprecated use _show instead\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _showDropdown?: boolean = false;\n\n\t/\n\t Defines which tab-index the primary element of the component has. (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 Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t /\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/\n\t Defines either the type of the component or of the components interactive element.\n\t /\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/\n\t Defines the value that the button emits on click.\n\t /\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t /\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: States = {\n\t\t_show: false,\n\t};\n\n\t/\n\t @deprecated will be removed in the next major version\n\t */\n\t@Watch('_show')\n\tpublic validateShowDropdown(value?: boolean): void {\n\t\tthis.validateShow(value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tvalidateShow(this, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: (value) => {\n\t\t\t\t\tthis.toggleDropdown(!!value);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show \|\| this._show);\n\t}\n}\n"],"version":3}

package/dist/components/kol-symbol.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{v as validateLabel}from"./label.js";import{b as watchString}from"./prop.validators.js";const KolSymbol$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this._ariaLabel=void 0,this._label=void 0,this._symbol=void 0,this.state={_label:translate("kol-warning"),_symbol:"…"}}render(){return h(Host,null,h("span",{"aria-label":this.state._label,role:"term"},this.state._symbol))}validateAriaLabel(e){this.validateLabel(e)}validateLabel(e){validateLabel(this,e,{defaultValue:translate("kol-warning")})}validateSymbol(e){watchString(this,"_symbol",e,{required:!0})}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel),this.validateSymbol(this._symbol)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_symbol:["validateSymbol"]}}},[0,"kol-symbol",{_ariaLabel:[1,"_aria-label"],_label:[1],_symbol:[1],state:[32]},void 0,{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_symbol:["validateSymbol"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-symbol"].forEach((e=>{if("kol-symbol"===e)customElements.get(e)||customElements.define(e,KolSymbol$1)}))}const KolSymbol=KolSymbol$1,defineCustomElement=defineCustomElement$1;export{KolSymbol,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{v as validateLabel}from"./label.js";import{b as watchString}from"./prop.validators.js";const KolSymbol$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this._ariaLabel=void 0,this._label=void 0,this._symbol=void 0,this.state={_label:translate("kol-warning"),_symbol:"…"}}render(){return h(Host,{key:"2d5a491f86548d3ae09f56e3445ca224fe6a7db9"},h("span",{key:"8c23febba820e390d90650f88affa5fe59325a5f","aria-label":this.state._label,role:"term"},this.state._symbol))}validateAriaLabel(e){this.validateLabel(e)}validateLabel(e){validateLabel(this,e,{defaultValue:translate("kol-warning")})}validateSymbol(e){watchString(this,"_symbol",e,{required:!0})}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel),this.validateSymbol(this._symbol)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_symbol:["validateSymbol"]}}},[0,"kol-symbol",{_ariaLabel:[1,"_aria-label"],_label:[1],_symbol:[1],state:[32]},void 0,{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_symbol:["validateSymbol"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-symbol"].forEach((e=>{if("kol-symbol"===e)customElements.get(e)||customElements.define(e,KolSymbol$1)}))}const KolSymbol=KolSymbol$1,defineCustomElement=defineCustomElement$1;export{KolSymbol,defineCustomElement};

package/dist/components/kol-symbol.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-symbol.js","mappings":";;;;;;;;MAWaA,WAAS;;;;;;;qBA4BW;YAC/B,MAAM,EAAE,SAAS,CAAC,aAAa,CAAC;YAChC,OAAO,EAAE,GAAG;SACZ;;IA9BM,MAAM;QACZ,QACC,EAAC,IAAI,~~QACJ~~,~~0BAAkB~~,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,IAC9C,IAAI,CAAC,KAAK,CAAC,OAAO,CACb,CACD,EACN;KACF;IA4BM,iBAAiB,CAAC,KAAc;QACtC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC1B;IAGM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,YAAY,EAAE,SAAS,CAAC,aAAa,CAAC;SACtC,CAAC,CAAC;KACH;IAGM,cAAc,CAAC,KAAc;QACnC,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE;YACnC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;QACnD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolSymbol"],"sources":["src/components/symbol/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchString } from '../../utils/prop.validators';\nimport { API, States } from './types';\n\n@Component({\n\ttag: 'kol-symbol',\n\tshadow: false,\n})\nexport class KolSymbol implements API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span aria-label={this.state._label} role=\"term\">\n\t\t\t\t\t{this.state._symbol}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/*\n\t Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t * @deprecated use _label\n\t /\n\t@Prop() public _ariaLabel?: string;\n\n\t/\n\t Sets the visible or semantic label of the component (e.g. Aria label, Label, Headline, Caption, Summary, etc.).\n\t /\n\t// TODO v2: make required\n\t@Prop() public _label?: LabelPropType;\n\n\t/\n\t Dieses Property gibt den String an der angezeigt werden soll.\n\t /\n\t@Prop() public _symbol!: string;\n\n\t@State() public state: States = {\n\t\t_label: translate('kol-warning'),\n\t\t_symbol: '…', // ⚠ required\n\t};\n\n\t/\n\t @deprecated use _label\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\tdefaultValue: translate('kol-warning'),\n\t\t});\n\t}\n\n\t@Watch('_symbol')\n\tpublic validateSymbol(value?: string): void {\n\t\twatchString(this, '_symbol', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label \|\| this._ariaLabel);\n\t\tthis.validateSymbol(this._symbol);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-symbol.js","mappings":";;;;;;;;MAWaA,WAAS;;;;;;;qBA4BW;YAC/B,MAAM,EAAE,SAAS,CAAC,aAAa,CAAC;YAChC,OAAO,EAAE,GAAG;SACZ;;IA9BM,MAAM;QACZ,QACC,EAAC,IAAI,uDACJ,2EAAkB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,IAC9C,IAAI,CAAC,KAAK,CAAC,OAAO,CACb,CACD,EACN;KACF;IA4BM,iBAAiB,CAAC,KAAc;QACtC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC1B;IAGM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,YAAY,EAAE,SAAS,CAAC,aAAa,CAAC;SACtC,CAAC,CAAC;KACH;IAGM,cAAc,CAAC,KAAc;QACnC,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE;YACnC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;QACnD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolSymbol"],"sources":["src/components/symbol/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchString } from '../../utils/prop.validators';\nimport { API, States } from './types';\n\n@Component({\n\ttag: 'kol-symbol',\n\tshadow: false,\n})\nexport class KolSymbol implements API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span aria-label={this.state._label} role=\"term\">\n\t\t\t\t\t{this.state._symbol}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/*\n\t Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t * @deprecated use _label\n\t /\n\t@Prop() public _ariaLabel?: string;\n\n\t/\n\t Sets the visible or semantic label of the component (e.g. Aria label, Label, Headline, Caption, Summary, etc.).\n\t /\n\t// TODO v2: make required\n\t@Prop() public _label?: LabelPropType;\n\n\t/\n\t Dieses Property gibt den String an der angezeigt werden soll.\n\t /\n\t@Prop() public _symbol!: string;\n\n\t@State() public state: States = {\n\t\t_label: translate('kol-warning'),\n\t\t_symbol: '…', // ⚠ required\n\t};\n\n\t/\n\t @deprecated use _label\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\tdefaultValue: translate('kol-warning'),\n\t\t});\n\t}\n\n\t@Watch('_symbol')\n\tpublic validateSymbol(value?: string): void {\n\t\twatchString(this, '_symbol', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label \|\| this._ariaLabel);\n\t\tthis.validateSymbol(this._symbol);\n\t}\n}\n"],"version":3}

package/dist/components/kol-table.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{v as validateLabel}from"./label.js";import{r as setState,P as emptyStringByArrayHandler,b as watchString,h as parseJson,w as watchValidator,o as objectObjectHandler,d as devHint}from"./prop.validators.js";import{d as defineCustomElement$c}from"./shadow.js";import{d as defineCustomElement$b}from"./component6.js";import{d as defineCustomElement$a}from"./shadow3.js";import{d as defineCustomElement$9}from"./component5.js";import{d as defineCustomElement$8}from"./component4.js";import{d as defineCustomElement$7}from"./component.js";import{d as defineCustomElement$6}from"./component13.js";import{d as defineCustomElement$5}from"./component15.js";import{d as defineCustomElement$4}from"./component16.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n:host {\n\t/*\n\t * Minimum size of interactive elements.\n\t */\n\t--a11y-min-size: 44px;\n\t/*\n\t * No element should be used without a background and font color whose contrast ratio has\n\t * not been checked. By initially setting the background color to white and the font color\n\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t */\n\tbackground-color: white;\n\tcolor: black;\n\t/*\n\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t */\n\tfont-family: Verdana;\n}\n* {\n\t/*\n\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t */\n\thyphens: auto;\n\t/*\n\t * Letter spacing is required for all texts.\n\t */\n\tletter-spacing: inherit;\n\t/*\n\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t */\n\tword-break: break-word;\n\t/*\n\t * Word spacing is required for all texts.\n\t */\n\tword-spacing: inherit;\n}\n/*\n * All interactive elements should have a minimum size of 44px.\n */\n/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n/* option, */\n/* select, */\n/* textarea, */\n[role='button'],\nbutton:not([role='link']),\nkol-input .input {\n\tmin-height: var(--a11y-min-size);\n\tmin-width: var(--a11y-min-size);\n}\n/*\n * Some interactive elements should not inherit the font-family and font-size.\n */\na,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea {\n\t/*\n\t * All elements should inherit the font family from his parent element.\n\t */\n\tfont-family: inherit;\n\t/*\n\t * All elements should inherit the font size from his parent element.\n\t */\n\tfont-size: inherit;\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n/*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n:is(a, button) {\n\tbackground-color: transparent;\n\tborder: none;\n\tmargin: 0;\n\tpadding: 0;\n\twidth: 100%; /* 100% needed for custom width from outside */\n}\n\n/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n[hidden] {\n\tdisplay: none !important;\n}\n\n:host {\n\t/*\n\t * The max-width is needed to prevent the table from overflowing the\n\t * parent node, if the table is wider than the parent node.\n\t */\n\tmax-width: 100%;\n}\n* {\n\t/*\n\t * We prefer to box-sizing: border-box for all elements.\n\t */\n\tbox-sizing: border-box;\n}\n/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\nkol-span-wc {\n\tdisplay: grid;\n\tplace-items: center;\n}\n/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\nkol-span-wc > span {\n\tdisplay: flex;\n\tplace-items: center;\n}\na,\nbutton {\n\tcursor: pointer;\n}\n/* This is the text label. */\n.icon-only > kol-span-wc > span > span {\n\tdisplay: none;\n}\n.hidden {\n\tdisplay: none;\n\tvisibility: hidden;\n}\n\n:host {\n\tdisplay: block;\n}\n\n:host {\n\tdisplay: grid;\n}\n:host > div.table {\n\tmax-width: 100%;\n\torder: 1;\n\toverflow-x: auto;\n\toverflow-y: hidden;\n}\n:host > div.table table {\n\twidth: 100%;\n}\ncaption {\n\ttext-align: start;\n\n\t&:focus {\n\t\toutline: 0 !important;\n\t}\n}\n.table:has(caption:focus) {\n\t/* @see https://remysharp.com/til/css/focus-ring-default-styles */\n\toutline: 5px auto Highlight;\n\toutline: 5px auto -webkit-focus-ring-color;\n\toutline-offset: 2px;\n}\nth > div {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n\tplace-items: center;\n}\n.table-sort-button .button {\n\tcolor: inherit;\n}\nth.align-left {\n\ttext-align: left;\n\t& .table-sort-button .button-inner {\n\t\tjustify-items: start;\n\t}\n}\nth.align-center {\n\ttext-align: center;\n\t& .table-sort-button .button-inner {\n\t\tjustify-items: center;\n\t}\n}\nth.align-right {\n\ttext-align: right;\n\t& .table-sort-button .button-inner {\n\t\tjustify-items: end;\n\t}\n}\ndiv.pagination {\n\torder: 2;\n}\ndiv.pagination,\ndiv.pagination > div:last-child {\n\tdisplay: grid;\n\tplace-items: center;\n}\n@media (min-width: 1024px) {\n\tdiv.pagination,\n\tdiv.pagination > div:last-child {\n\t\tgrid-auto-flow: column;\n\t}\n\tdiv.pagination kol-pagination {\n\t\tdisplay: flex;\n\t}\n}\n",KolTableDefaultStyle0=defaultStyleCss,PAGINATION_OPTIONS=[10,20,50,100],CELL_REFS=new Map,paginationValidator=t=>!0===t||""===t||"object"==typeof t&&null!==t,KolTable$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.horizontal=!0,this.sortDirections=new Map,this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"},this.setSortDirection=(t,e)=>{this.sortDirections.clear(),this.sortDirections.set(t,e),this.sortFunction=t},this.handlePagination={onClick:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onClick)&&this.state._pagination._on.onClick(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePage:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onChangePage)&&this.state._pagination._on.onChangePage(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePageSize:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:e})),setState(this,"_pageSize",e)}},this.updateSortedData=(t=this.sortedColumnHead)=>{let e=this.state._data;if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"ASC":e=this.sortFunction([...this.state._data]),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"ASC"};break;case"DESC":e=this.sortFunction([...this.state._data]).reverse(),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"DESC"};break;default:e=[...this.state._data],this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"}}setState(this,"_sortedData",e)},this.renderTableRow=(t,e)=>h("tr",{key:`tbody-${e}`},t.map(((t,n)=>this.renderTableCell(t,e,n)))),this.renderTableCell=(t,e,n)=>{if(!1===t.asTd){const i=t;let a,o="codicon codicon-fold";if(!this.disableSort&&i.key===this.sortedColumnHead.key)switch(this.sortedColumnHead.sortDirection){case"ASC":o="codicon codicon-chevron-up",a="ascending";break;case"DESC":o="codicon codicon-chevron-down",a="descending"}return h("th",{key:`tbody-${e}-${n}-${i.label}`,scope:"number"==typeof i.rowSpan&&i.rowSpan>1?"rowgroup":"row",colSpan:i.colSpan,rowSpan:i.rowSpan,style:{textAlign:i.textAlign,width:i.width},"aria-sort":a,"data-sort":`sort-${this.sortDirections.get(i.sort)}`},h("div",{class:"w-full flex gap-1 items-center"},h("div",{class:{"w-full":!0,[i.textAlign]:"string"==typeof i.textAlign&&i.textAlign.length>0},style:{textAlign:i.textAlign}},i.label),!this.disableSort&&"function"==typeof i.sort&&h("kol-button",{exportparts:"icon",_icon:o,_hideLabel:!0,_label:translate("kol-change-order",{placeholders:{colLabel:i.label}}),_on:{onClick:()=>{if("function"==typeof i.sort){switch(this.sortFunction=i.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData(i)}}},_variant:"ghost"})))}return h("td",{key:`tbody-${e}-${n}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:"")},this.renderFoot=()=>{const t=this.createDataField(this.state._dataFoot,this.state._headers,!0);return h("tfoot",null,t.map(this.renderTableRow))},this.tableDivElementHasScrollbar=!1,this._caption=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this.state={_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"…",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[]}}validateCaption(t){this.validateLabel(t)}validateData(t){emptyStringByArrayHandler(t,(()=>{objectObjectHandler(t,(()=>{void 0===t&&(t=[]);try{t=parseJson(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&setState(this,"_data",t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}))}))}validateDataFoot(t){emptyStringByArrayHandler(t,(()=>{objectObjectHandler(t,(()=>{void 0===t&&(t=[]);try{t=parseJson(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&setState(this,"_dataFoot",t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}))}))}validateHeaders(t){emptyStringByArrayHandler(t,(()=>{objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}watchValidator(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var e,n,i,a;const o=t=>{t.forEach(((t,e)=>{const n=t.sortDirection;"function"!=typeof t.sort||"ASC"!==n&&"DESC"!==n||(this.setSortDirection(t.sort,n),setTimeout((()=>this.updateSortedData({key:t.key||`cell-${e}`,label:t.label,sortDirection:n}))))}))},s=t;null===(e=s.horizontal)||void 0===e||e.forEach(o),null===(n=s.vertical)||void 0===n||n.forEach(o),s.horizontal&&s.vertical&&(null===(i=s.horizontal)||void 0===i?void 0:i.length)>0&&(null===(a=s.vertical)||void 0===a?void 0:a.length)>0&&(this.disableSort=!0,devHint("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){validateLabel(this,t,{required:!0})}validateMinWidth(t){watchString(this,"_minWidth",t,{defaultValue:void 0})}validatePagination(t){try{t=parseJson(t)}catch(t){}this.showPagination=paginationValidator(t),watchValidator(this,"_pagination",paginationValidator,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label||this._caption),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination)}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}disconnectedCallback(){var t;null===(t=this.tableDivElementResizeObserver)||void 0===t||t.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}getNumberOfCols(t,e){let n=0;return t.forEach((t=>{let e=0;t.forEach((t=>{var n;return e+=null!==(n=t.colSpan)&&void 0!==n?n:1})),n<e&&(n=e)})),0===n&&(n=e.length),n}getNumberOfRows(t,e){let n=0;return t.forEach((t=>{let e=0;t.forEach((t=>{var n;return e+=null!==(n=t.rowSpan)&&void 0!==n?n:1})),n<e&&(n=e)})),0===n?n=e.length:n-=this.state._dataFoot.length,n}filterHeaderKeys(t){const e=[];return t.forEach((t=>{t.forEach((t=>{"string"==typeof t.key&&e.push(t)}))})),e}getPrimaryHeader(t){var e,n;let i=this.filterHeaderKeys(null!==(e=t.horizontal)&&void 0!==e?e:[]);return this.horizontal=!0,0===i.length&&(i=this.filterHeaderKeys(null!==(n=t.vertical)&&void 0!==n?n:[]),i.length>0&&(this.horizontal=!1)),i}createDataField(t,e,n){e.horizontal=Array.isArray(null==e?void 0:e.horizontal)?e.horizontal:[],e.vertical=Array.isArray(null==e?void 0:e.vertical)?e.vertical:[];const i=this.getPrimaryHeader(e),a=this.getNumberOfCols(e.horizontal,t);let o=this.getNumberOfRows(e.vertical,t),s=0;n&&(s=o,o+=this.state._dataFoot.length);const l=[],r=[],d=[];e.vertical.forEach(((t,e)=>{r[e]=0,d[e]=[]}));for(let h=s;h<o;h++){const o=[];e.vertical.forEach(((t,e)=>{let n=0;if(d[e].forEach((t=>n+=t)),n<=h){const i=t[h-n+r[e]];if("object"==typeof i){o.push(Object.assign(Object.assign({},i),{asTd:!1,data:{}}));let t=1;if("number"==typeof i.rowSpan&&i.rowSpan>1&&(t=i.rowSpan),d[e].push(t),"number"==typeof i.colSpan&&i.colSpan>1)for(let n=1;n<i.colSpan;n++)d[e+n].push(t);r[e]++}}}));for(let e=0;e<a;e++)if(!0===this.horizontal){const a=n?this.state._dataFoot[h-s]:t[h];"object"==typeof i[e]&&null!==i[e]&&"string"==typeof i[e].key&&"object"==typeof a&&null!==a&&o.push(Object.assign(Object.assign({},i[e]),{colSpan:void 0,data:a,label:a[i[e].key],rowSpan:void 0}))}else"object"==typeof i[h]&&null!==i[h]&&"string"==typeof i[h].key&&"object"==typeof t[e]&&null!==t[e]&&o.push(Object.assign(Object.assign({},i[h]),{colSpan:void 0,data:t[e],label:t[e][i[h].key],rowSpan:void 0}));l.push(o)}if(0===t.length){let t=0,n=0;Array.isArray(e.horizontal)&&e.horizontal.length>0&&e.horizontal[0].forEach((e=>{t+=e.colSpan||1})),Array.isArray(e.vertical)&&e.vertical.length>0&&(t-=e.vertical.length,e.vertical[0].forEach((t=>{n+=t.rowSpan||1})));const i={colSpan:t,label:translate("kol-no-entries"),render:void 0,rowSpan:Math.max(n,1)};0===l.length?l.push([i]):l[0].push(i)}return l}selectDisplayedData(t,e,n){return"number"==typeof e&&e>0&&"number"==typeof n&&n>0?(this.pageStartSlice=e*(n-1),this.pageEndSlice=e*n>t.length?t.length:e*n,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}cellRender(t,e){e&&(clearTimeout(CELL_REFS.get(e)),CELL_REFS.set(e,setTimeout((()=>{clearTimeout(CELL_REFS.get(e));const n=t.render(e,{asTd:t.asTd,label:t.label,textAlign:t.textAlign,width:t.width},t.data,this.state._data);"string"==typeof n&&(e.textContent=n)}))))}render(){var t,e;const n=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(e=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==e?e:10:this.state._sortedData.length,this.state._pagination._page||1),i=this.createDataField(n,this.state._headers);return h(Host,null,this.pageEndSlice>0&&this.showPagination&&h("div",{class:"pagination"},h("span",null,"Einträge ",this.pageEndSlice>0?this.pageStartSlice+1:0," bis ",this.pageEndSlice," von"," ",this.state._pagination._max||(Array.isArray(this.state._data)?this.state._data.length:0)," angezeigt"),h("div",null,h("kol-pagination",{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||PAGINATION_OPTIONS,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._total||this.state._data.length,_label:translate("kol-table-pagination-label",{placeholders:{label:this.state._label}})}))),h("div",{ref:t=>this.tableDivElement=t,class:"table",tabindex:"-1",onMouseDown:t=>{t.preventDefault()}},h("table",{style:{minWidth:this.state._minWidth}},h("caption",{tabindex:this.tableDivElementHasScrollbar?"0":void 0},this.state._label),Array.isArray(this.state._headers.horizontal)&&h("thead",null,this.state._headers.horizontal.map(((t,e)=>h("tr",{key:`thead-${e}`},t.map(((t,n)=>{if(!0===t.asTd)return h("td",{key:`thead-${e}-${n}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:"");{const i=t;let a,o="codicon codicon-fold";if(i.key===this.sortedColumnHead.key)switch(this.sortedColumnHead.sortDirection){case"ASC":o="codicon codicon-chevron-up",a="ascending";break;case"DESC":o="codicon codicon-chevron-down",a="descending"}return h("th",{class:t.textAlign?`align-${t.textAlign}`:void 0,key:`thead-${e}-${n}-${i.label}`,scope:"number"==typeof i.colSpan&&i.colSpan>1?"colgroup":"col",colSpan:i.colSpan,rowSpan:i.rowSpan,style:{width:t.width},"aria-sort":a,"data-sort":a?`sort-${this.sortedColumnHead.sortDirection}`:"sort-NOS"},this.disableSort||"function"!=typeof i.sort?t.label:h("kol-button-wc",{class:"table-sort-button",exportparts:"icon",_icons:{right:o},_label:t.label,_on:{onClick:()=>{if("function"==typeof i.sort){switch(this.sortFunction=i.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData(i)}}}}))}})))))),h("tbody",null,i.map(this.renderTableRow)),this.state._dataFoot.length>0?this.renderFoot():"")))}static get watchers(){return{_caption:["validateCaption"],_data:["validateData"],_dataFoot:["validateDataFoot"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_pagination:["validatePagination"]}}static get style(){return{default:KolTableDefaultStyle0}}},[33,"kol-table",{_caption:[1],_data:[1],_dataFoot:[1,"_data-foot"],_headers:[1],_label:[1],_minWidth:[1,"_min-width"],_pagination:[8],tableDivElementHasScrollbar:[32],state:[32]},void 0,{_caption:["validateCaption"],_data:["validateData"],_dataFoot:["validateDataFoot"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_pagination:["validatePagination"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-table","kol-alert","kol-alert-wc","kol-button","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-pagination","kol-select","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-table":customElements.get(t)||customElements.define(t,KolTable$1);break;case"kol-alert":customElements.get(t)||defineCustomElement$c();break;case"kol-alert-wc":customElements.get(t)||defineCustomElement$b();break;case"kol-button":customElements.get(t)||defineCustomElement$a();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$9();break;case"kol-heading-wc":customElements.get(t)||defineCustomElement$8();break;case"kol-icon":customElements.get(t)||defineCustomElement$7();break;case"kol-input":customElements.get(t)||defineCustomElement$6();break;case"kol-pagination":customElements.get(t)||defineCustomElement$5();break;case"kol-select":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolTable=KolTable$1,defineCustomElement=defineCustomElement$1;export{KolTable,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{v as validateLabel}from"./label.js";import{r as setState,P as emptyStringByArrayHandler,b as watchString,h as parseJson,w as watchValidator,o as objectObjectHandler,d as devHint}from"./prop.validators.js";import{d as defineCustomElement$c}from"./shadow.js";import{d as defineCustomElement$b}from"./component6.js";import{d as defineCustomElement$a}from"./shadow3.js";import{d as defineCustomElement$9}from"./component5.js";import{d as defineCustomElement$8}from"./component4.js";import{d as defineCustomElement$7}from"./component.js";import{d as defineCustomElement$6}from"./component13.js";import{d as defineCustomElement$5}from"./component15.js";import{d as defineCustomElement$4}from"./component16.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n:host {\n\t/*\n\t * Minimum size of interactive elements.\n\t */\n\t--a11y-min-size: 44px;\n\t/*\n\t * No element should be used without a background and font color whose contrast ratio has\n\t * not been checked. By initially setting the background color to white and the font color\n\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t */\n\tbackground-color: white;\n\tcolor: black;\n\t/*\n\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t */\n\tfont-family: Verdana;\n}\n* {\n\t/*\n\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t */\n\thyphens: auto;\n\t/*\n\t * Letter spacing is required for all texts.\n\t */\n\tletter-spacing: inherit;\n\t/*\n\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t */\n\tword-break: break-word;\n\t/*\n\t * Word spacing is required for all texts.\n\t */\n\tword-spacing: inherit;\n}\n/*\n * All interactive elements should have a minimum size of 44px.\n */\n/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n/* option, */\n/* select, */\n/* textarea, */\n[role='button'],\nbutton:not([role='link']),\nkol-input .input {\n\tmin-height: var(--a11y-min-size);\n\tmin-width: var(--a11y-min-size);\n}\n/*\n * Some interactive elements should not inherit the font-family and font-size.\n */\na,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea {\n\t/*\n\t * All elements should inherit the font family from his parent element.\n\t */\n\tfont-family: inherit;\n\t/*\n\t * All elements should inherit the font size from his parent element.\n\t */\n\tfont-size: inherit;\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n/*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n:is(a, button) {\n\tbackground-color: transparent;\n\tborder: none;\n\tmargin: 0;\n\tpadding: 0;\n\twidth: 100%; /* 100% needed for custom width from outside */\n}\n\n/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n[hidden] {\n\tdisplay: none !important;\n}\n\n:host {\n\t/*\n\t * The max-width is needed to prevent the table from overflowing the\n\t * parent node, if the table is wider than the parent node.\n\t */\n\tmax-width: 100%;\n}\n* {\n\t/*\n\t * We prefer to box-sizing: border-box for all elements.\n\t */\n\tbox-sizing: border-box;\n}\n/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\nkol-span-wc {\n\tdisplay: grid;\n\tplace-items: center;\n}\n/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\nkol-span-wc > span {\n\tdisplay: flex;\n\tplace-items: center;\n}\na,\nbutton {\n\tcursor: pointer;\n}\n/* This is the text label. */\n.icon-only > kol-span-wc > span > span {\n\tdisplay: none;\n}\n.hidden {\n\tdisplay: none;\n\tvisibility: hidden;\n}\n\n:host {\n\tdisplay: block;\n}\n\n:host {\n\tdisplay: grid;\n}\n:host > div.table {\n\tmax-width: 100%;\n\torder: 1;\n\toverflow-x: auto;\n\toverflow-y: hidden;\n}\n:host > div.table table {\n\twidth: 100%;\n}\ncaption {\n\ttext-align: start;\n\n\t&:focus {\n\t\toutline: 0 !important;\n\t}\n}\n.table:has(caption:focus) {\n\t/* @see https://remysharp.com/til/css/focus-ring-default-styles */\n\toutline: 5px auto Highlight;\n\toutline: 5px auto -webkit-focus-ring-color;\n\toutline-offset: 2px;\n}\nth > div {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n\tplace-items: center;\n}\n.table-sort-button .button {\n\tcolor: inherit;\n}\nth.align-left {\n\ttext-align: left;\n\t& .table-sort-button .button-inner {\n\t\tjustify-items: start;\n\t}\n}\nth.align-center {\n\ttext-align: center;\n\t& .table-sort-button .button-inner {\n\t\tjustify-items: center;\n\t}\n}\nth.align-right {\n\ttext-align: right;\n\t& .table-sort-button .button-inner {\n\t\tjustify-items: end;\n\t}\n}\ndiv.pagination {\n\torder: 2;\n}\ndiv.pagination,\ndiv.pagination > div:last-child {\n\tdisplay: grid;\n\tplace-items: center;\n}\n@media (min-width: 1024px) {\n\tdiv.pagination,\n\tdiv.pagination > div:last-child {\n\t\tgrid-auto-flow: column;\n\t}\n\tdiv.pagination kol-pagination {\n\t\tdisplay: flex;\n\t}\n}\n",KolTableDefaultStyle0=defaultStyleCss,PAGINATION_OPTIONS=[10,20,50,100],CELL_REFS=new Map,paginationValidator=t=>!0===t||""===t||"object"==typeof t&&null!==t,KolTable$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.horizontal=!0,this.sortDirections=new Map,this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"},this.setSortDirection=(t,e)=>{this.sortDirections.clear(),this.sortDirections.set(t,e),this.sortFunction=t},this.handlePagination={onClick:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onClick)&&this.state._pagination._on.onClick(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePage:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onChangePage)&&this.state._pagination._on.onChangePage(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePageSize:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:e})),setState(this,"_pageSize",e)}},this.updateSortedData=(t=this.sortedColumnHead)=>{let e=this.state._data;if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"ASC":e=this.sortFunction([...this.state._data]),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"ASC"};break;case"DESC":e=this.sortFunction([...this.state._data]).reverse(),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"DESC"};break;default:e=[...this.state._data],this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"}}setState(this,"_sortedData",e)},this.renderTableRow=(t,e)=>h("tr",{key:`tbody-${e}`},t.map(((t,n)=>this.renderTableCell(t,e,n)))),this.renderTableCell=(t,e,n)=>{if(!1===t.asTd){const a=t;let i,o="codicon codicon-fold";if(!this.disableSort&&a.key===this.sortedColumnHead.key)switch(this.sortedColumnHead.sortDirection){case"ASC":o="codicon codicon-chevron-up",i="ascending";break;case"DESC":o="codicon codicon-chevron-down",i="descending"}return h("th",{key:`tbody-${e}-${n}-${a.label}`,scope:"number"==typeof a.rowSpan&&a.rowSpan>1?"rowgroup":"row",colSpan:a.colSpan,rowSpan:a.rowSpan,style:{textAlign:a.textAlign,width:a.width},"aria-sort":i,"data-sort":`sort-${this.sortDirections.get(a.sort)}`},h("div",{class:"w-full flex gap-1 items-center"},h("div",{class:{"w-full":!0,[a.textAlign]:"string"==typeof a.textAlign&&a.textAlign.length>0},style:{textAlign:a.textAlign}},a.label),!this.disableSort&&"function"==typeof a.sort&&h("kol-button",{exportparts:"icon",_icon:o,_hideLabel:!0,_label:translate("kol-change-order",{placeholders:{colLabel:a.label}}),_on:{onClick:()=>{if("function"==typeof a.sort){switch(this.sortFunction=a.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData(a)}}},_variant:"ghost"})))}return h("td",{key:`tbody-${e}-${n}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:"")},this.renderFoot=()=>{const t=this.createDataField(this.state._dataFoot,this.state._headers,!0);return h("tfoot",null,t.map(this.renderTableRow))},this.tableDivElementHasScrollbar=!1,this._caption=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this.state={_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"…",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[]}}validateCaption(t){this.validateLabel(t)}validateData(t){emptyStringByArrayHandler(t,(()=>{objectObjectHandler(t,(()=>{void 0===t&&(t=[]);try{t=parseJson(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&setState(this,"_data",t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}))}))}validateDataFoot(t){emptyStringByArrayHandler(t,(()=>{objectObjectHandler(t,(()=>{void 0===t&&(t=[]);try{t=parseJson(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&setState(this,"_dataFoot",t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}))}))}validateHeaders(t){emptyStringByArrayHandler(t,(()=>{objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}watchValidator(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var e,n,a,i;const o=t=>{t.forEach(((t,e)=>{const n=t.sortDirection;"function"!=typeof t.sort||"ASC"!==n&&"DESC"!==n||(this.setSortDirection(t.sort,n),setTimeout((()=>this.updateSortedData({key:t.key||`cell-${e}`,label:t.label,sortDirection:n}))))}))},s=t;null===(e=s.horizontal)||void 0===e||e.forEach(o),null===(n=s.vertical)||void 0===n||n.forEach(o),s.horizontal&&s.vertical&&(null===(a=s.horizontal)||void 0===a?void 0:a.length)>0&&(null===(i=s.vertical)||void 0===i?void 0:i.length)>0&&(this.disableSort=!0,devHint("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){validateLabel(this,t,{required:!0})}validateMinWidth(t){watchString(this,"_minWidth",t,{defaultValue:void 0})}validatePagination(t){try{t=parseJson(t)}catch(t){}this.showPagination=paginationValidator(t),watchValidator(this,"_pagination",paginationValidator,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label||this._caption),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination)}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}disconnectedCallback(){var t;null===(t=this.tableDivElementResizeObserver)||void 0===t||t.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}getNumberOfCols(t,e){let n=0;return t.forEach((t=>{let e=0;t.forEach((t=>{var n;return e+=null!==(n=t.colSpan)&&void 0!==n?n:1})),n<e&&(n=e)})),0===n&&(n=e.length),n}getNumberOfRows(t,e){let n=0;return t.forEach((t=>{let e=0;t.forEach((t=>{var n;return e+=null!==(n=t.rowSpan)&&void 0!==n?n:1})),n<e&&(n=e)})),0===n?n=e.length:n-=this.state._dataFoot.length,n}filterHeaderKeys(t){const e=[];return t.forEach((t=>{t.forEach((t=>{"string"==typeof t.key&&e.push(t)}))})),e}getPrimaryHeader(t){var e,n;let a=this.filterHeaderKeys(null!==(e=t.horizontal)&&void 0!==e?e:[]);return this.horizontal=!0,0===a.length&&(a=this.filterHeaderKeys(null!==(n=t.vertical)&&void 0!==n?n:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(t,e,n){e.horizontal=Array.isArray(null==e?void 0:e.horizontal)?e.horizontal:[],e.vertical=Array.isArray(null==e?void 0:e.vertical)?e.vertical:[];const a=this.getPrimaryHeader(e),i=this.getNumberOfCols(e.horizontal,t);let o=this.getNumberOfRows(e.vertical,t),s=0;n&&(s=o,o+=this.state._dataFoot.length);const l=[],r=[],d=[];e.vertical.forEach(((t,e)=>{r[e]=0,d[e]=[]}));for(let h=s;h<o;h++){const o=[];e.vertical.forEach(((t,e)=>{let n=0;if(d[e].forEach((t=>n+=t)),n<=h){const a=t[h-n+r[e]];if("object"==typeof a){o.push(Object.assign(Object.assign({},a),{asTd:!1,data:{}}));let t=1;if("number"==typeof a.rowSpan&&a.rowSpan>1&&(t=a.rowSpan),d[e].push(t),"number"==typeof a.colSpan&&a.colSpan>1)for(let n=1;n<a.colSpan;n++)d[e+n].push(t);r[e]++}}}));for(let e=0;e<i;e++)if(!0===this.horizontal){const i=n?this.state._dataFoot[h-s]:t[h];"object"==typeof a[e]&&null!==a[e]&&"string"==typeof a[e].key&&"object"==typeof i&&null!==i&&o.push(Object.assign(Object.assign({},a[e]),{colSpan:void 0,data:i,label:i[a[e].key],rowSpan:void 0}))}else"object"==typeof a[h]&&null!==a[h]&&"string"==typeof a[h].key&&"object"==typeof t[e]&&null!==t[e]&&o.push(Object.assign(Object.assign({},a[h]),{colSpan:void 0,data:t[e],label:t[e][a[h].key],rowSpan:void 0}));l.push(o)}if(0===t.length){let t=0,n=0;Array.isArray(e.horizontal)&&e.horizontal.length>0&&e.horizontal[0].forEach((e=>{t+=e.colSpan||1})),Array.isArray(e.vertical)&&e.vertical.length>0&&(t-=e.vertical.length,e.vertical[0].forEach((t=>{n+=t.rowSpan||1})));const a={colSpan:t,label:translate("kol-no-entries"),render:void 0,rowSpan:Math.max(n,1)};0===l.length?l.push([a]):l[0].push(a)}return l}selectDisplayedData(t,e,n){return"number"==typeof e&&e>0&&"number"==typeof n&&n>0?(this.pageStartSlice=e*(n-1),this.pageEndSlice=e*n>t.length?t.length:e*n,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}cellRender(t,e){e&&(clearTimeout(CELL_REFS.get(e)),CELL_REFS.set(e,setTimeout((()=>{clearTimeout(CELL_REFS.get(e));const n=t.render(e,{asTd:t.asTd,label:t.label,textAlign:t.textAlign,width:t.width},t.data,this.state._data);"string"==typeof n&&(e.textContent=n)}))))}render(){var t,e;const n=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(e=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==e?e:10:this.state._sortedData.length,this.state._pagination._page||1),a=this.createDataField(n,this.state._headers);return h(Host,{key:"f794beeff78b8ce946e98c0a4f10be2e55729783"},this.pageEndSlice>0&&this.showPagination&&h("div",{class:"pagination"},h("span",null,"Einträge ",this.pageEndSlice>0?this.pageStartSlice+1:0," bis ",this.pageEndSlice," von"," ",this.state._pagination._max||(Array.isArray(this.state._data)?this.state._data.length:0)," angezeigt"),h("div",null,h("kol-pagination",{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||PAGINATION_OPTIONS,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._total||this.state._data.length,_label:translate("kol-table-pagination-label",{placeholders:{label:this.state._label}})}))),h("div",{key:"98f7c3ca6d5d59e09bbade107641460898d51477",ref:t=>this.tableDivElement=t,class:"table",tabindex:"-1",onMouseDown:t=>{t.preventDefault()}},h("table",{key:"d0d6ffe63fbeac62252a13212e7f80ce64ba01ee",style:{minWidth:this.state._minWidth}},h("caption",{key:"f1e234380539c835b369d15bab9ac71f4db64f1e",tabindex:this.tableDivElementHasScrollbar?"0":void 0},this.state._label),Array.isArray(this.state._headers.horizontal)&&h("thead",null,this.state._headers.horizontal.map(((t,e)=>h("tr",{key:`thead-${e}`},t.map(((t,n)=>{if(!0===t.asTd)return h("td",{key:`thead-${e}-${n}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:"");{const a=t;let i,o="codicon codicon-fold";if(a.key===this.sortedColumnHead.key)switch(this.sortedColumnHead.sortDirection){case"ASC":o="codicon codicon-chevron-up",i="ascending";break;case"DESC":o="codicon codicon-chevron-down",i="descending"}return h("th",{class:t.textAlign?`align-${t.textAlign}`:void 0,key:`thead-${e}-${n}-${a.label}`,scope:"number"==typeof a.colSpan&&a.colSpan>1?"colgroup":"col",colSpan:a.colSpan,rowSpan:a.rowSpan,style:{width:t.width},"aria-sort":i,"data-sort":i?`sort-${this.sortedColumnHead.sortDirection}`:"sort-NOS"},this.disableSort||"function"!=typeof a.sort?t.label:h("kol-button-wc",{class:"table-sort-button",exportparts:"icon",_icons:{right:o},_label:t.label,_on:{onClick:()=>{if("function"==typeof a.sort){switch(this.sortFunction=a.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData(a)}}}}))}})))))),h("tbody",{key:"9e4e017a420d45539a9144c3a731f7f0563f1753"},a.map(this.renderTableRow)),this.state._dataFoot.length>0?this.renderFoot():"")))}static get watchers(){return{_caption:["validateCaption"],_data:["validateData"],_dataFoot:["validateDataFoot"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_pagination:["validatePagination"]}}static get style(){return{default:KolTableDefaultStyle0}}},[33,"kol-table",{_caption:[1],_data:[1],_dataFoot:[1,"_data-foot"],_headers:[1],_label:[1],_minWidth:[1,"_min-width"],_pagination:[8],tableDivElementHasScrollbar:[32],state:[32]},void 0,{_caption:["validateCaption"],_data:["validateData"],_dataFoot:["validateDataFoot"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_pagination:["validatePagination"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-table","kol-alert","kol-alert-wc","kol-button","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-pagination","kol-select","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-table":customElements.get(t)||customElements.define(t,KolTable$1);break;case"kol-alert":customElements.get(t)||defineCustomElement$c();break;case"kol-alert-wc":customElements.get(t)||defineCustomElement$b();break;case"kol-button":customElements.get(t)||defineCustomElement$a();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$9();break;case"kol-heading-wc":customElements.get(t)||defineCustomElement$8();break;case"kol-icon":customElements.get(t)||defineCustomElement$7();break;case"kol-input":customElements.get(t)||defineCustomElement$6();break;case"kol-pagination":customElements.get(t)||defineCustomElement$5();break;case"kol-select":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolTable=KolTable$1,defineCustomElement=defineCustomElement$1;export{KolTable,defineCustomElement};