@public-ui/components 1.5.2-rc.1 → 1.5.2-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cheat-sheet.html +6 -6
- package/custom-elements.json +1 -1
- package/dist/cjs/kol-spin.cjs.entry.js +1 -1
- package/dist/cjs/kol-spin.cjs.entry.js.map +1 -1
- package/dist/components/kol-spin.js +1 -1
- package/dist/components/kol-spin.js.map +1 -1
- package/dist/esm/kol-spin.entry.js +1 -1
- package/dist/esm/kol-spin.entry.js.map +1 -1
- package/dist/kolibri/kol-spin.entry.js +1 -1
- package/dist/kolibri/kol-spin.entry.js.map +1 -1
- package/dist/types/components/spin/component.d.ts +5 -11
- package/doc/spin.md +69 -53
- package/jest-test-results.json +1 -1
- package/package.json +1 -1
package/cheat-sheet.html
CHANGED
|
@@ -9,9 +9,9 @@
|
|
|
9
9
|
<link href="https://fonts.cdnfonts.com/css/roboto" rel="stylesheet" />
|
|
10
10
|
<link href="https://use.fontawesome.com/releases/v6.2.1/css/all.css" rel="stylesheet" />
|
|
11
11
|
<script type="module">
|
|
12
|
-
import { register } from 'https://esm.sh/@public-ui/components@1.5.2-rc.
|
|
13
|
-
import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.5.2-rc.
|
|
14
|
-
import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.5.2-rc.
|
|
12
|
+
import { register } from 'https://esm.sh/@public-ui/components@1.5.2-rc.2';
|
|
13
|
+
import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.5.2-rc.2/dist/loader';
|
|
14
|
+
import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.5.2-rc.2';
|
|
15
15
|
register(ITZBund, defineCustomElements)
|
|
16
16
|
.then(() => {})
|
|
17
17
|
.catch(console.warn);
|
|
@@ -78,9 +78,9 @@
|
|
|
78
78
|
<pre>
|
|
79
79
|
<code class="language-html"><head>
|
|
80
80
|
<script type="module">
|
|
81
|
-
import { register } from 'https://esm.sh/@public-ui/components@1.5.2-rc.
|
|
82
|
-
import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.5.2-rc.
|
|
83
|
-
import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.5.2-rc.
|
|
81
|
+
import { register } from 'https://esm.sh/@public-ui/components@1.5.2-rc.2';
|
|
82
|
+
import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.5.2-rc.2/dist/loader';
|
|
83
|
+
import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.5.2-rc.2';
|
|
84
84
|
register([ITZBund], [defineCustomElements])
|
|
85
85
|
.then(() => {})
|
|
86
86
|
.catch(console.warn);
|
package/custom-elements.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),i18n=require("./i18n-bd375706.js"),prop_validators=require("./prop.validators-0e600d26.js");require("./index-2e0791f2.js"),require("./index-7159f3d9.js"),require("./a11y.tipps-251f022e.js"),require("./dev.utils-d69c0a9f.js"),require("./reuse-0fe7470f.js");const validateSpinVariant=(i,
|
|
4
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),i18n=require("./i18n-bd375706.js"),prop_validators=require("./prop.validators-0e600d26.js");require("./index-2e0791f2.js"),require("./index-7159f3d9.js"),require("./a11y.tipps-251f022e.js"),require("./dev.utils-d69c0a9f.js"),require("./reuse-0fe7470f.js");const validateSpinVariant=(i,n)=>{prop_validators.watchValidator(i,"_variant",(i=>"default"===i||"none"===i),new Set(["default","none"]),n)},defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.spin{display:inline-block;height:1rem;position:relative;width:3rem}.spin 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 span:first-child{background-color:#fc0;z-index:0;animation:1s infinite spin1;left:0.1rem}.spin span:nth-child(2){background-color:red;z-index:1;animation:1s infinite spin2;left:0.1rem}.spin span:nth-child(3){background-color:#000;z-index:1;animation:1s infinite spin2;left:1.1rem}.spin 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 span:first-child,.spin span:nth-child(2),.spin span:nth-child(3),.spin span:nth-child(4){animation-duration:2s}}",KolSpin=class{constructor(i){index.registerInstance(this,i),this.showToggled=!1,this._show=!1,this._variant="default",this.state={_variant:"default"}}render(){return index.h(index.Host,null,this.state._show?index.h("span",{"aria-busy":"true","aria-label":i18n.translate("kol-action-running"),"aria-live":"polite",class:"spin",role:"alert"},"default"===this.state._variant?index.h(index.Fragment,null,index.h("span",{class:"bg-spin-1"}),index.h("span",{class:"bg-spin-2"}),index.h("span",{class:"bg-spin-3"}),index.h("span",{class:"bg-neutral"})):index.h("slot",{name:"expert"})):this.showToggled&&index.h("span",{"aria-label":i18n.translate("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,prop_validators.watchBoolean(this,"_show",i)}validateVariant(i){validateSpinVariant(this,i)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};KolSpin.style={default:defaultStyleCss},exports.kol_spin=KolSpin;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"kol-spin.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;AAqBO,MAAM,mBAAmB,GAAG,CAAC,SAAoC,EAAE,KAAmB;EAC5FA,8BAAc,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,MAAM,EAAE,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AAChI,CAAC;;ACvBD,MAAM,eAAe,GAAG,
|
|
1
|
+
{"file":"kol-spin.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;AAqBO,MAAM,mBAAmB,GAAG,CAAC,SAAoC,EAAE,KAAmB;EAC5FA,8BAAc,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,MAAM,EAAE,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AAChI,CAAC;;ACvBD,MAAM,eAAe,GAAG,8mDAA8mD;;MCuBznD,OAAO;;;IACX,gBAAW,GAAG,KAAK,CAAC;iBA4BsB,KAAK;oBAKf,SAAS;iBAEjB;MAC/B,QAAQ,EAAE,SAAS;KACnB;;EAnCM,MAAM;IACZ,QACCC,QAACC,UAAI,QACH,IAAI,CAAC,KAAK,CAAC,KAAK,IAChBD,+BAAgB,MAAM,gBAAaE,cAAS,CAAC,oBAAoB,CAAC,eAAY,QAAQ,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,IAC9G,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS,IACjCF,QAACG,cAAQ,QACRH,kBAAM,KAAK,EAAC,WAAW,GAAQ,EAC/BA,kBAAM,KAAK,EAAC,WAAW,GAAQ,EAC/BA,kBAAM,KAAK,EAAC,WAAW,GAAQ,EAC/BA,kBAAM,KAAK,EAAC,YAAY,GAAQ,CACtB,KAEXA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CAC3B,CACK,KAEP,IAAI,CAAC,WAAW,IAAIA,gCAAkBE,cAAS,CAAC,iBAAiB,CAAC,eAAY,OAAO,eAAW,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC7H,CACK,EACN;GACF;EAiBM,YAAY,CAAC,KAAe;IAClC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;IACrEE,4BAAY,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;GACnC;EAGM,eAAe,CAAC,KAAmB;IACzC,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GACjC;EAEM,iBAAiB;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;;;;;;;;;;;;","names":["watchValidator","h","Host","translate","Fragment","watchBoolean"],"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 { Generic } from '@a11y-ui/core';\nimport { watchValidator } from '../../../utils/prop.validators';\n\n/* types */\n/**\n * Loadingspinner\n * - https://github.com/vineethtrv/css-loader\n */\nexport type SpinVariant = 'default' | 'none';\n\n/** de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n */\n/** en\n * Makes hints readable for screenreaders.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariant;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariant): void => {\n\twatchValidator(component, '_variant', (value) => value === 'default' || value === 'none', new Set(['default', 'none']), value);\n};\n","@import url(../style.css);\n.spin {\n\tdisplay: inline-block;\n\theight: 1rem;\n\tposition: relative;\n\twidth: 3rem;\n}\n.spin span {\n\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\tborder-radius: 50%;\n\tborder: 0.1rem solid #fff;\n\theight: 0.8rem;\n\tposition: absolute;\n\ttop: 0.1rem;\n\twidth: 0.8rem;\n}\n.spin span:first-child {\n\tbackground-color: #fc0;\n\tz-index: 0;\n\tanimation: 1s infinite spin1;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(2) {\n\tbackground-color: red;\n\tz-index: 1;\n\tanimation: 1s infinite spin2;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(3) {\n\tbackground-color: #000;\n\tz-index: 1;\n\tanimation: 1s infinite spin2;\n\tleft: 1.1rem;\n}\n.spin span:nth-child(4) {\n\tbackground-color: #666;\n\tz-index: 0;\n\tanimation: 1s infinite spin3;\n\tleft: 2.1rem;\n}\n@keyframes spin1 {\n\t0% {\n\t\ttransform: scale(0);\n\t}\n\t100% {\n\t\ttransform: scale(1);\n\t}\n}\n@keyframes spin2 {\n\t0% {\n\t\ttransform: translate(0, 0);\n\t}\n\t100% {\n\t\ttransform: translate(1rem, 0);\n\t}\n}\n@keyframes spin3 {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\t100% {\n\t\ttransform: scale(0);\n\t}\n} /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n@media (prefers-reduced-motion) {\n\t.spin span:first-child,\n\t.spin span:nth-child(2),\n\t.spin span:nth-child(3),\n\t.spin span:nth-child(4) {\n\t\tanimation-duration: 2s;\n\t}\n}\n","import { Component, Fragment, Host, JSX, Prop, State, Watch, h } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { translate } from '../../i18n';\nimport { PropSpinVariant, SpinVariant, validateSpinVariant } from '../../types/props/variant/spin';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { PropShow } from '../../types/props';\n\ntype RequiredProps = unknown;\ntype OptionalProps = PropSpinVariant & PropShow;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = PropSpinVariant;\ntype OptionalStates = PropShow;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\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 aria-busy=\"true\" aria-label={translate('kol-action-running')} aria-live=\"polite\" class=\"spin\" role=\"alert\">\n\t\t\t\t\t\t{this.state._variant === 'default' ? (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t)}\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 * Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.\n\t */\n\t@Prop({ reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll.\n\t */\n\t@Prop() public _variant?: SpinVariant = 'default';\n\n\t@State() public state: States = {\n\t\t_variant: 'default',\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\twatchBoolean(this, '_show', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariant): 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,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{a as watchValidator,l as watchBoolean}from"./prop.validators.js";const validateSpinVariant=(t,n)=>{watchValidator(t,"_variant",(t=>"default"===t||"none"===t),new Set(["default","none"]),n)},defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.spin{display:inline-block;height:1rem;position:relative;width:3rem}.spin 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 span:first-child{background-color:#fc0;z-index:0;animation:
|
|
4
|
+
import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{a as watchValidator,l as watchBoolean}from"./prop.validators.js";const validateSpinVariant=(t,n)=>{watchValidator(t,"_variant",(t=>"default"===t||"none"===t),new Set(["default","none"]),n)},defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.spin{display:inline-block;height:1rem;position:relative;width:3rem}.spin 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 span:first-child{background-color:#fc0;z-index:0;animation:1s infinite spin1;left:0.1rem}.spin span:nth-child(2){background-color:red;z-index:1;animation:1s infinite spin2;left:0.1rem}.spin span:nth-child(3){background-color:#000;z-index:1;animation:1s infinite spin2;left:1.1rem}.spin 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 span:first-child,.spin span:nth-child(2),.spin span:nth-child(3),.spin span:nth-child(4){animation-duration:2s}}",KolSpin$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.showToggled=!1,this._show=!1,this._variant="default",this.state={_variant:"default"}}render(){return h(Host,null,this.state._show?h("span",{"aria-busy":"true","aria-label":translate("kol-action-running"),"aria-live":"polite",class:"spin",role:"alert"},"default"===this.state._variant?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"})):h("slot",{name:"expert"})):this.showToggled&&h("span",{"aria-label":translate("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(t){this.showToggled=!0===this.state._show&&!1===this._show,watchBoolean(this,"_show",t)}validateVariant(t){validateSpinVariant(this,t)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-spin",{_show:[516],_variant:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-spin"].forEach((t=>{if("kol-spin"===t)customElements.get(t)||customElements.define(t,KolSpin$1)}))}const KolSpin=KolSpin$1,defineCustomElement=defineCustomElement$1;export{KolSpin,defineCustomElement};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"kol-spin.js","mappings":";;;;;;;AAqBO,MAAM,mBAAmB,GAAG,CAAC,SAAoC,EAAE,KAAmB;EAC5F,cAAc,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,MAAM,EAAE,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AAChI,CAAC;;ACvBD,MAAM,eAAe,GAAG,
|
|
1
|
+
{"file":"kol-spin.js","mappings":";;;;;;;AAqBO,MAAM,mBAAmB,GAAG,CAAC,SAAoC,EAAE,KAAmB;EAC5F,cAAc,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,MAAM,EAAE,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AAChI,CAAC;;ACvBD,MAAM,eAAe,GAAG,8mDAA8mD;;MCuBznDA,SAAO;;;;;IACX,gBAAW,GAAG,KAAK,CAAC;iBA4BsB,KAAK;oBAKf,SAAS;iBAEjB;MAC/B,QAAQ,EAAE,SAAS;KACnB;;EAnCM,MAAM;IACZ,QACC,EAAC,IAAI,QACH,IAAI,CAAC,KAAK,CAAC,KAAK,IAChB,yBAAgB,MAAM,gBAAa,SAAS,CAAC,oBAAoB,CAAC,eAAY,QAAQ,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,IAC9G,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS,IACjC,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,KAEX,YAAM,IAAI,EAAC,QAAQ,GAAQ,CAC3B,CACK,KAEP,IAAI,CAAC,WAAW,IAAI,0BAAkB,SAAS,CAAC,iBAAiB,CAAC,eAAY,OAAO,eAAW,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC7H,CACK,EACN;GACF;EAiBM,YAAY,CAAC,KAAe;IAClC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;IACrE,YAAY,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;GACnC;EAGM,eAAe,CAAC,KAAmB;IACzC,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GACjC;EAEM,iBAAiB;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 { Generic } from '@a11y-ui/core';\nimport { watchValidator } from '../../../utils/prop.validators';\n\n/* types */\n/**\n * Loadingspinner\n * - https://github.com/vineethtrv/css-loader\n */\nexport type SpinVariant = 'default' | 'none';\n\n/** de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n */\n/** en\n * Makes hints readable for screenreaders.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariant;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariant): void => {\n\twatchValidator(component, '_variant', (value) => value === 'default' || value === 'none', new Set(['default', 'none']), value);\n};\n","@import url(../style.css);\n.spin {\n\tdisplay: inline-block;\n\theight: 1rem;\n\tposition: relative;\n\twidth: 3rem;\n}\n.spin span {\n\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\tborder-radius: 50%;\n\tborder: 0.1rem solid #fff;\n\theight: 0.8rem;\n\tposition: absolute;\n\ttop: 0.1rem;\n\twidth: 0.8rem;\n}\n.spin span:first-child {\n\tbackground-color: #fc0;\n\tz-index: 0;\n\tanimation: 1s infinite spin1;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(2) {\n\tbackground-color: red;\n\tz-index: 1;\n\tanimation: 1s infinite spin2;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(3) {\n\tbackground-color: #000;\n\tz-index: 1;\n\tanimation: 1s infinite spin2;\n\tleft: 1.1rem;\n}\n.spin span:nth-child(4) {\n\tbackground-color: #666;\n\tz-index: 0;\n\tanimation: 1s infinite spin3;\n\tleft: 2.1rem;\n}\n@keyframes spin1 {\n\t0% {\n\t\ttransform: scale(0);\n\t}\n\t100% {\n\t\ttransform: scale(1);\n\t}\n}\n@keyframes spin2 {\n\t0% {\n\t\ttransform: translate(0, 0);\n\t}\n\t100% {\n\t\ttransform: translate(1rem, 0);\n\t}\n}\n@keyframes spin3 {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\t100% {\n\t\ttransform: scale(0);\n\t}\n} /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n@media (prefers-reduced-motion) {\n\t.spin span:first-child,\n\t.spin span:nth-child(2),\n\t.spin span:nth-child(3),\n\t.spin span:nth-child(4) {\n\t\tanimation-duration: 2s;\n\t}\n}\n","import { Component, Fragment, Host, JSX, Prop, State, Watch, h } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { translate } from '../../i18n';\nimport { PropSpinVariant, SpinVariant, validateSpinVariant } from '../../types/props/variant/spin';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { PropShow } from '../../types/props';\n\ntype RequiredProps = unknown;\ntype OptionalProps = PropSpinVariant & PropShow;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = PropSpinVariant;\ntype OptionalStates = PropShow;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\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 aria-busy=\"true\" aria-label={translate('kol-action-running')} aria-live=\"polite\" class=\"spin\" role=\"alert\">\n\t\t\t\t\t\t{this.state._variant === 'default' ? (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t)}\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 * Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.\n\t */\n\t@Prop({ reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll.\n\t */\n\t@Prop() public _variant?: SpinVariant = 'default';\n\n\t@State() public state: States = {\n\t\t_variant: 'default',\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\twatchBoolean(this, '_show', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariant): 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,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{r as registerInstance,h,F as Fragment,H as Host}from"./index-50adf9a0.js";import{a as translate}from"./i18n-b8589f01.js";import{a as watchValidator,b as watchBoolean}from"./prop.validators-2c20cdf8.js";import"./index-0962b5a1.js";import"./index-f4596895.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";const validateSpinVariant=(a,
|
|
4
|
+
import{r as registerInstance,h,F as Fragment,H as Host}from"./index-50adf9a0.js";import{a as translate}from"./i18n-b8589f01.js";import{a as watchValidator,b as watchBoolean}from"./prop.validators-2c20cdf8.js";import"./index-0962b5a1.js";import"./index-f4596895.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";const validateSpinVariant=(a,i)=>{watchValidator(a,"_variant",(a=>"default"===a||"none"===a),new Set(["default","none"]),i)},defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.spin{display:inline-block;height:1rem;position:relative;width:3rem}.spin 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 span:first-child{background-color:#fc0;z-index:0;animation:1s infinite spin1;left:0.1rem}.spin span:nth-child(2){background-color:red;z-index:1;animation:1s infinite spin2;left:0.1rem}.spin span:nth-child(3){background-color:#000;z-index:1;animation:1s infinite spin2;left:1.1rem}.spin 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 span:first-child,.spin span:nth-child(2),.spin span:nth-child(3),.spin span:nth-child(4){animation-duration:2s}}",KolSpin=class{constructor(a){registerInstance(this,a),this.showToggled=!1,this._show=!1,this._variant="default",this.state={_variant:"default"}}render(){return h(Host,null,this.state._show?h("span",{"aria-busy":"true","aria-label":translate("kol-action-running"),"aria-live":"polite",class:"spin",role:"alert"},"default"===this.state._variant?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"})):h("slot",{name:"expert"})):this.showToggled&&h("span",{"aria-label":translate("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(a){this.showToggled=!0===this.state._show&&!1===this._show,watchBoolean(this,"_show",a)}validateVariant(a){validateSpinVariant(this,a)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};KolSpin.style={default:defaultStyleCss};export{KolSpin as kol_spin};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"kol-spin.entry.js","mappings":";;;;;;;;;;;;AAqBO,MAAM,mBAAmB,GAAG,CAAC,SAAoC,EAAE,KAAmB;EAC5F,cAAc,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,MAAM,EAAE,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AAChI,CAAC;;ACvBD,MAAM,eAAe,GAAG,
|
|
1
|
+
{"file":"kol-spin.entry.js","mappings":";;;;;;;;;;;;AAqBO,MAAM,mBAAmB,GAAG,CAAC,SAAoC,EAAE,KAAmB;EAC5F,cAAc,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,MAAM,EAAE,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AAChI,CAAC;;ACvBD,MAAM,eAAe,GAAG,8mDAA8mD;;MCuBznD,OAAO;;;IACX,gBAAW,GAAG,KAAK,CAAC;iBA4BsB,KAAK;oBAKf,SAAS;iBAEjB;MAC/B,QAAQ,EAAE,SAAS;KACnB;;EAnCM,MAAM;IACZ,QACC,EAAC,IAAI,QACH,IAAI,CAAC,KAAK,CAAC,KAAK,IAChB,yBAAgB,MAAM,gBAAa,SAAS,CAAC,oBAAoB,CAAC,eAAY,QAAQ,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,IAC9G,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS,IACjC,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,KAEX,YAAM,IAAI,EAAC,QAAQ,GAAQ,CAC3B,CACK,KAEP,IAAI,CAAC,WAAW,IAAI,0BAAkB,SAAS,CAAC,iBAAiB,CAAC,eAAY,OAAO,eAAW,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC7H,CACK,EACN;GACF;EAiBM,YAAY,CAAC,KAAe;IAClC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;IACrE,YAAY,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;GACnC;EAGM,eAAe,CAAC,KAAmB;IACzC,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GACjC;EAEM,iBAAiB;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;;;;;;;;;;;;","names":[],"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 { Generic } from '@a11y-ui/core';\nimport { watchValidator } from '../../../utils/prop.validators';\n\n/* types */\n/**\n * Loadingspinner\n * - https://github.com/vineethtrv/css-loader\n */\nexport type SpinVariant = 'default' | 'none';\n\n/** de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n */\n/** en\n * Makes hints readable for screenreaders.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariant;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariant): void => {\n\twatchValidator(component, '_variant', (value) => value === 'default' || value === 'none', new Set(['default', 'none']), value);\n};\n","@import url(../style.css);\n.spin {\n\tdisplay: inline-block;\n\theight: 1rem;\n\tposition: relative;\n\twidth: 3rem;\n}\n.spin span {\n\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\tborder-radius: 50%;\n\tborder: 0.1rem solid #fff;\n\theight: 0.8rem;\n\tposition: absolute;\n\ttop: 0.1rem;\n\twidth: 0.8rem;\n}\n.spin span:first-child {\n\tbackground-color: #fc0;\n\tz-index: 0;\n\tanimation: 1s infinite spin1;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(2) {\n\tbackground-color: red;\n\tz-index: 1;\n\tanimation: 1s infinite spin2;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(3) {\n\tbackground-color: #000;\n\tz-index: 1;\n\tanimation: 1s infinite spin2;\n\tleft: 1.1rem;\n}\n.spin span:nth-child(4) {\n\tbackground-color: #666;\n\tz-index: 0;\n\tanimation: 1s infinite spin3;\n\tleft: 2.1rem;\n}\n@keyframes spin1 {\n\t0% {\n\t\ttransform: scale(0);\n\t}\n\t100% {\n\t\ttransform: scale(1);\n\t}\n}\n@keyframes spin2 {\n\t0% {\n\t\ttransform: translate(0, 0);\n\t}\n\t100% {\n\t\ttransform: translate(1rem, 0);\n\t}\n}\n@keyframes spin3 {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\t100% {\n\t\ttransform: scale(0);\n\t}\n} /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n@media (prefers-reduced-motion) {\n\t.spin span:first-child,\n\t.spin span:nth-child(2),\n\t.spin span:nth-child(3),\n\t.spin span:nth-child(4) {\n\t\tanimation-duration: 2s;\n\t}\n}\n","import { Component, Fragment, Host, JSX, Prop, State, Watch, h } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { translate } from '../../i18n';\nimport { PropSpinVariant, SpinVariant, validateSpinVariant } from '../../types/props/variant/spin';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { PropShow } from '../../types/props';\n\ntype RequiredProps = unknown;\ntype OptionalProps = PropSpinVariant & PropShow;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = PropSpinVariant;\ntype OptionalStates = PropShow;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\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 aria-busy=\"true\" aria-label={translate('kol-action-running')} aria-live=\"polite\" class=\"spin\" role=\"alert\">\n\t\t\t\t\t\t{this.state._variant === 'default' ? (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t)}\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 * Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.\n\t */\n\t@Prop({ reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll.\n\t */\n\t@Prop() public _variant?: SpinVariant = 'default';\n\n\t@State() public state: States = {\n\t\t_variant: 'default',\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\twatchBoolean(this, '_show', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariant): 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,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{r as i,h as n,F as a,H as t}from"./index-50adf9a0.js";import{a as s}from"./i18n-b8589f01.js";import{a as e,b as r}from"./prop.validators-2c20cdf8.js";import"./index-0962b5a1.js";import"./index-f4596895.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";const o=(i,
|
|
4
|
+
import{r as i,h as n,F as a,H as t}from"./index-50adf9a0.js";import{a as s}from"./i18n-b8589f01.js";import{a as e,b as r}from"./prop.validators-2c20cdf8.js";import"./index-0962b5a1.js";import"./index-f4596895.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";const o=(i,n)=>{e(i,"_variant",(i=>"default"===i||"none"===i),new Set(["default","none"]),n)},l=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.spin{display:inline-block;height:1rem;position:relative;width:3rem}.spin 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 span:first-child{background-color:#fc0;z-index:0;animation:1s infinite spin1;left:0.1rem}.spin span:nth-child(2){background-color:red;z-index:1;animation:1s infinite spin2;left:0.1rem}.spin span:nth-child(3){background-color:#000;z-index:1;animation:1s infinite spin2;left:1.1rem}.spin 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 span:first-child,.spin span:nth-child(2),.spin span:nth-child(3),.spin span:nth-child(4){animation-duration:2s}}",p=class{constructor(n){i(this,n),this.showToggled=!1,this._show=!1,this._variant="default",this.state={_variant:"default"}}render(){return n(t,null,this.state._show?n("span",{"aria-busy":"true","aria-label":s("kol-action-running"),"aria-live":"polite",class:"spin",role:"alert"},"default"===this.state._variant?n(a,null,n("span",{class:"bg-spin-1"}),n("span",{class:"bg-spin-2"}),n("span",{class:"bg-spin-3"}),n("span",{class:"bg-neutral"})):n("slot",{name:"expert"})):this.showToggled&&n("span",{"aria-label":s("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,r(this,"_show",i)}validateVariant(i){o(this,i)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};p.style={default:l};export{p as kol_spin};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["validateSpinVariant","component","value","watchValidator","Set","defaultStyleCss","KolSpin","this","showToggled","_variant","render","h","Host","state","_show","translate","class","role","Fragment","name","validateShow","watchBoolean","validateVariant","componentWillLoad"],"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 { Generic } from '@a11y-ui/core';\nimport { watchValidator } from '../../../utils/prop.validators';\n\n/* types */\n/**\n * Loadingspinner\n * - https://github.com/vineethtrv/css-loader\n */\nexport type SpinVariant = 'default' | 'none';\n\n/** de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n */\n/** en\n * Makes hints readable for screenreaders.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariant;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariant): void => {\n\twatchValidator(component, '_variant', (value) => value === 'default' || value === 'none', new Set(['default', 'none']), value);\n};\n","@import url(../style.css);\n.spin {\n\tdisplay: inline-block;\n\theight: 1rem;\n\tposition: relative;\n\twidth: 3rem;\n}\n.spin span {\n\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\tborder-radius: 50%;\n\tborder: 0.1rem solid #fff;\n\theight: 0.8rem;\n\tposition: absolute;\n\ttop: 0.1rem;\n\twidth: 0.8rem;\n}\n.spin span:first-child {\n\tbackground-color: #fc0;\n\tz-index: 0;\n\tanimation:
|
|
1
|
+
{"version":3,"names":["validateSpinVariant","component","value","watchValidator","Set","defaultStyleCss","KolSpin","this","showToggled","_variant","render","h","Host","state","_show","translate","class","role","Fragment","name","validateShow","watchBoolean","validateVariant","componentWillLoad"],"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 { Generic } from '@a11y-ui/core';\nimport { watchValidator } from '../../../utils/prop.validators';\n\n/* types */\n/**\n * Loadingspinner\n * - https://github.com/vineethtrv/css-loader\n */\nexport type SpinVariant = 'default' | 'none';\n\n/** de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n */\n/** en\n * Makes hints readable for screenreaders.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariant;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariant): void => {\n\twatchValidator(component, '_variant', (value) => value === 'default' || value === 'none', new Set(['default', 'none']), value);\n};\n","@import url(../style.css);\n.spin {\n\tdisplay: inline-block;\n\theight: 1rem;\n\tposition: relative;\n\twidth: 3rem;\n}\n.spin span {\n\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\tborder-radius: 50%;\n\tborder: 0.1rem solid #fff;\n\theight: 0.8rem;\n\tposition: absolute;\n\ttop: 0.1rem;\n\twidth: 0.8rem;\n}\n.spin span:first-child {\n\tbackground-color: #fc0;\n\tz-index: 0;\n\tanimation: 1s infinite spin1;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(2) {\n\tbackground-color: red;\n\tz-index: 1;\n\tanimation: 1s infinite spin2;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(3) {\n\tbackground-color: #000;\n\tz-index: 1;\n\tanimation: 1s infinite spin2;\n\tleft: 1.1rem;\n}\n.spin span:nth-child(4) {\n\tbackground-color: #666;\n\tz-index: 0;\n\tanimation: 1s infinite spin3;\n\tleft: 2.1rem;\n}\n@keyframes spin1 {\n\t0% {\n\t\ttransform: scale(0);\n\t}\n\t100% {\n\t\ttransform: scale(1);\n\t}\n}\n@keyframes spin2 {\n\t0% {\n\t\ttransform: translate(0, 0);\n\t}\n\t100% {\n\t\ttransform: translate(1rem, 0);\n\t}\n}\n@keyframes spin3 {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\t100% {\n\t\ttransform: scale(0);\n\t}\n} /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n@media (prefers-reduced-motion) {\n\t.spin span:first-child,\n\t.spin span:nth-child(2),\n\t.spin span:nth-child(3),\n\t.spin span:nth-child(4) {\n\t\tanimation-duration: 2s;\n\t}\n}\n","import { Component, Fragment, Host, JSX, Prop, State, Watch, h } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { translate } from '../../i18n';\nimport { PropSpinVariant, SpinVariant, validateSpinVariant } from '../../types/props/variant/spin';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { PropShow } from '../../types/props';\n\ntype RequiredProps = unknown;\ntype OptionalProps = PropSpinVariant & PropShow;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = PropSpinVariant;\ntype OptionalStates = PropShow;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\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 aria-busy=\"true\" aria-label={translate('kol-action-running')} aria-live=\"polite\" class=\"spin\" role=\"alert\">\n\t\t\t\t\t\t{this.state._variant === 'default' ? (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t)}\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 * Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.\n\t */\n\t@Prop({ reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll.\n\t */\n\t@Prop() public _variant?: SpinVariant = 'default';\n\n\t@State() public state: States = {\n\t\t_variant: 'default',\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\twatchBoolean(this, '_show', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariant): 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"],"mappings":";;;kTAqBO,MAAMA,EAAsB,CAACC,EAAsCC,KACzEC,EAAeF,EAAW,YAAaC,GAAUA,IAAU,WAAaA,IAAU,QAAQ,IAAIE,IAAI,CAAC,UAAW,SAAUF,EAAM,ECtB/H,MAAMG,EAAkB,+mD,MCuBXC,EAAO,M,yBACXC,KAAAC,YAAc,M,WA4B4B,M,cAKV,U,WAER,CAC/BC,SAAU,U,CAlCJC,SACN,OACCC,EAACC,EAAI,KACHL,KAAKM,MAAMC,MACXH,EAAA,oBAAgB,OAAM,aAAaI,EAAU,sBAAqB,YAAY,SAASC,MAAM,OAAOC,KAAK,SACvGV,KAAKM,MAAMJ,WAAa,UACxBE,EAACO,EAAQ,KACRP,EAAA,QAAMK,MAAM,cACZL,EAAA,QAAMK,MAAM,cACZL,EAAA,QAAMK,MAAM,cACZL,EAAA,QAAMK,MAAM,gBAGbL,EAAA,QAAMQ,KAAK,YAIbZ,KAAKC,aAAeG,EAAA,qBAAkBI,EAAU,mBAAkB,YAAY,QAAO,YAAW,SAASE,KAAK,U,CAqB3GG,aAAalB,GACnBK,KAAKC,YAAcD,KAAKM,MAAMC,QAAU,MAAQP,KAAKO,QAAU,MAC/DO,EAAad,KAAM,QAASL,E,CAItBoB,gBAAgBpB,GACtBF,EAAoBO,KAAML,E,CAGpBqB,oBACNhB,KAAKa,aAAab,KAAKO,OACvBP,KAAKe,gBAAgBf,KAAKE,S"}
|
|
@@ -1,18 +1,12 @@
|
|
|
1
1
|
import { JSX } from '../../stencil-public-runtime';
|
|
2
2
|
import { Generic } from '@a11y-ui/core';
|
|
3
|
-
import { SpinVariant } from '../../types/props/variant/spin';
|
|
3
|
+
import { PropSpinVariant, SpinVariant } from '../../types/props/variant/spin';
|
|
4
|
+
import { PropShow } from '../../types/props';
|
|
4
5
|
type RequiredProps = unknown;
|
|
5
|
-
type OptionalProps =
|
|
6
|
-
show: boolean;
|
|
7
|
-
variant: SpinVariant;
|
|
8
|
-
};
|
|
6
|
+
type OptionalProps = PropSpinVariant & PropShow;
|
|
9
7
|
export type Props = Generic.Element.Members<RequiredProps, OptionalProps>;
|
|
10
|
-
type RequiredStates =
|
|
11
|
-
|
|
12
|
-
};
|
|
13
|
-
type OptionalStates = {
|
|
14
|
-
show: boolean;
|
|
15
|
-
};
|
|
8
|
+
type RequiredStates = PropSpinVariant;
|
|
9
|
+
type OptionalStates = PropShow;
|
|
16
10
|
type States = Generic.Element.Members<RequiredStates, OptionalStates>;
|
|
17
11
|
export declare class KolSpin implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {
|
|
18
12
|
private showToggled;
|
package/doc/spin.md
CHANGED
|
@@ -7,71 +7,87 @@ Ladeanzeigen, wie die **Spin**-Komponente, informieren die Nutzer:innen über La
|
|
|
7
7
|
### Code
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
+
<style>
|
|
11
|
+
/* https://github.com/vineethtrv/css-loader */
|
|
12
|
+
.loader {
|
|
13
|
+
width: 48px;
|
|
14
|
+
height: 48px;
|
|
15
|
+
border: 3px dotted #444;
|
|
16
|
+
border-style: solid solid dotted dotted;
|
|
17
|
+
border-radius: 50%;
|
|
18
|
+
display: inline-block;
|
|
19
|
+
position: relative;
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
animation: rotation 2s linear infinite;
|
|
22
|
+
}
|
|
23
|
+
.loader::after {
|
|
24
|
+
content: '';
|
|
25
|
+
box-sizing: border-box;
|
|
26
|
+
position: absolute;
|
|
27
|
+
left: 0;
|
|
28
|
+
right: 0;
|
|
29
|
+
top: 0;
|
|
30
|
+
bottom: 0;
|
|
31
|
+
margin: auto;
|
|
32
|
+
border: 3px dotted #ff3d00;
|
|
33
|
+
border-style: solid solid dotted;
|
|
34
|
+
width: 24px;
|
|
35
|
+
height: 24px;
|
|
36
|
+
border-radius: 50%;
|
|
37
|
+
animation: rotationBack 1s linear infinite;
|
|
38
|
+
transform-origin: center center;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@keyframes rotation {
|
|
42
|
+
0% {
|
|
43
|
+
transform: rotate(0deg);
|
|
44
|
+
}
|
|
45
|
+
100% {
|
|
46
|
+
transform: rotate(360deg);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
@keyframes rotationBack {
|
|
50
|
+
0% {
|
|
51
|
+
transform: rotate(0deg);
|
|
52
|
+
}
|
|
53
|
+
100% {
|
|
54
|
+
transform: rotate(-360deg);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */
|
|
59
|
+
@media (prefers-reduced-motion) {
|
|
60
|
+
.loader {
|
|
61
|
+
animation-duration: 6s;
|
|
62
|
+
}
|
|
63
|
+
.loader::after {
|
|
64
|
+
animation-duration: 3s;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
</style>
|
|
10
68
|
<div>
|
|
11
69
|
<kol-spin _show></kol-spin>
|
|
12
70
|
<!-- for a11y experts - own animation -->
|
|
13
71
|
<kol-spin _show="true" _variant="none">
|
|
14
72
|
<!-- slot for own animation : https://github.com/vineethtrv/css-loader -->
|
|
15
|
-
<span
|
|
73
|
+
<span className="loader" slot="expert"></span>
|
|
16
74
|
</kol-spin>
|
|
17
75
|
</div>
|
|
18
76
|
```
|
|
19
77
|
|
|
20
|
-
|
|
78
|
+
<kol-alert _heading="Reduce Motion" _level="4" _type="warning">Wenn möglich sollte stets auf Animationen verzichtet werden. Wenn Animationen genutzt werden, sollte immer darauf geachtet werden, eine Variante mit reduzierter Animationsgeschwindigkeit anzubieten. Mehr Informationen dazu findet sich hier:
|
|
79
|
+
<kol-link _label="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" _href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" _target="_blank"></kol-link></kol-alert>
|
|
21
80
|
|
|
22
|
-
|
|
23
|
-
/* https://github.com/vineethtrv/css-loader */
|
|
24
|
-
.loader {
|
|
25
|
-
width: 48px;
|
|
26
|
-
height: 48px;
|
|
27
|
-
border: 3px dotted #3d3d3d;
|
|
28
|
-
border-style: solid solid dotted dotted;
|
|
29
|
-
border-radius: 50%;
|
|
30
|
-
display: inline-block;
|
|
31
|
-
position: relative;
|
|
32
|
-
box-sizing: border-box;
|
|
33
|
-
animation: rotation 4s linear infinite;
|
|
34
|
-
}
|
|
35
|
-
.loader::after {
|
|
36
|
-
content: '';
|
|
37
|
-
box-sizing: border-box;
|
|
38
|
-
position: absolute;
|
|
39
|
-
left: 0;
|
|
40
|
-
right: 0;
|
|
41
|
-
top: 0;
|
|
42
|
-
bottom: 0;
|
|
43
|
-
margin: auto;
|
|
44
|
-
border: 3px dotted #ff3d00;
|
|
45
|
-
border-style: solid solid dotted;
|
|
46
|
-
width: 24px;
|
|
47
|
-
height: 24px;
|
|
48
|
-
border-radius: 50%;
|
|
49
|
-
animation: rotationBack 2s linear infinite;
|
|
50
|
-
transform-origin: center center;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
@keyframes rotation {
|
|
54
|
-
0% {
|
|
55
|
-
transform: rotate(0deg);
|
|
56
|
-
}
|
|
57
|
-
100% {
|
|
58
|
-
transform: rotate(360deg);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
@keyframes rotationBack {
|
|
62
|
-
0% {
|
|
63
|
-
transform: rotate(0deg);
|
|
64
|
-
}
|
|
65
|
-
100% {
|
|
66
|
-
transform: rotate(-360deg);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
</style>
|
|
81
|
+
### Beispiel
|
|
70
82
|
|
|
71
83
|
<kol-spin _show></kol-spin>
|
|
72
|
-
|
|
73
|
-
<span
|
|
74
|
-
|
|
84
|
+
|
|
85
|
+
<kol-spin _show="true" _variant="none"><span className="loader" slot="expert"></span></kol-spin>
|
|
86
|
+
|
|
87
|
+
<kol-details _summary="CSS Loaders & Spinners" _open>
|
|
88
|
+
Es gibt im Internet viele verschiedene CSS Loaders und Spinners. Beispielsweise bietet _Vineeth_ eine ganze Reihe interessanter CSS Loaders an. Diese können auch in der KoliBri Bibliothek genutzt werden. Dazu muss lediglich der Link zu der entsprechenden CSS Datei in den Head der HTML Datei eingebunden werden. Anschließend kann die gewünschte Animation über den Expert-Slot in die KoliBri-Komponente eingebunden werden. Hier sind einige Beispiele (ohne reduzierte Animationsgeschwindigkeit):
|
|
89
|
+
<kol-link _label="https://github.com/vineethtrv/css-loader" _href="https://github.com/vineethtrv/css-loader" _target="_blank"></kol-link>
|
|
90
|
+
</kol-details>
|
|
75
91
|
|
|
76
92
|
## Verwendung
|
|
77
93
|
|