@kyndryl-design-system/shidoka-applications 1.27.13 → 1.29.0

package/_virtual/_commonjsHelpers.js

@@ -0,0 +1,2 @@
+var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}export{e as commonjsGlobal,o as getDefaultExportFromCjs};
+//# sourceMappingURL=_commonjsHelpers.js.map

package/_virtual/_commonjsHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/_virtual/lottie.js

@@ -0,0 +1,2 @@
+var e={exports:{}};export{e as __module};
+//# sourceMappingURL=lottie.js.map

package/_virtual/lottie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lottie.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/reusable/loaders/index.d.ts

@@ -0,0 +1,4 @@
+export { Loader } from './loader';
+export { LoaderInline } from './inline';
+export { Skeleton } from './skeleton';
+//# sourceMappingURL=index.d.ts.map

package/components/reusable/loaders/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/loaders/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/components/reusable/loaders/index.js

@@ -0,0 +1,2 @@
+export{Loader}from"./loader.js";export{LoaderInline}from"./inline.js";export{Skeleton}from"./skeleton.js";
+//# sourceMappingURL=index.js.map

package/components/reusable/loaders/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/reusable/loaders/inline.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import '@kyndryl-design-system/shidoka-foundation/components/icon';
+/**
+ * Inline Loader.
+ * @fires on-start - Emits when the loader been started.
+ * @fires on-stop - Emits when the loader has been stopped and all animations have completed.
+ * @slot unnamed - Slot for text/description.
+ */
+export declare class LoaderInline extends LitElement {
+    static styles: import("lit").CSSResultGroup;
+    /** Status. Can be `active`, `inactive`, `success`, `error`. */
+    status: string;
+    /** Animation loop has finished and stopped
+     * @internal
+     */
+    private _stopped;
+    /** Hidden state
+     * @internal
+     */
+    private _hidden;
+    /** Animation container element
+     * @internal
+     */
+    private _containerEl;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changedProps: any): void;
+    private _emitStart;
+    private _emitStop;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kyn-loader-inline': LoaderInline;
+    }
+}
+//# sourceMappingURL=inline.d.ts.map

package/components/reusable/loaders/inline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/loaders/inline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,2DAA2D,CAAC;AAInE;;;;;GAKG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAU;IAEhC,+DAA+D;IAE/D,MAAM,SAAY;IAElB;;OAEG;IAEH,OAAO,CAAC,QAAQ,CAAS;IAQzB;;OAEG;IAEH,OAAO,CAAC,OAAO,CAAS;IAExB;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAO;IAQlB,MAAM;IAsBN,YAAY;IA+BZ,OAAO,CAAC,YAAY,EAAE,GAAG;IAelC,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,SAAS;CAIlB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}

package/components/reusable/loaders/inline.js

@@ -0,0 +1,12 @@
+import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as s}from'./../../../external/lit-element/lit-element.js';import{customElement as o}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as i}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as r}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as n}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as d}from'./../../../external/lit-html/directives/class-map.js';import a from'./../../../external/lottie-web/build/player/lottie.js';import m from"./json/indeterminate.json.js";import l from"./inline.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import p from'./../../../external/@carbon/icons/es/checkmark--filled/16.js';import c from'./../../../external/@carbon/icons/es/error--filled/16.js';let u=class extends s{constructor(){super(...arguments),this.status="active",this._stopped=!1,this._hidden=!1}render(){const t={wrapper:!0,stopped:this._stopped,hidden:this._hidden,"status-success":"success"===this.status,"status-error":"error"===this.status};return e`
+      <div class="${d(t)}">
+        <div class="container"></div>
+
+        <kd-icon class="status-icon success" .icon=${p}></kd-icon>
+
+        <kd-icon class="status-icon error" .icon=${c}></kd-icon>
+
+        <slot></slot>
+      </div>
+    `}firstUpdated(){this._stopped="active"!==this.status,this._hidden=this._stopped,a.loadAnimation({container:this._containerEl,renderer:"svg",loop:!0,autoplay:!0,animationData:m}),this._containerEl.addEventListener("transitionend",(()=>{this._stopped&&(this._hidden=!0,this._emitStop())}))}updated(t){t.has("status")&&("active"===this.status?(this._stopped=!1,this._hidden=!1,this._emitStart()):this._stopped=!0)}_emitStart(){const t=new CustomEvent("on-start");this.dispatchEvent(t)}_emitStop(){const t=new CustomEvent("on-stop");this.dispatchEvent(t)}};u.styles=l,t([i({type:String})],u.prototype,"status",void 0),t([r()],u.prototype,"_stopped",void 0),t([r()],u.prototype,"_hidden",void 0),t([n(".container")],u.prototype,"_containerEl",void 0),u=t([o("kyn-loader-inline")],u);export{u as LoaderInline};
+//# sourceMappingURL=inline.js.map

package/components/reusable/loaders/inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline.js","sources":["../../../../src/components/reusable/loaders/inline.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport lottie from 'lottie-web';\nimport animationData from './json/indeterminate.json';\nimport Styles from './inline.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport successIcon from '@carbon/icons/es/checkmark--filled/16';\nimport errorIcon from '@carbon/icons/es/error--filled/16';\n\n/**\n * Inline Loader.\n * @fires on-start - Emits when the loader been started.\n * @fires on-stop - Emits when the loader has been stopped and all animations have completed.\n * @slot unnamed - Slot for text/description.\n */\n@customElement('kyn-loader-inline')\nexport class LoaderInline extends LitElement {\n  static override styles = Styles;\n\n  /** Status. Can be `active`, `inactive`, `success`, `error`. */\n  @property({ type: String })\n  status = 'active';\n\n  /** Animation loop has finished and stopped\n   * @internal\n   */\n  @state()\n  private _stopped = false;\n\n  // /** Wrapper element\n  //  * @internal\n  //  */\n  // @query('.wrapper')\n  // private _wrapperEl!: any;\n\n  /** Hidden state\n   * @internal\n   */\n  @state()\n  private _hidden = false;\n\n  /** Animation container element\n   * @internal\n   */\n  @query('.container')\n  private _containerEl!: any;\n\n  // /** Animation instance\n  //  * @internal\n  //  */\n  // @state()\n  // private _animation!: any;\n\n  override render() {\n    const Classes = {\n      wrapper: true,\n      stopped: this._stopped,\n      hidden: this._hidden,\n      'status-success': this.status === 'success',\n      'status-error': this.status === 'error',\n    };\n\n    return html`\n      <div class=\"${classMap(Classes)}\">\n        <div class=\"container\"></div>\n\n        <kd-icon class=\"status-icon success\" .icon=${successIcon}></kd-icon>\n\n        <kd-icon class=\"status-icon error\" .icon=${errorIcon}></kd-icon>\n\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  override firstUpdated() {\n    // sync internal states\n    this._stopped = this.status !== 'active';\n    this._hidden = this._stopped;\n\n    // initialize the animation\n    lottie.loadAnimation({\n      container: this._containerEl, // the dom element that will contain the animation\n      renderer: 'svg',\n      loop: true,\n      autoplay: true,\n      animationData: animationData,\n    });\n\n    // stop the animation at the end of the loop\n    // this._animation.addEventListener('loopComplete', () => {\n    //   if (this.status !== 'active') {\n    //     this._animation.stop();\n    //     this._stopped = true;\n    //   }\n    // });\n\n    // hide the wrapper element after stopped and transitionend\n    this._containerEl.addEventListener('transitionend', () => {\n      if (this._stopped) {\n        this._hidden = true;\n        this._emitStop();\n      }\n    });\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('status')) {\n      // play the animation if stopped prop changes to false\n      if (this.status === 'active') {\n        // this._animation.play();\n        this._stopped = false;\n        this._hidden = false;\n        this._emitStart();\n      } else {\n        // this._animation.pause();\n        this._stopped = true;\n      }\n    }\n  }\n\n  private _emitStart() {\n    const event = new CustomEvent('on-start');\n    this.dispatchEvent(event);\n  }\n\n  private _emitStop() {\n    const event = new CustomEvent('on-stop');\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-loader-inline': LoaderInline;\n  }\n}\n"],"names":["LoaderInline","LitElement","constructor","this","status","_stopped","_hidden","render","Classes","wrapper","stopped","hidden","html","classMap","successIcon","errorIcon","firstUpdated","lottie","loadAnimation","container","_containerEl","renderer","loop","autoplay","animationData","addEventListener","_emitStop","updated","changedProps","has","_emitStart","event","CustomEvent","dispatchEvent","styles","Styles","__decorate","property","type","String","prototype","state","query","customElement"],"mappings":"iqCAiBO,IAAMA,EAAN,cAA2BC,EAA3B,WAAAC,uBAKLC,KAAMC,OAAG,SAMDD,KAAQE,UAAG,EAYXF,KAAOG,SAAG,CA2FnB,CA7EU,MAAAC,GACP,MAAMC,EAAU,CACdC,SAAS,EACTC,QAASP,KAAKE,SACdM,OAAQR,KAAKG,QACb,iBAAkC,YAAhBH,KAAKC,OACvB,eAAgC,UAAhBD,KAAKC,QAGvB,OAAOQ,CAAI;oBACKC,EAASL;;;qDAGwBM;;mDAEFC;;;;KAKhD,CAEQ,YAAAC,GAEPb,KAAKE,SAA2B,WAAhBF,KAAKC,OACrBD,KAAKG,QAAUH,KAAKE,SAGpBY,EAAOC,cAAc,CACnBC,UAAWhB,KAAKiB,aAChBC,SAAU,MACVC,MAAM,EACNC,UAAU,EACVC,cAAeA,IAYjBrB,KAAKiB,aAAaK,iBAAiB,iBAAiB,KAC9CtB,KAAKE,WACPF,KAAKG,SAAU,EACfH,KAAKuB,YACN,GAEJ,CAEQ,OAAAC,CAAQC,GACXA,EAAaC,IAAI,YAEC,WAAhB1B,KAAKC,QAEPD,KAAKE,UAAW,EAChBF,KAAKG,SAAU,EACfH,KAAK2B,cAGL3B,KAAKE,UAAW,EAGrB,CAEO,UAAAyB,GACN,MAAMC,EAAQ,IAAIC,YAAY,YAC9B7B,KAAK8B,cAAcF,EACpB,CAEO,SAAAL,GACN,MAAMK,EAAQ,IAAIC,YAAY,WAC9B7B,KAAK8B,cAAcF,EACpB,GAhHe/B,EAAMkC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACAvC,EAAAwC,UAAA,cAAA,GAMlBJ,EAAA,CADCK,KACwBzC,EAAAwC,UAAA,gBAAA,GAYzBJ,EAAA,CADCK,KACuBzC,EAAAwC,UAAA,eAAA,GAMxBJ,EAAA,CADCM,EAAM,eACoB1C,EAAAwC,UAAA,oBAAA,GA7BhBxC,EAAYoC,EAAA,CADxBO,EAAc,sBACF3C"}

package/components/reusable/loaders/inline.scss.js

@@ -0,0 +1,81 @@
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var t=e`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:root {
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
+}
+
+:host {
+  display: inline-block;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 250ms ease-in-out;
+}
+.stopped .container {
+  opacity: 0;
+}
+.hidden .container {
+  visibility: hidden;
+}
+
+.wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+svg {
+  display: block;
+  width: 16px !important;
+}
+
+.status-icon {
+  position: absolute;
+  left: 0;
+  transition: opacity 250ms ease-in-out;
+  opacity: 0;
+}
+
+.success {
+  color: var(--kd-color-text-success);
+}
+.status-success .success {
+  opacity: 1;
+}
+
+.error {
+  color: var(--kd-color-text-error);
+}
+.status-error .error {
+  opacity: 1;
+}`;export{t as default};
+//# sourceMappingURL=inline.scss.js.map

package/components/reusable/loaders/inline.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/loaders/json/indeterminate.json.js

@@ -0,0 +1,2 @@
+var i="4.8.0",a={g:"LottieFiles AE 3.5.7",a:"",k:"",d:"",tc:""},x=30,t=0,k=60,r=500,o=500,m="Indeterminate Load",s=0,e=[{id:"comp_0",layers:[{ddd:0,ind:1,ty:4,nm:"Loader",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[325,325,0],ix:2},a:{a:0,k:[0,0,0],ix:1},s:{a:0,k:[90,90,100],ix:6}},ao:0,shapes:[{ty:"gr",it:[{ty:"rc",d:1,s:{a:0,k:[500,500],ix:2},p:{a:0,k:[0,0],ix:3},r:{a:0,k:500,ix:4},nm:"Rectangle Path 1",mn:"ADBE Vector Shape - Rect",hd:!1},{ty:"tm",s:{a:0,k:100,ix:1},e:{a:0,k:75,ix:2},o:{a:1,k:[{i:{x:[.833],y:[.587]},o:{x:[.167],y:[.167]},t:0,s:[0]},{t:99,s:[1440]}],ix:3,x:"var $bm_rt;\n$bm_rt = loopOut();"},m:1,ix:2,nm:"Trim Paths 1",mn:"ADBE Vector Filter - Trim",hd:!1},{ty:"st",c:{a:1,k:[{i:{x:[.833],y:[.833]},o:{x:[.167],y:[.167]},t:0,s:[.160784319043,.439215689898,.478431373835,1]},{i:{x:[.833],y:[.833]},o:{x:[.167],y:[.167]},t:10,s:[.215686276555,.592156887054,.643137276173,1]},{i:{x:[.833],y:[.833]},o:{x:[.167],y:[.167]},t:20,s:[.160784319043,.439215689898,.478431373835,1]},{i:{x:[.833],y:[.833]},o:{x:[.167],y:[.167]},t:30,s:[.215686276555,.592156887054,.643137276173,1]},{i:{x:[.833],y:[.833]},o:{x:[.167],y:[.167]},t:40,s:[.160784319043,.439215689898,.478431373835,1]},{i:{x:[.833],y:[.833]},o:{x:[.167],y:[.167]},t:50,s:[.215686276555,.592156887054,.643137276173,1]},{i:{x:[.833],y:[.833]},o:{x:[.167],y:[.167]},t:60,s:[.160784319043,.439215689898,.478431373835,1]},{i:{x:[.833],y:[.833]},o:{x:[.167],y:[.167]},t:70,s:[.215686276555,.592156887054,.643137276173,1]},{i:{x:[.833],y:[.833]},o:{x:[.167],y:[.167]},t:80,s:[.160784319043,.439215689898,.478431373835,1]},{i:{x:[.833],y:[.833]},o:{x:[.167],y:[.167]},t:90,s:[.215686276555,.592156887054,.643137276173,1]},{i:{x:[.833],y:[.833]},o:{x:[.167],y:[.167]},t:100,s:[.160784319043,.439215689898,.478431373835,1]},{t:110,s:[.215686276555,.592156887054,.643137276173,1]}],ix:3},o:{a:0,k:100,ix:4},w:{a:0,k:50,ix:5},lc:2,lj:1,ml:4,bm:0,nm:"Stroke 1",mn:"ADBE Vector Graphic - Stroke",hd:!1},{ty:"gf",o:{a:0,k:100,ix:10},r:1,bm:0,g:{p:3,k:{a:0,k:[0,1,.275,.176,.5,.592,.388,.363,1,.184,.502,.549],ix:9}},s:{a:0,k:[0,0],ix:5},e:{a:0,k:[100,0],ix:6},t:1,nm:"Gradient Fill 1",mn:"ADBE Vector Graphic - G-Fill",hd:!0},{ty:"tr",p:{a:0,k:[0,0],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform"}],nm:"Red",np:4,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:!1},{ty:"gr",it:[{ty:"rc",d:1,s:{a:0,k:[500,500],ix:2},p:{a:0,k:[0,0],ix:3},r:{a:0,k:500,ix:4},nm:"Rectangle Path 1",mn:"ADBE Vector Shape - Rect",hd:!1},{ty:"tm",s:{a:0,k:100,ix:1},e:{a:0,k:0,ix:2},o:{a:0,k:0,ix:3},m:1,ix:2,nm:"Trim Paths 1",mn:"ADBE Vector Filter - Trim",hd:!0},{ty:"st",c:{a:0,k:[.960784316063,.956862747669,.952941179276,1],ix:3},o:{a:0,k:100,ix:4},w:{a:0,k:50,ix:5},lc:2,lj:1,ml:4,bm:0,nm:"Stroke 1",mn:"ADBE Vector Graphic - Stroke",hd:!1},{ty:"gf",o:{a:0,k:100,ix:10},r:1,bm:0,g:{p:3,k:{a:0,k:[0,1,.275,.176,.5,.592,.388,.363,1,.184,.502,.549],ix:9}},s:{a:0,k:[0,0],ix:5},e:{a:0,k:[100,0],ix:6},t:1,nm:"Gradient Fill 1",mn:"ADBE Vector Graphic - G-Fill",hd:!0},{ty:"tr",p:{a:0,k:[0,0],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform"}],nm:"Base",np:4,cix:2,bm:0,ix:2,mn:"ADBE Vector Group",hd:!1}],ip:0,op:60,st:0,bm:0}]}],y=[{ddd:0,ind:1,ty:0,nm:"Loader ",refId:"comp_0",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[250,250,0],ix:2},a:{a:0,k:[325,325,0],ix:1},s:{a:0,k:[100,100,100],ix:6}},ao:0,w:650,h:650,ip:0,op:60,st:0,bm:0}],n=[],d={v:i,meta:a,fr:30,ip:0,op:60,w:500,h:500,nm:m,ddd:0,assets:e,layers:y,markers:n};export{e as assets,s as ddd,d as default,x as fr,o as h,t as ip,y as layers,n as markers,a as meta,m as nm,k as op,i as v,r as w};
+//# sourceMappingURL=indeterminate.json.js.map

package/components/reusable/loaders/json/indeterminate.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"indeterminate.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/reusable/loaders/json/loader.json.js

@@ -0,0 +1,2 @@
+var i="4.8.0",a={g:"LottieFiles AE 3.5.7",a:"",k:"",d:"",tc:""},x=30,t=0,n=101,k=500,m=500,o="Pre Loader",s=0,l=[{id:"comp_0",layers:[{ddd:0,ind:1,ty:0,nm:"Loader",refId:"comp_1",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[250,250,0],ix:2},a:{a:0,k:[960,540,0],ix:1},s:{a:0,k:[100,100,100],ix:6}},ao:0,ef:[{ty:21,nm:"Fill",np:9,mn:"ADBE Fill",ix:1,en:1,ef:[{ty:10,nm:"Fill Mask",mn:"ADBE Fill-0001",ix:1,v:{a:0,k:0,ix:1}},{ty:7,nm:"All Masks",mn:"ADBE Fill-0007",ix:2,v:{a:0,k:0,ix:2}},{ty:2,nm:"Color",mn:"ADBE Fill-0002",ix:3,v:{a:0,k:[.184313729405,.501960813999,.549019634724,1],ix:3}},{ty:7,nm:"Invert",mn:"ADBE Fill-0006",ix:4,v:{a:0,k:0,ix:4}},{ty:0,nm:"Horizontal Feather",mn:"ADBE Fill-0003",ix:5,v:{a:0,k:0,ix:5}},{ty:0,nm:"Vertical Feather",mn:"ADBE Fill-0004",ix:6,v:{a:0,k:0,ix:6}},{ty:0,nm:"Opacity",mn:"ADBE Fill-0005",ix:7,v:{a:0,k:1,ix:7}}]}],w:1920,h:1080,ip:23,op:101,st:23,bm:0},{ddd:0,ind:2,ty:0,nm:"Loader",refId:"comp_1",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[250,250,0],ix:2},a:{a:0,k:[960,540,0],ix:1},s:{a:0,k:[100,100,100],ix:6}},ao:0,ef:[{ty:21,nm:"Fill",np:9,mn:"ADBE Fill",ix:1,en:1,ef:[{ty:10,nm:"Fill Mask",mn:"ADBE Fill-0001",ix:1,v:{a:0,k:0,ix:1}},{ty:7,nm:"All Masks",mn:"ADBE Fill-0007",ix:2,v:{a:0,k:0,ix:2}},{ty:2,nm:"Color",mn:"ADBE Fill-0002",ix:3,v:{a:0,k:[1,0,0,1],ix:3}},{ty:7,nm:"Invert",mn:"ADBE Fill-0006",ix:4,v:{a:0,k:0,ix:4}},{ty:0,nm:"Horizontal Feather",mn:"ADBE Fill-0003",ix:5,v:{a:0,k:0,ix:5}},{ty:0,nm:"Vertical Feather",mn:"ADBE Fill-0004",ix:6,v:{a:0,k:0,ix:6}},{ty:0,nm:"Opacity",mn:"ADBE Fill-0005",ix:7,v:{a:0,k:1,ix:7}}]}],w:1920,h:1080,ip:0,op:101,st:0,bm:0},{ddd:0,ind:3,ty:4,nm:"Filler",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[250,250,0],ix:2},a:{a:0,k:[0,0,0],ix:1},s:{a:0,k:[100,100,100],ix:6}},ao:0,shapes:[{ty:"gr",it:[{d:1,ty:"el",s:{a:0,k:[120,120],ix:2},p:{a:0,k:[0,0],ix:3},nm:"Ellipse Path 1",mn:"ADBE Vector Shape - Ellipse",hd:!1},{ty:"fl",c:{a:0,k:[.976470588235,.976470588235,.976470588235,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:!1},{ty:"tr",p:{a:0,k:[0,0],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform"}],nm:"Ellipse 1",np:3,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:!1}],ip:0,op:101,st:0,bm:0}]},{id:"comp_1",layers:[{ddd:0,ind:1,ty:4,nm:"Mask",td:1,sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[964,540,0],ix:2},a:{a:0,k:[0,0,0],ix:1},s:{a:0,k:[100,100,100],ix:6}},ao:0,shapes:[{ty:"gr",it:[{ty:"rc",d:1,s:{a:0,k:[130.395,368.008],ix:2},p:{a:0,k:[0,3],ix:3},r:{a:0,k:73,ix:4},nm:"Rectangle Path 1",mn:"ADBE Vector Shape - Rect",hd:!1},{ty:"fl",c:{a:0,k:[.13275122549,.13275122549,.13275122549,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:!1},{ty:"tr",p:{a:0,k:[-3.311,-127.861],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[94.051,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform"}],nm:"Rectangle 1",np:3,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:!1}],ip:0,op:900,st:0,bm:0},{ddd:0,ind:2,ty:4,nm:"Fill 2",parent:3,tt:1,sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:1,k:[{i:{x:0,y:1},o:{x:.333,y:0},t:0,s:[0,-57,0],to:[0,0,0],ti:[0,0,0]},{i:{x:.667,y:.667},o:{x:.333,y:.333},t:22,s:[0,-160,0],to:[0,0,0],ti:[0,0,0]},{i:{x:.215,y:1},o:{x:.333,y:0},t:33,s:[0,-160,0],to:[0,0,0],ti:[0,0,0]},{i:{x:.387,y:1},o:{x:.712,y:0},t:51,s:[0,-189,0],to:[0,0,0],ti:[0,0,0]},{t:78,s:[0,120,0]}],ix:2},a:{a:0,k:[0,0,0],ix:1},s:{a:1,k:[{i:{x:[0,0,.667],y:[1,1,1]},o:{x:[.333,.333,.333],y:[0,0,0]},t:0,s:[0,0,100]},{t:22,s:[100,100,100]}],ix:6}},ao:0,ef:[{ty:5,nm:"Echo",np:7,mn:"ADBE Echo",ix:1,en:1,ef:[{ty:0,nm:"Echo Time (seconds)",mn:"ADBE Echo-0001",ix:1,v:{a:0,k:-.003,ix:1}},{ty:0,nm:"Number Of Echoes",mn:"ADBE Echo-0002",ix:2,v:{a:0,k:20,ix:2}},{ty:0,nm:"Starting Intensity",mn:"ADBE Echo-0003",ix:3,v:{a:0,k:1,ix:3}},{ty:0,nm:"Decay",mn:"ADBE Echo-0004",ix:4,v:{a:0,k:.701,ix:4}},{ty:7,nm:"Echo Operator",mn:"ADBE Echo-0005",ix:5,v:{a:0,k:2,ix:5}}]}],shapes:[{ty:"gr",it:[{d:1,ty:"el",s:{a:0,k:[120,120],ix:2},p:{a:0,k:[0,0],ix:3},nm:"Ellipse Path 1",mn:"ADBE Vector Shape - Ellipse",hd:!1},{ty:"fl",c:{a:0,k:[.13275122549,.13275122549,.13275122549,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:!1},{ty:"tr",p:{a:0,k:[0,0],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform"}],nm:"Ellipse 1",np:3,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:!1}],ip:55,op:900,st:0,bm:0},{ddd:0,ind:3,ty:3,nm:"Controller",sr:1,ks:{o:{a:0,k:0,ix:11},r:{a:1,k:[{i:{x:[.352],y:[1]},o:{x:[.659],y:[0]},t:10,s:[0]},{t:55,s:[-360]}],ix:10},p:{a:0,k:[960,540,0],ix:2},a:{a:0,k:[0,0,0],ix:1},s:{a:0,k:[100,100,100],ix:6}},ao:0,ip:0,op:900,st:0,bm:0},{ddd:0,ind:4,ty:4,nm:"Fill 1",parent:3,sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:1,k:[{i:{x:0,y:1},o:{x:.333,y:0},t:0,s:[0,-57,0],to:[0,0,0],ti:[0,0,0]},{i:{x:.667,y:.667},o:{x:.333,y:.333},t:22,s:[0,-160,0],to:[0,0,0],ti:[0,0,0]},{i:{x:.215,y:1},o:{x:.333,y:0},t:33,s:[0,-160,0],to:[0,0,0],ti:[0,0,0]},{i:{x:.387,y:1},o:{x:.712,y:0},t:51,s:[0,-189,0],to:[0,0,0],ti:[0,0,0]},{t:78,s:[0,120,0]}],ix:2},a:{a:0,k:[0,0,0],ix:1},s:{a:1,k:[{i:{x:[0,0,.667],y:[1,1,1]},o:{x:[.333,.333,.333],y:[0,0,0]},t:0,s:[0,0,100]},{t:22,s:[100,100,100]}],ix:6}},ao:0,ef:[{ty:5,nm:"Echo",np:7,mn:"ADBE Echo",ix:1,en:1,ef:[{ty:0,nm:"Echo Time (seconds)",mn:"ADBE Echo-0001",ix:1,v:{a:0,k:-.003,ix:1}},{ty:0,nm:"Number Of Echoes",mn:"ADBE Echo-0002",ix:2,v:{a:0,k:20,ix:2}},{ty:0,nm:"Starting Intensity",mn:"ADBE Echo-0003",ix:3,v:{a:0,k:1,ix:3}},{ty:0,nm:"Decay",mn:"ADBE Echo-0004",ix:4,v:{a:0,k:.8,ix:4}},{ty:7,nm:"Echo Operator",mn:"ADBE Echo-0005",ix:5,v:{a:0,k:2,ix:5}}]}],shapes:[{ty:"gr",it:[{d:1,ty:"el",s:{a:0,k:[120,120],ix:2},p:{a:0,k:[0,0],ix:3},nm:"Ellipse Path 1",mn:"ADBE Vector Shape - Ellipse",hd:!1},{ty:"fl",c:{a:0,k:[.13275122549,.13275122549,.13275122549,1],ix:4},o:{a:0,k:100,ix:5},r:1,bm:0,nm:"Fill 1",mn:"ADBE Vector Graphic - Fill",hd:!1},{ty:"tr",p:{a:0,k:[0,0],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform"}],nm:"Ellipse 1",np:3,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:!1}],ip:0,op:55,st:0,bm:0}]}],r=[{ddd:0,ind:1,ty:0,nm:"Loader Main",refId:"comp_0",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[250,260.025,0],ix:2},a:{a:0,k:[250,250,0],ix:1},s:{a:0,k:[100,100,100],ix:6}},ao:0,w:500,h:500,ip:0,op:101,st:0,bm:0}],e=[],y={v:i,meta:a,fr:30,ip:0,op:101,w:500,h:500,nm:o,ddd:0,assets:l,layers:r,markers:e};export{l as assets,s as ddd,y as default,x as fr,m as h,t as ip,r as layers,e as markers,a as meta,o as nm,n as op,i as v,k as w};
+//# sourceMappingURL=loader.json.js.map

package/components/reusable/loaders/json/loader.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/reusable/loaders/loader.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+/**
+ * Loader.
+ * @fires on-start - Emits when the loader been started.
+ * @fires on-stop - Emits when the loader has been stopped and all animations have completed.
+ */
+export declare class Loader extends LitElement {
+    static styles: import("lit").CSSResultGroup;
+    /** Animation stopped state */
+    stopped: boolean;
+    /** Display the loader as an overlay */
+    overlay: boolean;
+    /** Animation loop has finished and stopped
+     * @internal
+     */
+    private _stopped;
+    /** Wrapper element
+     * @internal
+     */
+    private _wrapperEl;
+    /** Hidden state
+     * @internal
+     */
+    private _hidden;
+    /** Animation container element
+     * @internal
+     */
+    private _containerEl;
+    /** Animation instance
+     * @internal
+     */
+    private _animation;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changedProps: any): void;
+    private _emitStart;
+    private _emitStop;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kyn-loader': Loader;
+    }
+}
+//# sourceMappingURL=loader.d.ts.map

package/components/reusable/loaders/loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/loaders/loader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC;;;;GAIG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,+BAAU;IAEhC,8BAA8B;IAE9B,OAAO,UAAS;IAEhB,uCAAuC;IAEvC,OAAO,UAAS;IAEhB;;OAEG;IAEH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAO;IAEzB;;OAEG;IAEH,OAAO,CAAC,OAAO,CAAS;IAExB;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAO;IAE3B;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAO;IAEhB,MAAM;IAeN,YAAY;IA+BZ,OAAO,CAAC,YAAY,EAAE,GAAG;IAYlC,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,SAAS;CAIlB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAC;KACtB;CACF"}

package/components/reusable/loaders/loader.js

@@ -0,0 +1,6 @@
+import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as i}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as r}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as p}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as d}from'./../../../external/lit-html/directives/class-map.js';import n from'./../../../external/lottie-web/build/player/lottie.js';import a from"./json/loader.json.js";import l from"./loader.scss.js";let m=class extends o{constructor(){super(...arguments),this.stopped=!1,this.overlay=!1,this._stopped=!1,this._hidden=!1}render(){const t={wrapper:!0,overlay:this.overlay,stopped:this._stopped,hidden:this._hidden};return e`
+      <div class="${d(t)}">
+        <div class="container"></div>
+      </div>
+    `}firstUpdated(){this._stopped=this.stopped,this._hidden=this.stopped,this._animation=n.loadAnimation({container:this._containerEl,renderer:"svg",loop:!0,autoplay:!1,animationData:a}),this._animation.addEventListener("loopComplete",(()=>{this.stopped&&(this._animation.stop(),this._stopped=!0)})),this._wrapperEl.addEventListener("transitionend",(()=>{this._stopped&&(this._hidden=!0,this._emitStop())}))}updated(t){t.has("stopped")&&(this.stopped||(this._animation.play(),this._stopped=!1,this._hidden=!1,this._emitStart()))}_emitStart(){const t=new CustomEvent("on-start");this.dispatchEvent(t)}_emitStop(){const t=new CustomEvent("on-stop");this.dispatchEvent(t)}};m.styles=l,t([i({type:Boolean})],m.prototype,"stopped",void 0),t([i({type:Boolean})],m.prototype,"overlay",void 0),t([r()],m.prototype,"_stopped",void 0),t([p(".wrapper")],m.prototype,"_wrapperEl",void 0),t([r()],m.prototype,"_hidden",void 0),t([p(".container")],m.prototype,"_containerEl",void 0),t([r()],m.prototype,"_animation",void 0),m=t([s("kyn-loader")],m);export{m as Loader};
+//# sourceMappingURL=loader.js.map

package/components/reusable/loaders/loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.js","sources":["../../../../src/components/reusable/loaders/loader.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport lottie from 'lottie-web';\nimport animationData from './json/loader.json';\nimport Styles from './loader.scss';\n\n/**\n * Loader.\n * @fires on-start - Emits when the loader been started.\n * @fires on-stop - Emits when the loader has been stopped and all animations have completed.\n */\n@customElement('kyn-loader')\nexport class Loader extends LitElement {\n  static override styles = Styles;\n\n  /** Animation stopped state */\n  @property({ type: Boolean })\n  stopped = false;\n\n  /** Display the loader as an overlay */\n  @property({ type: Boolean })\n  overlay = false;\n\n  /** Animation loop has finished and stopped\n   * @internal\n   */\n  @state()\n  private _stopped = false;\n\n  /** Wrapper element\n   * @internal\n   */\n  @query('.wrapper')\n  private _wrapperEl!: any;\n\n  /** Hidden state\n   * @internal\n   */\n  @state()\n  private _hidden = false;\n\n  /** Animation container element\n   * @internal\n   */\n  @query('.container')\n  private _containerEl!: any;\n\n  /** Animation instance\n   * @internal\n   */\n  @state()\n  private _animation!: any;\n\n  override render() {\n    const Classes = {\n      wrapper: true,\n      overlay: this.overlay,\n      stopped: this._stopped,\n      hidden: this._hidden,\n    };\n\n    return html`\n      <div class=\"${classMap(Classes)}\">\n        <div class=\"container\"></div>\n      </div>\n    `;\n  }\n\n  override firstUpdated() {\n    // sync internal states\n    this._stopped = this.stopped;\n    this._hidden = this.stopped;\n\n    // initialize the animation\n    this._animation = lottie.loadAnimation({\n      container: this._containerEl, // the dom element that will contain the animation\n      renderer: 'svg',\n      loop: true,\n      autoplay: false,\n      animationData: animationData,\n    });\n\n    // stop the animation at the end of the loop\n    this._animation.addEventListener('loopComplete', () => {\n      if (this.stopped) {\n        this._animation.stop();\n        this._stopped = true;\n      }\n    });\n\n    // hide the wrapper element and emit an event after stopped and transitionend\n    this._wrapperEl.addEventListener('transitionend', () => {\n      if (this._stopped) {\n        this._hidden = true;\n        this._emitStop();\n      }\n    });\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('stopped')) {\n      // play the animation if stopped prop changes to false\n      if (!this.stopped) {\n        this._animation.play();\n        this._stopped = false;\n        this._hidden = false;\n        this._emitStart();\n      }\n    }\n  }\n\n  private _emitStart() {\n    const event = new CustomEvent('on-start');\n    this.dispatchEvent(event);\n  }\n\n  private _emitStop() {\n    const event = new CustomEvent('on-stop');\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-loader': Loader;\n  }\n}\n"],"names":["Loader","LitElement","constructor","this","stopped","overlay","_stopped","_hidden","render","Classes","wrapper","hidden","html","classMap","firstUpdated","_animation","lottie","loadAnimation","container","_containerEl","renderer","loop","autoplay","animationData","addEventListener","stop","_wrapperEl","_emitStop","updated","changedProps","has","play","_emitStart","event","CustomEvent","dispatchEvent","styles","Styles","__decorate","property","type","Boolean","prototype","state","query","customElement"],"mappings":"g8BAaO,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAKLC,KAAOC,SAAG,EAIVD,KAAOE,SAAG,EAMFF,KAAQG,UAAG,EAYXH,KAAOI,SAAG,CAiFnB,CAnEU,MAAAC,GACP,MAAMC,EAAU,CACdC,SAAS,EACTL,QAASF,KAAKE,QACdD,QAASD,KAAKG,SACdK,OAAQR,KAAKI,SAGf,OAAOK,CAAI;oBACKC,EAASJ;;;KAI1B,CAEQ,YAAAK,GAEPX,KAAKG,SAAWH,KAAKC,QACrBD,KAAKI,QAAUJ,KAAKC,QAGpBD,KAAKY,WAAaC,EAAOC,cAAc,CACrCC,UAAWf,KAAKgB,aAChBC,SAAU,MACVC,MAAM,EACNC,UAAU,EACVC,cAAeA,IAIjBpB,KAAKY,WAAWS,iBAAiB,gBAAgB,KAC3CrB,KAAKC,UACPD,KAAKY,WAAWU,OAChBtB,KAAKG,UAAW,EACjB,IAIHH,KAAKuB,WAAWF,iBAAiB,iBAAiB,KAC5CrB,KAAKG,WACPH,KAAKI,SAAU,EACfJ,KAAKwB,YACN,GAEJ,CAEQ,OAAAC,CAAQC,GACXA,EAAaC,IAAI,aAEd3B,KAAKC,UACRD,KAAKY,WAAWgB,OAChB5B,KAAKG,UAAW,EAChBH,KAAKI,SAAU,EACfJ,KAAK6B,cAGV,CAEO,UAAAA,GACN,MAAMC,EAAQ,IAAIC,YAAY,YAC9B/B,KAAKgC,cAAcF,EACpB,CAEO,SAAAN,GACN,MAAMM,EAAQ,IAAIC,YAAY,WAC9B/B,KAAKgC,cAAcF,EACpB,GA1GejC,EAAMoC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACFzC,EAAA0C,UAAA,eAAA,GAIhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACFzC,EAAA0C,UAAA,eAAA,GAMhBJ,EAAA,CADCK,KACwB3C,EAAA0C,UAAA,gBAAA,GAMzBJ,EAAA,CADCM,EAAM,aACkB5C,EAAA0C,UAAA,kBAAA,GAMzBJ,EAAA,CADCK,KACuB3C,EAAA0C,UAAA,eAAA,GAMxBJ,EAAA,CADCM,EAAM,eACoB5C,EAAA0C,UAAA,oBAAA,GAM3BJ,EAAA,CADCK,KACwB3C,EAAA0C,UAAA,kBAAA,GAvCd1C,EAAMsC,EAAA,CADlBO,EAAc,eACF7C"}

package/components/reusable/loaders/loader.scss.js

@@ -0,0 +1,68 @@
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var t=e`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:root {
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
+}
+
+:host {
+  display: block;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  transition: opacity 500ms ease-out;
+}
+.wrapper.stopped {
+  opacity: 0;
+}
+.wrapper.hidden {
+  visibility: hidden;
+}
+.wrapper.overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--kd-color-dark-opacity-50);
+  z-index: var(--kd-z-overlay);
+}
+
+svg {
+  display: block;
+  width: 100px !important;
+}`;export{t as default};
+//# sourceMappingURL=loader.scss.js.map

package/components/reusable/loaders/loader.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/loaders/skeleton.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+/**
+ * Skeleton block
+ */
+export declare class Skeleton extends LitElement {
+    static styles: import("lit").CSSResultGroup;
+    /** Use inline style instead of block. */
+    inline: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kyn-skeleton': Skeleton;
+    }
+}
+//# sourceMappingURL=skeleton.d.ts.map

package/components/reusable/loaders/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/loaders/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;GAEG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAU;IAEhC,yCAAyC;IAEzC,MAAM,UAAS;IAEN,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}

package/components/reusable/loaders/skeleton.js

@@ -0,0 +1,2 @@
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as l}from'./../../../external/@lit/reactive-element/decorators/property.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import r from"./skeleton.scss.js";let m=class extends o{constructor(){super(...arguments),this.inline=!1}render(){return t` <div class="skeleton"></div> `}};m.styles=r,e([l({type:Boolean})],m.prototype,"inline",void 0),m=e([s("kyn-skeleton")],m);export{m as Skeleton};
+//# sourceMappingURL=skeleton.js.map

package/components/reusable/loaders/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sources":["../../../../src/components/reusable/loaders/skeleton.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport Styles from './skeleton.scss';\n\n/**\n * Skeleton block\n */\n@customElement('kyn-skeleton')\nexport class Skeleton extends LitElement {\n  static override styles = Styles;\n\n  /** Use inline style instead of block. */\n  @property({ type: Boolean })\n  inline = false;\n\n  override render() {\n    return html` <div class=\"skeleton\"></div> `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-skeleton': Skeleton;\n  }\n}\n"],"names":["Skeleton","LitElement","constructor","this","inline","render","html","styles","Styles","__decorate","property","type","Boolean","prototype","customElement"],"mappings":"olBAQO,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAKLC,KAAMC,QAAG,CAKV,CAHU,MAAAC,GACP,OAAOC,CAAI,gCACZ,GAReN,EAAMO,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACHZ,EAAAa,UAAA,cAAA,GALJb,EAAQS,EAAA,CADpBK,EAAc,iBACFd"}

package/components/reusable/loaders/skeleton.scss.js

@@ -0,0 +1,36 @@
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var o=e`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+  width: 100%;
+  height: 12px;
+}
+
+:host([inline]) {
+  display: inline-block;
+  width: 40px;
+}
+
+.skeleton {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    background-color: #edf1f2;
+  }
+  50% {
+    background-color: #d5d9db;
+  }
+  100% {
+    background-color: #edf1f2;
+  }
+}`;export{o as default};
+//# sourceMappingURL=skeleton.scss.js.map

package/components/reusable/loaders/skeleton.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/numberInput/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberInput } from './numberInput';
+//# sourceMappingURL=index.d.ts.map

package/components/reusable/numberInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/numberInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/components/reusable/numberInput/index.js

@@ -0,0 +1,2 @@
+export{NumberInput}from"./numberInput.js";
+//# sourceMappingURL=index.js.map

package/components/reusable/numberInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/reusable/numberInput/numberInput.d.ts

@@ -0,0 +1,89 @@
+import { LitElement } from 'lit';
+import '@kyndryl-design-system/shidoka-foundation/components/button';
+import '@kyndryl-design-system/shidoka-foundation/components/icon';
+/**
+ * Number input.
+ * @fires on-input - Captures the input event and emits the value and original event details.
+ * @slot unnamed - Slot for label text.
+ */
+export declare class NumberInput extends LitElement {
+    static styles: import("lit").CSSResultGroup;
+    /** @ignore */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
+    /**
+     * Associate the component with forms.
+     * @ignore
+     */
+    static formAssociated: boolean;
+    /**
+     * Attached internals for form association.
+     * @ignore
+     */
+    internals: ElementInternals;
+    /** Input size. "sm", "md", or "lg". */
+    size: string;
+    /** Input value. */
+    value: number;
+    /** Input placeholder. */
+    placeholder: string;
+    /** Input name. */
+    name: string;
+    /** Makes the input required. */
+    required: boolean;
+    /** Input disabled state. */
+    disabled: boolean;
+    /** Optional text beneath the input. */
+    caption: string;
+    /** Input invalid text. */
+    invalidText: string;
+    /** Maximum value. */
+    max: number;
+    /** Minimum value. */
+    min: number;
+    /** Step value. */
+    step: number;
+    /** Visually hide the label. */
+    hideLabel: boolean;
+    /** Customizable text strings. */
+    textStrings: {
+        subtract: string;
+        add: string;
+    };
+    /**
+     * Queries the <input> DOM element.
+     * @ignore
+     */
+    inputEl: HTMLInputElement;
+    /**
+     * Internal validation message.
+     * @ignore
+     */
+    internalValidationMsg: string;
+    /**
+     * isInvalid when internalValidationMsg or invalidText is non-empty.
+     * @ignore
+     */
+    isInvalid: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    private _sizeMap;
+    private _handleSubtract;
+    private _handleAdd;
+    private _handleInput;
+    private _emitValue;
+    private _validate;
+    updated(changedProps: any): void;
+    private _handleFormdata;
+    private _handleInvalid;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kyn-number-input': NumberInput;
+    }
+}
+//# sourceMappingURL=numberInput.d.ts.map

package/components/reusable/numberInput/numberInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberInput.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/numberInput/numberInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAInE;;;;GAIG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,+BAAU;IAEhC,cAAc;IACd,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uCAAuC;IAEvC,IAAI,SAAQ;IAEZ,mBAAmB;IAEnB,KAAK,SAAK;IAEV,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,kBAAkB;IAElB,IAAI,SAAM;IAEV,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,uCAAuC;IAEvC,OAAO,SAAM;IAEb,0BAA0B;IAE1B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,GAAG,EAAG,MAAM,CAAC;IAEb,qBAAqB;IAErB,GAAG,EAAG,MAAM,CAAC;IAEb,kBAAkB;IAElB,IAAI,SAAK;IAET,+BAA+B;IAE/B,SAAS,UAAS;IAElB,iCAAiC;IAEjC,WAAW;;;MAGT;IAEF;;;OAGG;IAEH,OAAO,EAAG,gBAAgB,CAAC;IAE3B;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAyEf,OAAO,CAAC,QAAQ;IAehB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,SAAS;IA0BR,OAAO,CAAC,YAAY,EAAE,GAAG;IA4BlC,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAIb,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;CAatC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,WAAW,CAAC;KACjC;CACF"}

package/components/reusable/numberInput/numberInput.js

@@ -0,0 +1,62 @@
+import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as i}from'./../../../external/lit-html/lit-html.js';import{LitElement as e}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as a}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as o}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as l}from'./../../../external/lit-html/directives/if-defined.js';import{classMap as d}from'./../../../external/lit-html/directives/class-map.js';import r from"./numberInput.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/button";import"@kyndryl-design-system/shidoka-foundation/components/icon";import h from'./../../../external/@carbon/icons/es/add/20.js';import p from'./../../../external/@carbon/icons/es/subtract/20.js';let m=class extends e{constructor(){super(...arguments),this.internals=this.attachInternals(),this.size="md",this.value=0,this.placeholder="",this.name="",this.required=!1,this.disabled=!1,this.caption="",this.invalidText="",this.step=1,this.hideLabel=!1,this.textStrings={subtract:"Subtract",add:"Add"},this.internalValidationMsg="",this.isInvalid=!1}render(){return i`
+      <div class="number-input" ?disabled=${this.disabled}>
+        <label
+          class="label-text ${this.hideLabel?"sr-only":""}"
+          for=${this.name}
+        >
+          ${this.required?i`<span class="required">*</span>`:null}
+          <slot></slot>
+        </label>
+
+        <div
+          class="${d({"input-wrapper":!0})}"
+        >
+          <kd-button
+            kind="secondary"
+            size=${this._sizeMap(this.size)}
+            ?disabled=${this.disabled||this.value===this.min}
+            description=${this.textStrings.subtract}
+            @on-click=${this._handleSubtract}
+          >
+            <kd-icon slot="icon" .icon=${p}></kd-icon>
+          </kd-button>
+
+          <input
+            autofocus
+            class="${d({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
+            type="number"
+            id=${this.name}
+            name=${this.name}
+            value=${this.value.toString()}
+            placeholder=${this.placeholder}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            ?invalid=${this.isInvalid}
+            aria-invalid=${this.isInvalid}
+            aria-describedby=${this.isInvalid?"error":""}
+            step=${l(this.step)}
+            min=${l(this.min)}
+            max=${l(this.max)}
+            @input=${t=>this._handleInput(t)}
+          />
+
+          <kd-button
+            kind="secondary"
+            size=${this._sizeMap(this.size)}
+            ?disabled=${this.disabled||this.value===this.max}
+            description=${this.textStrings.add}
+            @on-click=${this._handleAdd}
+          >
+            <kd-icon slot="icon" .icon=${h}></kd-icon>
+          </kd-button>
+        </div>
+
+        ${""!==this.caption?i` <div class="caption">${this.caption}</div> `:null}
+        ${this.isInvalid?i`
+              <div id="error" class="error">
+                ${this.invalidText||this.internalValidationMsg}
+              </div>
+            `:null}
+      </div>
+    `}_sizeMap(t){let i="medium";switch(t){case"lg":i="large";break;case"sm":i="small"}return i}_handleSubtract(){this.inputEl.stepDown(),this.value=Number(this.inputEl.value),this._emitValue()}_handleAdd(){this.inputEl.stepUp(),this.value=Number(this.inputEl.value),this._emitValue()}_handleInput(t){this.value=Number(t.target.value),this._validate(!0,!1),this._emitValue(t)}_emitValue(t){const i={value:this.value};t&&(i.origEvent=t);const e=new CustomEvent("on-input",{detail:i});this.dispatchEvent(e)}_validate(t,i){const e=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(e,s,this.inputEl),t&&(this.internalValidationMsg=this.inputEl.validationMessage),i&&this.internals.reportValidity()}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("value")&&(this.inputEl.value=this.value.toString(),this._validate(!1,!1)),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!1)}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this._validate(!0,!1)}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};m.styles=r,m.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},m.formAssociated=!0,t([n()],m.prototype,"internals",void 0),t([a({type:String})],m.prototype,"size",void 0),t([a({type:Number})],m.prototype,"value",void 0),t([a({type:String})],m.prototype,"placeholder",void 0),t([a({type:String})],m.prototype,"name",void 0),t([a({type:Boolean})],m.prototype,"required",void 0),t([a({type:Boolean})],m.prototype,"disabled",void 0),t([a({type:String})],m.prototype,"caption",void 0),t([a({type:String})],m.prototype,"invalidText",void 0),t([a({type:Number})],m.prototype,"max",void 0),t([a({type:Number})],m.prototype,"min",void 0),t([a({type:Number})],m.prototype,"step",void 0),t([a({type:Boolean})],m.prototype,"hideLabel",void 0),t([a({type:Object})],m.prototype,"textStrings",void 0),t([o("input")],m.prototype,"inputEl",void 0),t([n()],m.prototype,"internalValidationMsg",void 0),t([n()],m.prototype,"isInvalid",void 0),m=t([s("kyn-number-input")],m);export{m as NumberInput};
+//# sourceMappingURL=numberInput.js.map