carbon-components-svelte/assets/TimePicker.59560865.js
2020-10-02 20:46:37 -07:00

1 line
32 KiB
JavaScript

let n=document.createElement("style");n.innerHTML="",document.head.appendChild(n);import{S as a,i as s,s as t,g as e,h as p,k as c,l,n as o,o as i,N as u,y as r,q as k,r as m,M as $,v as d,w as g,j as f,p as v,x as h,I as x,z as b,A as T,t as P,b as S,J as I,B as w,C as M,G as D,H as y,c as E,a as L,ae as j,m as C,d as _,e as A,a4 as G,a2 as V,Y as H}from"./index.6b674a45.js";import"./Button.f0f995b5.js";import"./index.77bc22b8.js";import{C as U,P as B,b as R}from"./Preview.da06bf80.js";import"./ChevronDown16.5983f6dc.js";import"./Loading.1494bed2.js";import"./Column.6ef18044.js";import{C as q}from"./ChevronDownGlyph.94dd93d0.js";import"./Content.7baad37e.js";import"./store.4e2c42a1.js";function N(n){let a,s;return{c(){a=e("label"),s=p(n[8]),this.h()},l(t){a=c(t,"LABEL",{for:!0});var e=l(a);s=o(e,n[8]),e.forEach(i),this.h()},h(){u(a,"for",n[12]),r(a,"bx--label",!0),r(a,"bx--visually-hidden",n[9]),r(a,"bx--label--disabled",n[7])},m(n,t){k(n,a,t),m(a,s)},p(n,t){256&t&&$(s,n[8]),4096&t&&u(a,"for",n[12]),512&t&&r(a,"bx--visually-hidden",n[9]),128&t&&r(a,"bx--label--disabled",n[7])},d(n){n&&i(a)}}}function z(n){let a,s;return{c(){a=e("div"),s=p(n[11]),this.h()},l(t){a=c(t,"DIV",{});var e=l(a);s=o(e,n[11]),e.forEach(i),this.h()},h(){r(a,"bx--form-requirement",!0)},m(n,t){k(n,a,t),m(a,s)},p(n,a){2048&a&&$(s,n[11])},d(n){n&&i(a)}}}function J(n){let a,s,t,p,o,$,w,M,D,y,E,L=n[8]&&N(n);const j=n[16].default,C=d(j,n,n[15],null);let _=n[10]&&z(n),A=[n[14]],G={};for(let n=0;n<A.length;n+=1)G=g(G,A[n]);return{c(){a=e("div"),s=e("div"),t=e("div"),L&&L.c(),p=f(),o=e("input"),w=f(),C&&C.c(),M=f(),_&&_.c(),this.h()},l(n){a=c(n,"DIV",{});var e=l(a);s=c(e,"DIV",{});var u=l(s);t=c(u,"DIV",{});var r=l(t);L&&L.l(r),p=v(r),o=c(r,"INPUT",{"data-invalid":!0,pattern:!0,placeholder:!0,maxlength:!0,id:!0,name:!0,type:!0,value:!0,disabled:!0}),r.forEach(i),w=v(u),C&&C.l(u),u.forEach(i),M=v(e),_&&_.l(e),e.forEach(i),this.h()},h(){u(o,"data-invalid",$=n[10]||void 0),u(o,"pattern",n[4]),u(o,"placeholder",n[3]),u(o,"maxlength",n[5]),u(o,"id",n[12]),u(o,"name",n[13]),u(o,"type",n[2]),o.value=n[0],o.disabled=n[7],r(o,"bx--time-picker__input-field",!0),r(o,"bx--text-input",!0),r(o,"bx--text-input--light",n[6]),r(o,"bx--text-input--invalid",n[10]),r(t,"bx--time-picker__input",!0),r(s,"bx--time-picker",!0),r(s,"bx--time-picker--light",n[6]),r(s,"bx--select--light",n[6]),h(a,G),r(a,"bx--form-item",!0)},m(e,c){k(e,a,c),m(a,s),m(s,t),L&&L.m(t,null),m(t,p),m(t,o),n[25](o),m(s,w),C&&C.m(s,null),m(a,M),_&&_.m(a,null),D=!0,y||(E=[x(o,"change",n[21]),x(o,"input",n[22]),x(o,"input",n[26]),x(o,"focus",n[23]),x(o,"blur",n[24]),x(a,"click",n[17]),x(a,"mouseover",n[18]),x(a,"mouseenter",n[19]),x(a,"mouseleave",n[20])],y=!0)},p(n,[e]){n[8]?L?L.p(n,e):(L=N(n),L.c(),L.m(t,p)):L&&(L.d(1),L=null),(!D||1024&e&&$!==($=n[10]||void 0))&&u(o,"data-invalid",$),(!D||16&e)&&u(o,"pattern",n[4]),(!D||8&e)&&u(o,"placeholder",n[3]),(!D||32&e)&&u(o,"maxlength",n[5]),(!D||4096&e)&&u(o,"id",n[12]),(!D||8192&e)&&u(o,"name",n[13]),(!D||4&e)&&u(o,"type",n[2]),(!D||1&e&&o.value!==n[0])&&(o.value=n[0]),(!D||128&e)&&(o.disabled=n[7]),64&e&&r(o,"bx--text-input--light",n[6]),1024&e&&r(o,"bx--text-input--invalid",n[10]),C&&C.p&&32768&e&&b(C,j,n,n[15],e,null,null),64&e&&r(s,"bx--time-picker--light",n[6]),64&e&&r(s,"bx--select--light",n[6]),n[10]?_?_.p(n,e):(_=z(n),_.c(),_.m(a,null)):_&&(_.d(1),_=null),h(a,G=T(A,[16384&e&&n[14]])),r(a,"bx--form-item",!0)},i(n){D||(P(C,n),D=!0)},o(n){S(C,n),D=!1},d(s){s&&i(a),L&&L.d(),n[25](null),C&&C.d(s),_&&_.d(),y=!1,I(E)}}}function O(n,a,s){const t=["value","type","placeholder","pattern","maxlength","light","disabled","labelText","hideLabel","invalid","invalidText","id","name","ref"];let e=w(a,t),{$$slots:p={},$$scope:c}=a,{value:l=""}=a,{type:o="text"}=a,{placeholder:i="hh=mm"}=a,{pattern:u="(1[012]|[1-9]):[0-5][0-9](\\s)?"}=a,{maxlength:r=5}=a,{light:k=!1}=a,{disabled:m=!1}=a,{labelText:$=""}=a,{hideLabel:d=!1}=a,{invalid:f=!1}=a,{invalidText:v=""}=a,{id:h="ccs-"+Math.random().toString(36)}=a,{name:x}=a,{ref:b=null}=a;return n.$$set=n=>{a=g(g({},a),M(n)),s(14,e=w(a,t)),"value"in n&&s(0,l=n.value),"type"in n&&s(2,o=n.type),"placeholder"in n&&s(3,i=n.placeholder),"pattern"in n&&s(4,u=n.pattern),"maxlength"in n&&s(5,r=n.maxlength),"light"in n&&s(6,k=n.light),"disabled"in n&&s(7,m=n.disabled),"labelText"in n&&s(8,$=n.labelText),"hideLabel"in n&&s(9,d=n.hideLabel),"invalid"in n&&s(10,f=n.invalid),"invalidText"in n&&s(11,v=n.invalidText),"id"in n&&s(12,h=n.id),"name"in n&&s(13,x=n.name),"ref"in n&&s(1,b=n.ref),"$$scope"in n&&s(15,c=n.$$scope)},[l,b,o,i,u,r,k,m,$,d,f,v,h,x,e,c,p,function(a){D(n,a)},function(a){D(n,a)},function(a){D(n,a)},function(a){D(n,a)},function(a){D(n,a)},function(a){D(n,a)},function(a){D(n,a)},function(a){D(n,a)},function(n){y[n?"unshift":"push"](()=>{b=n,s(1,b)})},({target:n})=>{s(0,l=n.value)}]}class Y extends a{constructor(n){super(),s(this,n,O,J,t,{value:0,type:2,placeholder:3,pattern:4,maxlength:5,light:6,disabled:7,labelText:8,hideLabel:9,invalid:10,invalidText:11,id:12,name:13,ref:1})}}function F(n){let a,s;return{c(){a=e("label"),s=p(n[4]),this.h()},l(t){a=c(t,"LABEL",{for:!0});var e=l(a);s=o(e,n[4]),e.forEach(i),this.h()},h(){u(a,"for",n[6]),r(a,"bx--label",!0),r(a,"bx--visually-hidden",n[5])},m(n,t){k(n,a,t),m(a,s)},p(n,t){16&t&&$(s,n[4]),64&t&&u(a,"for",n[6]),32&t&&r(a,"bx--visually-hidden",n[5])},d(n){n&&i(a)}}}function K(n){let a,s,t,p,o,$,w,M,D=n[4]&&F(n);const y=n[11].default,A=d(y,n,n[10],null);o=new q({props:{"aria-label":n[3],title:n[3],class:"bx--select__arrow"}});let G=[n[9]],V={};for(let n=0;n<G.length;n+=1)V=g(V,G[n]);return{c(){a=e("div"),D&&D.c(),s=f(),t=e("select"),A&&A.c(),p=f(),E(o.$$.fragment),this.h()},l(n){a=c(n,"DIV",{});var e=l(a);D&&D.l(e),s=v(e),t=c(e,"SELECT",{id:!0,name:!0,disabled:!0,value:!0});var u=l(t);A&&A.l(u),u.forEach(i),p=v(e),L(o.$$.fragment,e),e.forEach(i),this.h()},h(){u(t,"id",n[6]),u(t,"name",n[7]),t.disabled=n[2],r(t,"bx--select-input",!0),h(a,V),r(a,"bx--select",!0),r(a,"bx--time-picker__select",!0)},m(e,c){k(e,a,c),D&&D.m(a,null),m(a,s),m(a,t),A&&A.m(t,null),j(t,n[0]),n[16](t),m(a,p),C(o,a,null),$=!0,w||(M=[x(t,"change",n[17]),x(a,"click",n[12]),x(a,"mouseover",n[13]),x(a,"mouseenter",n[14]),x(a,"mouseleave",n[15])],w=!0)},p(n,[e]){n[4]?D?D.p(n,e):(D=F(n),D.c(),D.m(a,s)):D&&(D.d(1),D=null),A&&A.p&&1024&e&&b(A,y,n,n[10],e,null,null),(!$||64&e)&&u(t,"id",n[6]),(!$||128&e)&&u(t,"name",n[7]),(!$||4&e)&&(t.disabled=n[2]),(!$||1&e)&&j(t,n[0]);const p={};8&e&&(p["aria-label"]=n[3]),8&e&&(p.title=n[3]),o.$set(p),h(a,V=T(G,[512&e&&n[9]])),r(a,"bx--select",!0),r(a,"bx--time-picker__select",!0)},i(n){$||(P(A,n),P(o.$$.fragment,n),$=!0)},o(n){S(A,n),S(o.$$.fragment,n),$=!1},d(s){s&&i(a),D&&D.d(),A&&A.d(s),n[16](null),_(o),w=!1,I(M)}}}function Q(n,a,s){const t=["value","disabled","iconDescription","labelText","hideLabel","id","name","ref"];let e,p=w(a,t),{$$slots:c={},$$scope:l}=a,{value:o=""}=a,{disabled:i=!1}=a,{iconDescription:u="Open list of options"}=a,{labelText:r=""}=a,{hideLabel:k=!0}=a,{id:m="ccs-"+Math.random().toString(36)}=a,{name:$}=a,{ref:d=null}=a;const f=V(o);A(n,f,n=>s(18,e=n)),G("TimePickerSelect",{selectedValue:f});return n.$$set=n=>{a=g(g({},a),M(n)),s(9,p=w(a,t)),"value"in n&&s(0,o=n.value),"disabled"in n&&s(2,i=n.disabled),"iconDescription"in n&&s(3,u=n.iconDescription),"labelText"in n&&s(4,r=n.labelText),"hideLabel"in n&&s(5,k=n.hideLabel),"id"in n&&s(6,m=n.id),"name"in n&&s(7,$=n.name),"ref"in n&&s(1,d=n.ref),"$$scope"in n&&s(10,l=n.$$scope)},n.$$.update=()=>{262144&n.$$.dirty&&s(0,o=e),1&n.$$.dirty&&f.set(o)},[o,d,i,u,r,k,m,$,f,p,l,c,function(a){D(n,a)},function(a){D(n,a)},function(a){D(n,a)},function(a){D(n,a)},function(n){y[n?"unshift":"push"](()=>{d=n,s(1,d)})},({target:n})=>{f.set(n.value)}]}class W extends a{constructor(n){super(),s(this,n,Q,K,t,{value:0,disabled:2,iconDescription:3,labelText:4,hideLabel:5,id:6,name:7,ref:1})}}function X(n){let a,s,t,e;return a=new R({props:{value:"am",text:"AM"}}),t=new R({props:{value:"pm",text:"PM"}}),{c(){E(a.$$.fragment),s=f(),E(t.$$.fragment)},l(n){L(a.$$.fragment,n),s=v(n),L(t.$$.fragment,n)},m(n,p){C(a,n,p),k(n,s,p),C(t,n,p),e=!0},p:H,i(n){e||(P(a.$$.fragment,n),P(t.$$.fragment,n),e=!0)},o(n){S(a.$$.fragment,n),S(t.$$.fragment,n),e=!1},d(n){_(a,n),n&&i(s),_(t,n)}}}function Z(n){let a,s,t,e;return a=new R({props:{value:"pdt",text:"PDT"}}),t=new R({props:{value:"gmt",text:"GMT"}}),{c(){E(a.$$.fragment),s=f(),E(t.$$.fragment)},l(n){L(a.$$.fragment,n),s=v(n),L(t.$$.fragment,n)},m(n,p){C(a,n,p),k(n,s,p),C(t,n,p),e=!0},p:H,i(n){e||(P(a.$$.fragment,n),P(t.$$.fragment,n),e=!0)},o(n){S(a.$$.fragment,n),S(t.$$.fragment,n),e=!1},d(n){_(a,n),n&&i(s),_(t,n)}}}function nn(n){let a,s,t,e;return a=new W({props:{value:"PM",$$slots:{default:[X]},$$scope:{ctx:n}}}),t=new W({props:{value:"PDT",$$slots:{default:[Z]},$$scope:{ctx:n}}}),{c(){E(a.$$.fragment),s=f(),E(t.$$.fragment)},l(n){L(a.$$.fragment,n),s=v(n),L(t.$$.fragment,n)},m(n,p){C(a,n,p),k(n,s,p),C(t,n,p),e=!0},p(n,s){const e={};1&s&&(e.$$scope={dirty:s,ctx:n}),a.$set(e);const p={};1&s&&(p.$$scope={dirty:s,ctx:n}),t.$set(p)},i(n){e||(P(a.$$.fragment,n),P(t.$$.fragment,n),e=!0)},o(n){S(a.$$.fragment,n),S(t.$$.fragment,n),e=!1},d(n){_(a,n),n&&i(s),_(t,n)}}}function an(n){let a,s;return a=new Y({props:{labelText:"Cron job",placeholder:"hh:mm",$$slots:{default:[nn]},$$scope:{ctx:n}}}),{c(){E(a.$$.fragment)},l(n){L(a.$$.fragment,n)},m(n,t){C(a,n,t),s=!0},p(n,s){const t={};1&s&&(t.$$scope={dirty:s,ctx:n}),a.$set(t)},i(n){s||(P(a.$$.fragment,n),s=!0)},o(n){S(a.$$.fragment,n),s=!1},d(n){_(a,n)}}}function sn(n){let a,s,t,e;return a=new R({props:{value:"am",text:"AM"}}),t=new R({props:{value:"pm",text:"PM"}}),{c(){E(a.$$.fragment),s=f(),E(t.$$.fragment)},l(n){L(a.$$.fragment,n),s=v(n),L(t.$$.fragment,n)},m(n,p){C(a,n,p),k(n,s,p),C(t,n,p),e=!0},p:H,i(n){e||(P(a.$$.fragment,n),P(t.$$.fragment,n),e=!0)},o(n){S(a.$$.fragment,n),S(t.$$.fragment,n),e=!1},d(n){_(a,n),n&&i(s),_(t,n)}}}function tn(n){let a,s,t,e;return a=new R({props:{value:"pdt",text:"PDT"}}),t=new R({props:{value:"gmt",text:"GMT"}}),{c(){E(a.$$.fragment),s=f(),E(t.$$.fragment)},l(n){L(a.$$.fragment,n),s=v(n),L(t.$$.fragment,n)},m(n,p){C(a,n,p),k(n,s,p),C(t,n,p),e=!0},p:H,i(n){e||(P(a.$$.fragment,n),P(t.$$.fragment,n),e=!0)},o(n){S(a.$$.fragment,n),S(t.$$.fragment,n),e=!1},d(n){_(a,n),n&&i(s),_(t,n)}}}function en(n){let a,s,t,e;return a=new W({props:{value:"PM",$$slots:{default:[sn]},$$scope:{ctx:n}}}),t=new W({props:{value:"PDT",$$slots:{default:[tn]},$$scope:{ctx:n}}}),{c(){E(a.$$.fragment),s=f(),E(t.$$.fragment)},l(n){L(a.$$.fragment,n),s=v(n),L(t.$$.fragment,n)},m(n,p){C(a,n,p),k(n,s,p),C(t,n,p),e=!0},p(n,s){const e={};1&s&&(e.$$scope={dirty:s,ctx:n}),a.$set(e);const p={};1&s&&(p.$$scope={dirty:s,ctx:n}),t.$set(p)},i(n){e||(P(a.$$.fragment,n),P(t.$$.fragment,n),e=!0)},o(n){S(a.$$.fragment,n),S(t.$$.fragment,n),e=!1},d(n){_(a,n),n&&i(s),_(t,n)}}}function pn(n){let a,s;return a=new Y({props:{light:!0,labelText:"Cron job",placeholder:"hh:mm",$$slots:{default:[en]},$$scope:{ctx:n}}}),{c(){E(a.$$.fragment)},l(n){L(a.$$.fragment,n)},m(n,t){C(a,n,t),s=!0},p(n,s){const t={};1&s&&(t.$$scope={dirty:s,ctx:n}),a.$set(t)},i(n){s||(P(a.$$.fragment,n),s=!0)},o(n){S(a.$$.fragment,n),s=!1},d(n){_(a,n)}}}function cn(n){let a,s,t,e;return a=new R({props:{value:"am",text:"AM"}}),t=new R({props:{value:"pm",text:"PM"}}),{c(){E(a.$$.fragment),s=f(),E(t.$$.fragment)},l(n){L(a.$$.fragment,n),s=v(n),L(t.$$.fragment,n)},m(n,p){C(a,n,p),k(n,s,p),C(t,n,p),e=!0},p:H,i(n){e||(P(a.$$.fragment,n),P(t.$$.fragment,n),e=!0)},o(n){S(a.$$.fragment,n),S(t.$$.fragment,n),e=!1},d(n){_(a,n),n&&i(s),_(t,n)}}}function ln(n){let a,s,t,e;return a=new R({props:{value:"pdt",text:"PDT"}}),t=new R({props:{value:"gmt",text:"GMT"}}),{c(){E(a.$$.fragment),s=f(),E(t.$$.fragment)},l(n){L(a.$$.fragment,n),s=v(n),L(t.$$.fragment,n)},m(n,p){C(a,n,p),k(n,s,p),C(t,n,p),e=!0},p:H,i(n){e||(P(a.$$.fragment,n),P(t.$$.fragment,n),e=!0)},o(n){S(a.$$.fragment,n),S(t.$$.fragment,n),e=!1},d(n){_(a,n),n&&i(s),_(t,n)}}}function on(n){let a,s,t,e;return a=new W({props:{value:"PM",disabled:!0,$$slots:{default:[cn]},$$scope:{ctx:n}}}),t=new W({props:{value:"PDT",disabled:!0,$$slots:{default:[ln]},$$scope:{ctx:n}}}),{c(){E(a.$$.fragment),s=f(),E(t.$$.fragment)},l(n){L(a.$$.fragment,n),s=v(n),L(t.$$.fragment,n)},m(n,p){C(a,n,p),k(n,s,p),C(t,n,p),e=!0},p(n,s){const e={};1&s&&(e.$$scope={dirty:s,ctx:n}),a.$set(e);const p={};1&s&&(p.$$scope={dirty:s,ctx:n}),t.$set(p)},i(n){e||(P(a.$$.fragment,n),P(t.$$.fragment,n),e=!0)},o(n){S(a.$$.fragment,n),S(t.$$.fragment,n),e=!1},d(n){_(a,n),n&&i(s),_(t,n)}}}function un(n){let a,s;return a=new Y({props:{labelText:"Cron job",placeholder:"hh:mm",disabled:!0,$$slots:{default:[on]},$$scope:{ctx:n}}}),{c(){E(a.$$.fragment)},l(n){L(a.$$.fragment,n)},m(n,t){C(a,n,t),s=!0},p(n,s){const t={};1&s&&(t.$$scope={dirty:s,ctx:n}),a.$set(t)},i(n){s||(P(a.$$.fragment,n),s=!0)},o(n){S(a.$$.fragment,n),s=!1},d(n){_(a,n)}}}function rn(n){let a,s,t,r,$,d,g,h,x,b,T,P,S,I,w,M,D,y;return{c(){a=e("div"),s=e("ul"),t=e("li"),r=e("a"),$=p("Usage"),d=f(),g=e("ul"),h=e("li"),x=e("a"),b=p("Default"),T=f(),P=e("li"),S=e("a"),I=p("Light variant"),w=f(),M=e("li"),D=e("a"),y=p("Disabled"),this.h()},l(n){a=c(n,"DIV",{slot:!0});var e=l(a);s=c(e,"UL",{class:!0});var p=l(s);t=c(p,"LI",{class:!0});var u=l(t);r=c(u,"A",{class:!0,href:!0});var k=l(r);$=o(k,"Usage"),k.forEach(i),d=v(u),g=c(u,"UL",{class:!0});var m=l(g);h=c(m,"LI",{class:!0});var f=l(h);x=c(f,"A",{class:!0,href:!0});var E=l(x);b=o(E,"Default"),E.forEach(i),f.forEach(i),T=v(m),P=c(m,"LI",{class:!0});var L=l(P);S=c(L,"A",{class:!0,href:!0});var j=l(S);I=o(j,"Light variant"),j.forEach(i),L.forEach(i),w=v(m),M=c(m,"LI",{class:!0});var C=l(M);D=c(C,"A",{class:!0,href:!0});var _=l(D);y=o(_,"Disabled"),_.forEach(i),C.forEach(i),m.forEach(i),u.forEach(i),p.forEach(i),e.forEach(i),this.h()},h(){u(r,"class","bx--link"),u(r,"href","#usage"),u(x,"class","bx--link"),u(x,"href","#default"),u(h,"class","bx--list__item"),u(S,"class","bx--link"),u(S,"href","#light-variant"),u(P,"class","bx--list__item"),u(D,"class","bx--link"),u(D,"href","#disabled"),u(M,"class","bx--list__item"),u(g,"class","bx--list--unordered bx--list--nested"),u(t,"class","bx--list__item"),u(s,"class","bx--list--unordered"),u(a,"slot","aside")},m(n,e){k(n,a,e),m(a,s),m(s,t),m(t,r),m(r,$),m(t,d),m(t,g),m(g,h),m(h,x),m(x,b),m(g,T),m(g,P),m(P,S),m(S,I),m(g,w),m(g,M),m(M,D),m(D,y)},d(n){n&&i(a)}}}function kn(n){let a,s,t,r,$,d,g,h,x,b,T,I,w,M,D,y;return r=new B({props:{codeRaw:'<script>\n import {\n TimePicker,\n TimePickerSelect,\n SelectItem,\n } from "carbon-components-svelte";\n<\/script>\n\n<TimePicker labelText="Cron job" placeholder="hh:mm">\n <TimePickerSelect value="PM">\n <SelectItem value="am" text="AM" />\n <SelectItem value="pm" text="PM" />\n </TimePickerSelect>\n <TimePickerSelect value="PDT">\n <SelectItem value="pdt" text="PDT" />\n <SelectItem value="gmt" text="GMT" />\n </TimePickerSelect>\n</TimePicker>\n',code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n <span class="token keyword">import</span> <span class="token punctuation">{</span>\n TimePicker<span class="token punctuation">,</span>\n TimePickerSelect<span class="token punctuation">,</span>\n SelectItem<span class="token punctuation">,</span>\n <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TimePicker</span> <span class="token attr-name">labelText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Cron job<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hh:mm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TimePickerSelect</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>PM<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectItem</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>am<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>AM<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectItem</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>pm<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>PM<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TimePickerSelect</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TimePickerSelect</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>PDT<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectItem</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>pdt<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>PDT<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectItem</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gmt<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>GMT<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TimePickerSelect</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TimePicker</span><span class="token punctuation">></span></span>\n',$$slots:{default:[an]},$$scope:{ctx:n}}}),x=new B({props:{codeRaw:'<script>\n import {\n TimePicker,\n TimePickerSelect,\n SelectItem,\n } from "carbon-components-svelte";\n<\/script>\n\n<TimePicker light labelText="Cron job" placeholder="hh:mm">\n <TimePickerSelect value="PM">\n <SelectItem value="am" text="AM" />\n <SelectItem value="pm" text="PM" />\n </TimePickerSelect>\n <TimePickerSelect value="PDT">\n <SelectItem value="pdt" text="PDT" />\n <SelectItem value="gmt" text="GMT" />\n </TimePickerSelect>\n</TimePicker>\n',code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n <span class="token keyword">import</span> <span class="token punctuation">{</span>\n TimePicker<span class="token punctuation">,</span>\n TimePickerSelect<span class="token punctuation">,</span>\n SelectItem<span class="token punctuation">,</span>\n <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TimePicker</span> <span class="token attr-name">light</span> <span class="token attr-name">labelText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Cron job<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hh:mm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TimePickerSelect</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>PM<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectItem</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>am<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>AM<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectItem</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>pm<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>PM<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TimePickerSelect</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TimePickerSelect</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>PDT<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectItem</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>pdt<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>PDT<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectItem</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gmt<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>GMT<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TimePickerSelect</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TimePicker</span><span class="token punctuation">></span></span>\n',$$slots:{default:[pn]},$$scope:{ctx:n}}}),M=new B({props:{codeRaw:'<script>\n import {\n TimePicker,\n TimePickerSelect,\n SelectItem,\n } from "carbon-components-svelte";\n<\/script>\n\n<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>\n <TimePickerSelect value="PM" disabled>\n <SelectItem value="am" text="AM" />\n <SelectItem value="pm" text="PM" />\n </TimePickerSelect>\n <TimePickerSelect value="PDT" disabled>\n <SelectItem value="pdt" text="PDT" />\n <SelectItem value="gmt" text="GMT" />\n </TimePickerSelect>\n</TimePicker>\n',code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n <span class="token keyword">import</span> <span class="token punctuation">{</span>\n TimePicker<span class="token punctuation">,</span>\n TimePickerSelect<span class="token punctuation">,</span>\n SelectItem<span class="token punctuation">,</span>\n <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TimePicker</span> <span class="token attr-name">labelText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Cron job<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hh:mm<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TimePickerSelect</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>PM<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectItem</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>am<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>AM<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectItem</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>pm<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>PM<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TimePickerSelect</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TimePickerSelect</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>PDT<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectItem</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>pdt<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>PDT<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SelectItem</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gmt<span class="token punctuation">"</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>GMT<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TimePickerSelect</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TimePicker</span><span class="token punctuation">></span></span>\n',$$slots:{default:[un]},$$scope:{ctx:n}}}),{c(){a=e("h3"),s=p("Default"),t=f(),E(r.$$.fragment),$=f(),d=e("h3"),g=p("Light variant"),h=f(),E(x.$$.fragment),b=f(),T=e("h3"),I=p("Disabled"),w=f(),E(M.$$.fragment),D=f(),this.h()},l(n){a=c(n,"H3",{id:!0});var e=l(a);s=o(e,"Default"),e.forEach(i),t=v(n),L(r.$$.fragment,n),$=v(n),d=c(n,"H3",{id:!0});var p=l(d);g=o(p,"Light variant"),p.forEach(i),h=v(n),L(x.$$.fragment,n),b=v(n),T=c(n,"H3",{id:!0});var u=l(T);I=o(u,"Disabled"),u.forEach(i),w=v(n),L(M.$$.fragment,n),D=v(n),this.h()},h(){u(a,"id","default"),u(d,"id","light-variant"),u(T,"id","disabled")},m(n,e){k(n,a,e),m(a,s),k(n,t,e),C(r,n,e),k(n,$,e),k(n,d,e),m(d,g),k(n,h,e),C(x,n,e),k(n,b,e),k(n,T,e),m(T,I),k(n,w,e),C(M,n,e),k(n,D,e),y=!0},p(n,a){const s={};1&a&&(s.$$scope={dirty:a,ctx:n}),r.$set(s);const t={};1&a&&(t.$$scope={dirty:a,ctx:n}),x.$set(t);const e={};1&a&&(e.$$scope={dirty:a,ctx:n}),M.$set(e)},i(n){y||(P(r.$$.fragment,n),P(x.$$.fragment,n),P(M.$$.fragment,n),y=!0)},o(n){S(r.$$.fragment,n),S(x.$$.fragment,n),S(M.$$.fragment,n),y=!1},d(n){n&&i(a),n&&i(t),_(r,n),n&&i($),n&&i(d),n&&i(h),_(x,n),n&&i(b),n&&i(T),n&&i(w),_(M,n),n&&i(D)}}}function mn(n){let a,s;return a=new U({props:{$$slots:{default:[kn],aside:[rn]},$$scope:{ctx:n}}}),{c(){E(a.$$.fragment)},l(n){L(a.$$.fragment,n)},m(n,t){C(a,n,t),s=!0},p(n,[s]){const t={};1&s&&(t.$$scope={dirty:s,ctx:n}),a.$set(t)},i(n){s||(P(a.$$.fragment,n),s=!0)},o(n){S(a.$$.fragment,n),s=!1},d(n){_(a,n)}}}export default class extends a{constructor(n){super(),s(this,n,null,mn,t,{})}}