@public-ui/components 1.5.2-rc.0 → 1.5.2-rc.1
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/assets/codicons/codicon.css +12 -1
- package/assets/codicons/codicon.csv +7 -2
- package/assets/codicons/codicon.html +53 -13
- package/assets/codicons/codicon.svg +1 -1
- package/assets/codicons/codicon.ttf +0 -0
- package/cheat-sheet.html +6 -6
- package/custom-elements.json +1 -1
- package/dist/cjs/kol-button-wc_3.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-progress.cjs.entry.js +1 -1
- package/dist/cjs/kol-progress.cjs.entry.js.map +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/component3.js.map +1 -1
- package/dist/components/kol-progress.js +1 -1
- package/dist/components/kol-progress.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-button-wc_3.entry.js.map +1 -1
- package/dist/esm/kol-progress.entry.js +1 -1
- package/dist/esm/kol-progress.entry.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-button-wc_3.entry.js.map +1 -1
- package/dist/kolibri/kol-progress.entry.js +1 -1
- package/dist/kolibri/kol-progress.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 -5
- package/dist/types/components.d.ts +4 -2
- package/dist/types/types/props/variant/spin.d.ts +6 -0
- package/jest-test-results.json +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{r as i,h as
|
|
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,a)=>{e(i,"_variant",(i=>"default"===i||"none"===i),new Set(["default","none"]),a)},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:2s infinite spin1;left:0.1rem}.spin span:nth-child(2){background-color:red;z-index:1;animation:2s infinite spin2;left:0.1rem}.spin span:nth-child(3){background-color:#000;z-index:1;animation:2s infinite spin2;left:1.1rem}.spin span:nth-child(4){background-color:#666;z-index:0;animation:2s 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)}}",p=class{constructor(a){i(this,a),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":["defaultStyleCss","KolSpin","this","showToggled","_variant","render","h","Host","state","_show","translate","class","role","Fragment","name","validateShow","
|
|
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: 2s infinite spin1;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(2) {\n\tbackground-color: red;\n\tz-index: 1;\n\tanimation: 2s infinite spin2;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(3) {\n\tbackground-color: #000;\n\tz-index: 1;\n\tanimation: 2s infinite spin2;\n\tleft: 1.1rem;\n}\n.spin span:nth-child(4) {\n\tbackground-color: #666;\n\tz-index: 0;\n\tanimation: 2s 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}\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 { SpinVariant, validateSpinVariant } from '../../types/props/variant/spin';\nimport { watchBoolean } from '../../utils/prop.validators';\n\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\tshow: boolean;\n\tvariant: SpinVariant;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tvariant: SpinVariant;\n};\ntype OptionalStates = {\n\tshow: boolean;\n};\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,y9C,MC6BXC,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,14 +1,14 @@
|
|
|
1
1
|
import { JSX } from '../../stencil-public-runtime';
|
|
2
2
|
import { Generic } from '@a11y-ui/core';
|
|
3
|
-
|
|
3
|
+
import { SpinVariant } from '../../types/props/variant/spin';
|
|
4
4
|
type RequiredProps = unknown;
|
|
5
5
|
type OptionalProps = {
|
|
6
6
|
show: boolean;
|
|
7
|
-
variant:
|
|
7
|
+
variant: SpinVariant;
|
|
8
8
|
};
|
|
9
9
|
export type Props = Generic.Element.Members<RequiredProps, OptionalProps>;
|
|
10
10
|
type RequiredStates = {
|
|
11
|
-
variant:
|
|
11
|
+
variant: SpinVariant;
|
|
12
12
|
};
|
|
13
13
|
type OptionalStates = {
|
|
14
14
|
show: boolean;
|
|
@@ -18,10 +18,10 @@ export declare class KolSpin implements Generic.Element.ComponentApi<RequiredPro
|
|
|
18
18
|
private showToggled;
|
|
19
19
|
render(): JSX.Element;
|
|
20
20
|
_show?: boolean;
|
|
21
|
-
_variant?:
|
|
21
|
+
_variant?: SpinVariant;
|
|
22
22
|
state: States;
|
|
23
23
|
validateShow(value?: boolean): void;
|
|
24
|
-
validateVariant(value?:
|
|
24
|
+
validateVariant(value?: SpinVariant): void;
|
|
25
25
|
componentWillLoad(): void;
|
|
26
26
|
}
|
|
27
27
|
export {};
|
|
@@ -34,6 +34,7 @@ import { PaginationHasButton } from "./components/pagination/component";
|
|
|
34
34
|
import { KoliBriPaginationButtonCallbacks } from "./components/pagination/types";
|
|
35
35
|
import { KoliBriProgressType } from "./types/progress";
|
|
36
36
|
import { KoliBriQuoteVariant } from "./components/quote/types";
|
|
37
|
+
import { SpinVariant } from "./types/props/variant/spin";
|
|
37
38
|
import { KoliBriSplitButtonCallback } from "./components/split-button/types";
|
|
38
39
|
import { KoliBriDataType, KoliBriTableHeaders, KoliBriTablePaginationProps } from "./types/table";
|
|
39
40
|
import { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/component";
|
|
@@ -68,6 +69,7 @@ export { PaginationHasButton } from "./components/pagination/component";
|
|
|
68
69
|
export { KoliBriPaginationButtonCallbacks } from "./components/pagination/types";
|
|
69
70
|
export { KoliBriProgressType } from "./types/progress";
|
|
70
71
|
export { KoliBriQuoteVariant } from "./components/quote/types";
|
|
72
|
+
export { SpinVariant } from "./types/props/variant/spin";
|
|
71
73
|
export { KoliBriSplitButtonCallback } from "./components/split-button/types";
|
|
72
74
|
export { KoliBriDataType, KoliBriTableHeaders, KoliBriTablePaginationProps } from "./types/table";
|
|
73
75
|
export { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/component";
|
|
@@ -2099,7 +2101,7 @@ export namespace Components {
|
|
|
2099
2101
|
/**
|
|
2100
2102
|
* Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll.
|
|
2101
2103
|
*/
|
|
2102
|
-
"_variant"?:
|
|
2104
|
+
"_variant"?: SpinVariant;
|
|
2103
2105
|
}
|
|
2104
2106
|
interface KolSplitButton {
|
|
2105
2107
|
/**
|
|
@@ -4830,7 +4832,7 @@ declare namespace LocalJSX {
|
|
|
4830
4832
|
/**
|
|
4831
4833
|
* Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll.
|
|
4832
4834
|
*/
|
|
4833
|
-
"_variant"?:
|
|
4835
|
+
"_variant"?: SpinVariant;
|
|
4834
4836
|
}
|
|
4835
4837
|
interface KolSplitButton {
|
|
4836
4838
|
/**
|