Upload folder using huggingface_hub

README.md

@@ -1,9 +1,9 @@
 
 ---
 tags: [gradio-custom-component,gradio-template-Fallback,time,calendar,forms]
-title: gradio_calendar V0.0.1
-colorFrom: blue
-colorTo: indigo
+title: gradio_calendar V0.0.2
+colorFrom: yellow
+colorTo: gray
 sdk: docker
 pinned: false
 license: apache-2.0

app.py

@@ -6,7 +6,7 @@ def is_weekday(date: datetime.datetime):
     return date.weekday() < 5
 
 demo = gr.Interface(is_weekday, 
-    [Calendar(type="datetime", label="Select a date", info="Click anywhere to bring up the calendar.")], 
+    [Calendar(type="datetime", label="Select a date", info="Click the calendar icon to bring up the calendar.")], 
     gr.Label(label="Is it a weekday?"),
     examples=["2023-01-01", "2023-12-11"],
     cache_examples=True,

requirements.txt

@@ -1 +1 @@
-gradio_calendar-0.0.1-py3-none-any.whl
+gradio_calendar-0.0.2-py3-none-any.whl

src/backend/gradio_calendar/templates/component/index.js

@@ -10,37 +10,37 @@ const {
   init: le,
   insert: ne,
   safe_not_equal: fe,
-  set_dynamic_element_data: z,
+  set_dynamic_element_data: D,
   set_style: r,
-  toggle_class: h,
-  transition_in: G,
-  transition_out: H,
+  toggle_class: g,
+  transition_in: H,
+  transition_out: J,
   update_slot_base: ie
 } = window.__gradio__svelte__internal;
-function ae(l) {
-  let e, t, n;
+function ae(n) {
+  let e, t, l;
   const f = (
     /*#slots*/
-    l[17].default
+    n[17].default
   ), a = Z(
     f,
-    l,
+    n,
     /*$$scope*/
-    l[16],
+    n[16],
     null
   );
   let o = [
     { "data-testid": (
       /*test_id*/
-      l[7]
+      n[7]
     ) },
     { id: (
       /*elem_id*/
-      l[2]
+      n[2]
     ) },
     {
       class: t = "block " + /*elem_classes*/
-      l[3].join(" ") + " svelte-1t38q2d"
+      n[3].join(" ") + " svelte-1t38q2d"
     }
   ], _ = {};
   for (let i = 0; i < o.length; i += 1)
@@ -49,63 +49,63 @@ function ae(l) {
     c() {
       e = x(
         /*tag*/
-        l[14]
-      ), a && a.c(), z(
+        n[14]
+      ), a && a.c(), D(
         /*tag*/
-        l[14]
-      )(e, _), h(
+        n[14]
+      )(e, _), g(
         e,
         "hidden",
         /*visible*/
-        l[10] === !1
-      ), h(
+        n[10] === !1
+      ), g(
         e,
         "padded",
         /*padding*/
-        l[6]
-      ), h(
+        n[6]
+      ), g(
         e,
         "border_focus",
         /*border_mode*/
-        l[5] === "focus"
-      ), h(e, "hide-container", !/*explicit_call*/
-      l[8] && !/*container*/
-      l[9]), r(e, "height", typeof /*height*/
-      l[0] == "number" ? (
+        n[5] === "focus"
+      ), g(e, "hide-container", !/*explicit_call*/
+      n[8] && !/*container*/
+      n[9]), r(e, "height", typeof /*height*/
+      n[0] == "number" ? (
         /*height*/
-        l[0] + "px"
+        n[0] + "px"
       ) : void 0), r(e, "width", typeof /*width*/
-      l[1] == "number" ? `calc(min(${/*width*/
-      l[1]}px, 100%))` : void 0), r(
+      n[1] == "number" ? `calc(min(${/*width*/
+      n[1]}px, 100%))` : void 0), r(
         e,
         "border-style",
         /*variant*/
-        l[4]
+        n[4]
       ), r(
         e,
         "overflow",
         /*allow_overflow*/
-        l[11] ? "visible" : "hidden"
+        n[11] ? "visible" : "hidden"
       ), r(
         e,
         "flex-grow",
         /*scale*/
-        l[12]
+        n[12]
       ), r(e, "min-width", `calc(min(${/*min_width*/
-      l[13]}px, 100%))`), r(e, "border-width", "var(--block-border-width)");
+      n[13]}px, 100%))`), r(e, "border-width", "var(--block-border-width)");
     },
     m(i, s) {
-      ne(i, e, s), a && a.m(e, null), n = !0;
+      ne(i, e, s), a && a.m(e, null), l = !0;
     },
     p(i, s) {
-      a && a.p && (!n || s & /*$$scope*/
+      a && a.p && (!l || s & /*$$scope*/
       65536) && ie(
         a,
         f,
         i,
         /*$$scope*/
         i[16],
-        n ? ee(
+        l ? ee(
           f,
           /*$$scope*/
           i[16],
@@ -116,39 +116,39 @@ function ae(l) {
           i[16]
         ),
         null
-      ), z(
+      ), D(
         /*tag*/
         i[14]
       )(e, _ = te(o, [
-        (!n || s & /*test_id*/
+        (!l || s & /*test_id*/
         128) && { "data-testid": (
           /*test_id*/
           i[7]
         ) },
-        (!n || s & /*elem_id*/
+        (!l || s & /*elem_id*/
         4) && { id: (
           /*elem_id*/
           i[2]
         ) },
-        (!n || s & /*elem_classes*/
+        (!l || s & /*elem_classes*/
         8 && t !== (t = "block " + /*elem_classes*/
         i[3].join(" ") + " svelte-1t38q2d")) && { class: t }
-      ])), h(
+      ])), g(
         e,
         "hidden",
         /*visible*/
         i[10] === !1
-      ), h(
+      ), g(
         e,
         "padded",
         /*padding*/
         i[6]
-      ), h(
+      ), g(
         e,
         "border_focus",
         /*border_mode*/
         i[5] === "focus"
-      ), h(e, "hide-container", !/*explicit_call*/
+      ), g(e, "hide-container", !/*explicit_call*/
       i[8] && !/*container*/
       i[9]), s & /*height*/
       1 && r(e, "height", typeof /*height*/
@@ -181,47 +181,47 @@ function ae(l) {
       i[13]}px, 100%))`);
     },
     i(i) {
-      n || (G(a, i), n = !0);
+      l || (H(a, i), l = !0);
     },
     o(i) {
-      H(a, i), n = !1;
+      J(a, i), l = !1;
     },
     d(i) {
       i && p(e), a && a.d(i);
     }
   };
 }
-function se(l) {
+function se(n) {
   let e, t = (
     /*tag*/
-    l[14] && ae(l)
+    n[14] && ae(n)
   );
   return {
     c() {
       t && t.c();
     },
-    m(n, f) {
-      t && t.m(n, f), e = !0;
+    m(l, f) {
+      t && t.m(l, f), e = !0;
     },
-    p(n, [f]) {
+    p(l, [f]) {
       /*tag*/
-      n[14] && t.p(n, f);
+      l[14] && t.p(l, f);
     },
-    i(n) {
-      e || (G(t, n), e = !0);
+    i(l) {
+      e || (H(t, l), e = !0);
     },
-    o(n) {
-      H(t, n), e = !1;
+    o(l) {
+      J(t, l), e = !1;
     },
-    d(n) {
-      t && t.d(n);
+    d(l) {
+      t && t.d(l);
     }
   };
 }
-function _e(l, e, t) {
-  let { $$slots: n = {}, $$scope: f } = e, { height: a = void 0 } = e, { width: o = void 0 } = e, { elem_id: _ = "" } = e, { elem_classes: i = [] } = e, { variant: s = "solid" } = e, { border_mode: u = "base" } = e, { padding: m = !0 } = e, { type: g = "normal" } = e, { test_id: y = void 0 } = e, { explicit_call: k = !1 } = e, { container: b = !0 } = e, { visible: w = !0 } = e, { allow_overflow: S = !0 } = e, { scale: C = null } = e, { min_width: B = 0 } = e, d = g === "fieldset" ? "fieldset" : "div";
-  return l.$$set = (c) => {
-    "height" in c && t(0, a = c.height), "width" in c && t(1, o = c.width), "elem_id" in c && t(2, _ = c.elem_id), "elem_classes" in c && t(3, i = c.elem_classes), "variant" in c && t(4, s = c.variant), "border_mode" in c && t(5, u = c.border_mode), "padding" in c && t(6, m = c.padding), "type" in c && t(15, g = c.type), "test_id" in c && t(7, y = c.test_id), "explicit_call" in c && t(8, k = c.explicit_call), "container" in c && t(9, b = c.container), "visible" in c && t(10, w = c.visible), "allow_overflow" in c && t(11, S = c.allow_overflow), "scale" in c && t(12, C = c.scale), "min_width" in c && t(13, B = c.min_width), "$$scope" in c && t(16, f = c.$$scope);
+function _e(n, e, t) {
+  let { $$slots: l = {}, $$scope: f } = e, { height: a = void 0 } = e, { width: o = void 0 } = e, { elem_id: _ = "" } = e, { elem_classes: i = [] } = e, { variant: s = "solid" } = e, { border_mode: u = "base" } = e, { padding: m = !0 } = e, { type: h = "normal" } = e, { test_id: y = void 0 } = e, { explicit_call: k = !1 } = e, { container: b = !0 } = e, { visible: w = !0 } = e, { allow_overflow: S = !0 } = e, { scale: C = null } = e, { min_width: B = 0 } = e, d = h === "fieldset" ? "fieldset" : "div";
+  return n.$$set = (c) => {
+    "height" in c && t(0, a = c.height), "width" in c && t(1, o = c.width), "elem_id" in c && t(2, _ = c.elem_id), "elem_classes" in c && t(3, i = c.elem_classes), "variant" in c && t(4, s = c.variant), "border_mode" in c && t(5, u = c.border_mode), "padding" in c && t(6, m = c.padding), "type" in c && t(15, h = c.type), "test_id" in c && t(7, y = c.test_id), "explicit_call" in c && t(8, k = c.explicit_call), "container" in c && t(9, b = c.container), "visible" in c && t(10, w = c.visible), "allow_overflow" in c && t(11, S = c.allow_overflow), "scale" in c && t(12, C = c.scale), "min_width" in c && t(13, B = c.min_width), "$$scope" in c && t(16, f = c.$$scope);
   }, [
     a,
     o,
@@ -238,9 +238,9 @@ function _e(l, e, t) {
     C,
     B,
     d,
-    g,
+    h,
     f,
-    n
+    l
   ];
 }
 class oe extends X {
@@ -271,24 +271,24 @@ const {
   detach: re,
   element: me,
   get_all_dirty_from_scope: be,
-  get_slot_changes: he,
-  init: ge,
+  get_slot_changes: ge,
+  init: he,
   insert: we,
   safe_not_equal: ve,
   transition_in: ye,
   transition_out: ke,
   update_slot_base: Se
 } = window.__gradio__svelte__internal;
-function qe(l) {
+function qe(n) {
   let e, t;
-  const n = (
+  const l = (
     /*#slots*/
-    l[1].default
+    n[1].default
   ), f = ue(
-    n,
     l,
+    n,
     /*$$scope*/
-    l[0],
+    n[0],
     null
   );
   return {
@@ -302,12 +302,12 @@ function qe(l) {
       f && f.p && (!t || o & /*$$scope*/
       1) && Se(
         f,
-        n,
+        l,
         a,
         /*$$scope*/
         a[0],
-        t ? he(
-          n,
+        t ? ge(
+          l,
           /*$$scope*/
           a[0],
           o,
@@ -330,87 +330,87 @@ function qe(l) {
     }
   };
 }
-function Ce(l, e, t) {
-  let { $$slots: n = {}, $$scope: f } = e;
-  return l.$$set = (a) => {
+function Ce(n, e, t) {
+  let { $$slots: l = {}, $$scope: f } = e;
+  return n.$$set = (a) => {
     "$$scope" in a && t(0, f = a.$$scope);
-  }, [f, n];
+  }, [f, l];
 }
 class Be extends ce {
   constructor(e) {
-    super(), ge(this, e, Ce, qe, ve, {});
+    super(), he(this, e, Ce, qe, ve, {});
   }
 }
 const {
   SvelteComponent: Ie,
   attr: A,
   check_outros: Te,
-  create_component: je,
-  create_slot: De,
-  destroy_component: Pe,
+  create_component: ze,
+  create_slot: je,
+  destroy_component: De,
   detach: I,
-  element: ze,
-  empty: Ae,
-  get_all_dirty_from_scope: Ee,
-  get_slot_changes: Le,
-  group_outros: Ne,
-  init: Oe,
+  element: Ae,
+  empty: Ee,
+  get_all_dirty_from_scope: Le,
+  get_slot_changes: Ne,
+  group_outros: Oe,
+  init: Ue,
   insert: T,
-  mount_component: Ue,
-  safe_not_equal: Fe,
-  set_data: Ge,
-  space: He,
-  text: Je,
+  mount_component: Fe,
+  safe_not_equal: Ge,
+  set_data: He,
+  space: Je,
+  text: Ke,
   toggle_class: v,
   transition_in: q,
-  transition_out: j,
-  update_slot_base: Ke
+  transition_out: z,
+  update_slot_base: Me
 } = window.__gradio__svelte__internal;
-function E(l) {
+function E(n) {
   let e, t;
   return e = new Be({
     props: {
-      $$slots: { default: [Me] },
-      $$scope: { ctx: l }
+      $$slots: { default: [Pe] },
+      $$scope: { ctx: n }
     }
   }), {
     c() {
-      je(e.$$.fragment);
+      ze(e.$$.fragment);
     },
-    m(n, f) {
-      Ue(e, n, f), t = !0;
+    m(l, f) {
+      Fe(e, l, f), t = !0;
     },
-    p(n, f) {
+    p(l, f) {
       const a = {};
       f & /*$$scope, info*/
-      10 && (a.$$scope = { dirty: f, ctx: n }), e.$set(a);
+      10 && (a.$$scope = { dirty: f, ctx: l }), e.$set(a);
     },
-    i(n) {
-      t || (q(e.$$.fragment, n), t = !0);
+    i(l) {
+      t || (q(e.$$.fragment, l), t = !0);
     },
-    o(n) {
-      j(e.$$.fragment, n), t = !1;
+    o(l) {
+      z(e.$$.fragment, l), t = !1;
     },
-    d(n) {
-      Pe(e, n);
+    d(l) {
+      De(e, l);
     }
   };
 }
-function Me(l) {
+function Pe(n) {
   let e;
   return {
     c() {
-      e = Je(
+      e = Ke(
         /*info*/
-        l[1]
+        n[1]
       );
     },
-    m(t, n) {
-      T(t, e, n);
+    m(t, l) {
+      T(t, e, l);
     },
-    p(t, n) {
-      n & /*info*/
-      2 && Ge(
+    p(t, l) {
+      l & /*info*/
+      2 && He(
         e,
         /*info*/
         t[1]
@@ -421,51 +421,51 @@ function Me(l) {
     }
   };
 }
-function Qe(l) {
-  let e, t, n, f;
+function Qe(n) {
+  let e, t, l, f;
   const a = (
     /*#slots*/
-    l[2].default
-  ), o = De(
+    n[2].default
+  ), o = je(
     a,
-    l,
+    n,
     /*$$scope*/
-    l[3],
+    n[3],
     null
   );
   let _ = (
     /*info*/
-    l[1] && E(l)
+    n[1] && E(n)
   );
   return {
     c() {
-      e = ze("span"), o && o.c(), t = He(), _ && _.c(), n = Ae(), A(e, "data-testid", "block-info"), A(e, "class", "svelte-22c38v"), v(e, "sr-only", !/*show_label*/
-      l[0]), v(e, "hide", !/*show_label*/
-      l[0]), v(
+      e = Ae("span"), o && o.c(), t = Je(), _ && _.c(), l = Ee(), A(e, "data-testid", "block-info"), A(e, "class", "svelte-22c38v"), v(e, "sr-only", !/*show_label*/
+      n[0]), v(e, "hide", !/*show_label*/
+      n[0]), v(
         e,
         "has-info",
         /*info*/
-        l[1] != null
+        n[1] != null
       );
     },
     m(i, s) {
-      T(i, e, s), o && o.m(e, null), T(i, t, s), _ && _.m(i, s), T(i, n, s), f = !0;
+      T(i, e, s), o && o.m(e, null), T(i, t, s), _ && _.m(i, s), T(i, l, s), f = !0;
     },
     p(i, [s]) {
       o && o.p && (!f || s & /*$$scope*/
-      8) && Ke(
+      8) && Me(
         o,
         a,
         i,
         /*$$scope*/
         i[3],
-        f ? Le(
+        f ? Ne(
           a,
           /*$$scope*/
           i[3],
           s,
           null
-        ) : Ee(
+        ) : Le(
           /*$$scope*/
           i[3]
         ),
@@ -482,7 +482,7 @@ function Qe(l) {
         i[1] != null
       ), /*info*/
       i[1] ? _ ? (_.p(i, s), s & /*info*/
-      2 && q(_, 1)) : (_ = E(i), _.c(), q(_, 1), _.m(n.parentNode, n)) : _ && (Ne(), j(_, 1, 1, () => {
+      2 && q(_, 1)) : (_ = E(i), _.c(), q(_, 1), _.m(l.parentNode, l)) : _ && (Oe(), z(_, 1, 1, () => {
         _ = null;
       }), Te());
     },
@@ -490,22 +490,22 @@ function Qe(l) {
       f || (q(o, i), q(_), f = !0);
     },
     o(i) {
-      j(o, i), j(_), f = !1;
+      z(o, i), z(_), f = !1;
     },
     d(i) {
-      i && (I(e), I(t), I(n)), o && o.d(i), _ && _.d(i);
+      i && (I(e), I(t), I(l)), o && o.d(i), _ && _.d(i);
     }
   };
 }
-function Re(l, e, t) {
-  let { $$slots: n = {}, $$scope: f } = e, { show_label: a = !0 } = e, { info: o = void 0 } = e;
-  return l.$$set = (_) => {
+function Re(n, e, t) {
+  let { $$slots: l = {}, $$scope: f } = e, { show_label: a = !0 } = e, { info: o = void 0 } = e;
+  return n.$$set = (_) => {
     "show_label" in _ && t(0, a = _.show_label), "info" in _ && t(1, o = _.info), "$$scope" in _ && t(3, f = _.$$scope);
-  }, [a, o, n, f];
+  }, [a, o, l, f];
 }
 class Ve extends Ie {
   constructor(e) {
-    super(), Oe(this, e, Re, Qe, Fe, { show_label: 0, info: 1 });
+    super(), Ue(this, e, Re, Qe, Ge, { show_label: 0, info: 1 });
   }
 }
 const We = [
@@ -813,11 +813,11 @@ const We = [
   }
 };
 We.reduce(
-  (l, { color: e, primary: t, secondary: n }) => ({
-    ...l,
+  (n, { color: e, primary: t, secondary: l }) => ({
+    ...n,
     [e]: {
       primary: L[e][t],
-      secondary: L[e][n]
+      secondary: L[e][l]
     }
   }),
   {}
@@ -825,124 +825,116 @@ We.reduce(
 const {
   SvelteComponent: Xe,
   append: N,
-  attr: D,
+  attr: j,
   binding_callbacks: Ye,
-  create_component: J,
-  destroy_component: K,
-  detach: M,
+  create_component: K,
+  destroy_component: M,
+  detach: P,
   element: O,
   init: Ze,
   insert: Q,
-  is_function: pe,
-  listen: P,
+  listen: U,
   mount_component: R,
-  run_all: xe,
-  safe_not_equal: $e,
-  set_data: e0,
-  set_input_value: U,
-  space: t0,
-  text: l0,
-  toggle_class: F,
+  run_all: pe,
+  safe_not_equal: xe,
+  set_data: $e,
+  set_input_value: F,
+  space: e0,
+  text: t0,
+  toggle_class: G,
   transition_in: V,
   transition_out: W
 } = window.__gradio__svelte__internal;
-function n0(l) {
+function l0(n) {
   let e;
   return {
     c() {
-      e = l0(
+      e = t0(
         /*label*/
-        l[1]
+        n[1]
       );
     },
-    m(t, n) {
-      Q(t, e, n);
+    m(t, l) {
+      Q(t, e, l);
     },
-    p(t, n) {
-      n & /*label*/
-      2 && e0(
+    p(t, l) {
+      l & /*label*/
+      2 && $e(
         e,
         /*label*/
         t[1]
       );
     },
     d(t) {
-      t && M(e);
+      t && P(e);
     }
   };
 }
-function f0(l) {
-  let e, t, n, f, a, o, _, i;
+function n0(n) {
+  let e, t, l, f, a, o, _, i;
   return t = new Ve({
     props: {
       show_label: (
         /*show_label*/
-        l[8]
+        n[8]
       ),
       info: (
         /*info*/
-        l[6]
+        n[6]
       ),
-      $$slots: { default: [n0] },
-      $$scope: { ctx: l }
+      $$slots: { default: [l0] },
+      $$scope: { ctx: n }
     }
   }), {
     c() {
-      e = O("label"), J(t.$$.fragment), n = t0(), f = O("input"), D(f, "type", "date"), f.disabled = a = !/*interactive*/
-      l[10], D(f, "class", "svelte-16v5klh"), D(e, "class", "svelte-16v5klh"), F(
+      e = O("label"), K(t.$$.fragment), l = e0(), f = O("input"), j(f, "type", "date"), f.disabled = a = !/*interactive*/
+      n[10], j(f, "class", "svelte-c6v8zr"), j(e, "class", "svelte-c6v8zr"), G(
         e,
         "container",
         /*container*/
-        l[9]
+        n[9]
       );
     },
     m(s, u) {
-      Q(s, e, u), R(t, e, null), N(e, n), N(e, f), l[15](f), U(
+      Q(s, e, u), R(t, e, null), N(e, l), N(e, f), n[15](f), F(
         f,
         /*value*/
-        l[0]
+        n[0]
       ), o = !0, _ || (i = [
-        P(
+        U(
           f,
           "input",
           /*input_input_handler*/
-          l[16]
+          n[16]
         ),
-        P(f, "mousedown", function() {
-          pe(
-            /*el*/
-            l[11].showPicker
-          ) && l[11].showPicker.apply(this, arguments);
-        }),
-        P(
+        U(
           f,
           "change",
           /*handle_change*/
-          l[12]
+          n[12]
         )
       ], _ = !0);
     },
     p(s, u) {
-      l = s;
       const m = {};
       u & /*show_label*/
       256 && (m.show_label = /*show_label*/
-      l[8]), u & /*info*/
+      s[8]), u & /*info*/
       64 && (m.info = /*info*/
-      l[6]), u & /*$$scope, label*/
-      131074 && (m.$$scope = { dirty: u, ctx: l }), t.$set(m), (!o || u & /*interactive*/
+      s[6]), u & /*$$scope, label*/
+      131074 && (m.$$scope = { dirty: u, ctx: s }), t.$set(m), (!o || u & /*interactive*/
       1024 && a !== (a = !/*interactive*/
-      l[10])) && (f.disabled = a), u & /*value*/
-      1 && U(
+      s[10])) && (f.disabled = a), u & /*value*/
+      1 && F(
         f,
         /*value*/
-        l[0]
+        s[0]
       ), (!o || u & /*container*/
-      512) && F(
+      512) && G(
         e,
         "container",
         /*container*/
-        l[9]
+        s[9]
       );
     },
     i(s) {
@@ -952,74 +944,74 @@ function f0(l) {
       W(t.$$.fragment, s), o = !1;
     },
     d(s) {
-      s && M(e), K(t), l[15](null), _ = !1, xe(i);
+      s && P(e), M(t), n[15](null), _ = !1, pe(i);
     }
   };
 }
-function i0(l) {
+function f0(n) {
   let e, t;
   return e = new oe({
     props: {
       visible: (
         /*visible*/
-        l[2]
+        n[2]
       ),
       elem_id: (
         /*elem_id*/
-        l[4]
+        n[4]
       ),
       elem_classes: (
         /*elem_classes*/
-        l[3]
+        n[3]
       ),
       scale: (
         /*scale*/
-        l[5]
+        n[5]
       ),
       min_width: (
         /*min_width*/
-        l[7]
+        n[7]
       ),
       allow_overflow: !1,
       padding: !0,
-      $$slots: { default: [f0] },
-      $$scope: { ctx: l }
+      $$slots: { default: [n0] },
+      $$scope: { ctx: n }
     }
   }), {
     c() {
-      J(e.$$.fragment);
+      K(e.$$.fragment);
     },
-    m(n, f) {
-      R(e, n, f), t = !0;
+    m(l, f) {
+      R(e, l, f), t = !0;
     },
-    p(n, [f]) {
+    p(l, [f]) {
       const a = {};
       f & /*visible*/
       4 && (a.visible = /*visible*/
-      n[2]), f & /*elem_id*/
+      l[2]), f & /*elem_id*/
       16 && (a.elem_id = /*elem_id*/
-      n[4]), f & /*elem_classes*/
+      l[4]), f & /*elem_classes*/
       8 && (a.elem_classes = /*elem_classes*/
-      n[3]), f & /*scale*/
+      l[3]), f & /*scale*/
       32 && (a.scale = /*scale*/
-      n[5]), f & /*min_width*/
+      l[5]), f & /*min_width*/
       128 && (a.min_width = /*min_width*/
-      n[7]), f & /*$$scope, container, interactive, el, value, show_label, info, label*/
-      134979 && (a.$$scope = { dirty: f, ctx: n }), e.$set(a);
+      l[7]), f & /*$$scope, container, interactive, el, value, show_label, info, label*/
+      134979 && (a.$$scope = { dirty: f, ctx: l }), e.$set(a);
     },
-    i(n) {
-      t || (V(e.$$.fragment, n), t = !0);
+    i(l) {
+      t || (V(e.$$.fragment, l), t = !0);
     },
-    o(n) {
-      W(e.$$.fragment, n), t = !1;
+    o(l) {
+      W(e.$$.fragment, l), t = !1;
     },
-    d(n) {
-      K(e, n);
+    d(l) {
+      M(e, l);
     }
   };
 }
-function a0(l, e, t) {
-  let { value: n = null } = e, { value_is_output: f = !1 } = e, { label: a } = e, { visible: o = !0 } = e, { elem_classes: _ } = e, { elem_id: i } = e, { scale: s } = e, { info: u } = e, { min_width: m } = e, { show_label: g = !0 } = e, { container: y = !0 } = e, { interactive: k = !0 } = e, { gradio: b } = e, w;
+function i0(n, e, t) {
+  let { value: l = null } = e, { value_is_output: f = !1 } = e, { label: a } = e, { visible: o = !0 } = e, { elem_classes: _ } = e, { elem_id: i } = e, { scale: s } = e, { info: u } = e, { min_width: m } = e, { show_label: h = !0 } = e, { container: y = !0 } = e, { interactive: k = !0 } = e, { gradio: b } = e, w;
   function S() {
     b.dispatch("change"), f || (b.dispatch("submit"), b.dispatch("input"));
   }
@@ -1029,16 +1021,16 @@ function a0(l, e, t) {
     });
   }
   function B() {
-    n = this.value, t(0, n);
+    l = this.value, t(0, l);
   }
-  return l.$$set = (d) => {
-    "value" in d && t(0, n = d.value), "value_is_output" in d && t(13, f = d.value_is_output), "label" in d && t(1, a = d.label), "visible" in d && t(2, o = d.visible), "elem_classes" in d && t(3, _ = d.elem_classes), "elem_id" in d && t(4, i = d.elem_id), "scale" in d && t(5, s = d.scale), "info" in d && t(6, u = d.info), "min_width" in d && t(7, m = d.min_width), "show_label" in d && t(8, g = d.show_label), "container" in d && t(9, y = d.container), "interactive" in d && t(10, k = d.interactive), "gradio" in d && t(14, b = d.gradio);
-  }, l.$$.update = () => {
-    l.$$.dirty & /*value*/
-    1 && n === null && t(0, n = (/* @__PURE__ */ new Date()).toISOString().split("T")[0]), l.$$.dirty & /*value*/
+  return n.$$set = (d) => {
+    "value" in d && t(0, l = d.value), "value_is_output" in d && t(13, f = d.value_is_output), "label" in d && t(1, a = d.label), "visible" in d && t(2, o = d.visible), "elem_classes" in d && t(3, _ = d.elem_classes), "elem_id" in d && t(4, i = d.elem_id), "scale" in d && t(5, s = d.scale), "info" in d && t(6, u = d.info), "min_width" in d && t(7, m = d.min_width), "show_label" in d && t(8, h = d.show_label), "container" in d && t(9, y = d.container), "interactive" in d && t(10, k = d.interactive), "gradio" in d && t(14, b = d.gradio);
+  }, n.$$.update = () => {
+    n.$$.dirty & /*value*/
+    1 && l === null && t(0, l = (/* @__PURE__ */ new Date()).toISOString().split("T")[0]), n.$$.dirty & /*value*/
     1 && S();
   }, [
-    n,
+    l,
     a,
     o,
     _,
@@ -1046,7 +1038,7 @@ function a0(l, e, t) {
     s,
     u,
     m,
-    g,
+    h,
     y,
     k,
     w,
@@ -1057,9 +1049,9 @@ function a0(l, e, t) {
     B
   ];
 }
-class s0 extends Xe {
+class a0 extends Xe {
   constructor(e) {
-    super(), Ze(this, e, a0, i0, $e, {
+    super(), Ze(this, e, i0, f0, xe, {
       value: 0,
       value_is_output: 13,
       label: 1,
@@ -1077,5 +1069,5 @@ class s0 extends Xe {
   }
 }
 export {
-  s0 as default
+  a0 as default
 };

src/backend/gradio_calendar/templates/component/style.css

@@ -1 +1 @@
-.block.svelte-1t38q2d{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-1t38q2d{border-color:var(--color-accent)}.padded.svelte-1t38q2d{padding:var(--block-padding)}.hidden.svelte-1t38q2d{display:none}.hide-container.svelte-1t38q2d{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-lpi64a{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-lpi64a{opacity:.5;box-shadow:none}button[disabled].svelte-lpi64a:hover{cursor:not-allowed}.padded.svelte-lpi64a{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-lpi64a:hover,button.highlight.svelte-lpi64a{cursor:pointer;color:var(--color-accent)}.padded.svelte-lpi64a:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-lpi64a{padding:0 1px;font-size:10px}div.svelte-lpi64a{padding:2px;display:flex;align-items:flex-end}.small.svelte-lpi64a{width:14px;height:14px}.large.svelte-lpi64a{width:22px;height:22px}.pending.svelte-lpi64a{animation:svelte-lpi64a-flash .5s infinite}@keyframes svelte-lpi64a-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-lpi64a{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6{fill:currentColor}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-ipfyu7{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;padding-bottom:var(--spacing-xl);color:var(--block-label-text-color);flex-shrink:0;width:95%}.show_border.svelte-ipfyu7{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-lde7lt{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;align-self:flex-end}.icon.svelte-lde7lt{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-lde7lt{color:var(--color-accent)}.icon.svelte-lde7lt:hover,.icon.svelte-lde7lt:focus{color:var(--color-accent)}label.svelte-16v5klh.svelte-16v5klh{display:block;width:100%}input.svelte-16v5klh.svelte-16v5klh{display:block;position:relative;outline:none!important;box-shadow:var(--input-shadow);background:var(--input-background-fill);padding:var(--input-padding);width:100%;color:var(--body-text-color);font-weight:var(--input-text-weight);font-size:var(--input-text-size);line-height:var(--line-sm);border:none}input[type=date].svelte-16v5klh.svelte-16v5klh{cursor:pointer}input[type=date].svelte-16v5klh.svelte-16v5klh::-webkit-calendar-picker-indicator{display:none}label.svelte-16v5klh.svelte-16v5klh:not(.container),label.svelte-16v5klh:not(.container)>input.svelte-16v5klh{height:100%}.container.svelte-16v5klh>input.svelte-16v5klh{border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-radius)}input.svelte-16v5klh.svelte-16v5klh:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1}input.svelte-16v5klh.svelte-16v5klh:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}input.svelte-16v5klh.svelte-16v5klh::placeholder{color:var(--input-placeholder-color)}
+.block.svelte-1t38q2d{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-1t38q2d{border-color:var(--color-accent)}.padded.svelte-1t38q2d{padding:var(--block-padding)}.hidden.svelte-1t38q2d{display:none}.hide-container.svelte-1t38q2d{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-lpi64a{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-lpi64a{opacity:.5;box-shadow:none}button[disabled].svelte-lpi64a:hover{cursor:not-allowed}.padded.svelte-lpi64a{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-lpi64a:hover,button.highlight.svelte-lpi64a{cursor:pointer;color:var(--color-accent)}.padded.svelte-lpi64a:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-lpi64a{padding:0 1px;font-size:10px}div.svelte-lpi64a{padding:2px;display:flex;align-items:flex-end}.small.svelte-lpi64a{width:14px;height:14px}.large.svelte-lpi64a{width:22px;height:22px}.pending.svelte-lpi64a{animation:svelte-lpi64a-flash .5s infinite}@keyframes svelte-lpi64a-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-lpi64a{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6{fill:currentColor}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-ipfyu7{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;padding-bottom:var(--spacing-xl);color:var(--block-label-text-color);flex-shrink:0;width:95%}.show_border.svelte-ipfyu7{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-lde7lt{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;align-self:flex-end}.icon.svelte-lde7lt{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-lde7lt{color:var(--color-accent)}.icon.svelte-lde7lt:hover,.icon.svelte-lde7lt:focus{color:var(--color-accent)}label.svelte-c6v8zr.svelte-c6v8zr{display:block;width:100%}input.svelte-c6v8zr.svelte-c6v8zr{display:block;position:relative;outline:none!important;box-shadow:var(--input-shadow);background:var(--input-background-fill);padding:var(--input-padding);width:100%;color:var(--body-text-color);font-weight:var(--input-text-weight);font-size:var(--input-text-size);line-height:var(--line-sm);border:none}input[type=date].svelte-c6v8zr.svelte-c6v8zr::-webkit-calendar-picker-indicator{cursor:pointer}label.svelte-c6v8zr.svelte-c6v8zr:not(.container),label.svelte-c6v8zr:not(.container)>input.svelte-c6v8zr{height:100%}.container.svelte-c6v8zr>input.svelte-c6v8zr{border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-radius)}input.svelte-c6v8zr.svelte-c6v8zr:disabled{-webkit-text-fill-color:var(--body-text-color);-webkit-opacity:1;opacity:1}input.svelte-c6v8zr.svelte-c6v8zr:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}input.svelte-c6v8zr.svelte-c6v8zr::placeholder{color:var(--input-placeholder-color)}

src/demo/app.py

@@ -6,7 +6,7 @@ def is_weekday(date: datetime.datetime):
     return date.weekday() < 5
 
 demo = gr.Interface(is_weekday, 
-    [Calendar(type="datetime", label="Select a date", info="Click anywhere to bring up the calendar.")], 
+    [Calendar(type="datetime", label="Select a date", info="Click the calendar icon to bring up the calendar.")], 
     gr.Label(label="Is it a weekday?"),
     examples=["2023-01-01", "2023-12-11"],
     cache_examples=True,

src/frontend/Index.svelte

@@ -39,7 +39,6 @@
 
 </script>
 
-<!-- svelte-ignore a11y-autofocus -->
 
 <Block
 	{visible}
@@ -52,7 +51,7 @@
 >
 	<label class:container>
 		<BlockTitle {show_label} {info}>{label}</BlockTitle>
-		<input type="date" bind:this={el} bind:value={value} on:mousedown={el.showPicker} on:change={handle_change} disabled={!interactive}/>
+		<input type="date" bind:this={el} bind:value={value} on:change={handle_change} disabled={!interactive}/>
 	</label>
 </Block>
 
@@ -76,11 +75,9 @@
 		line-height: var(--line-sm);
 		border: none;
 	}
-	input[type="date"] {
-		cursor: pointer;
-	}
+
 	input[type="date"]::-webkit-calendar-picker-indicator {
-		display: none;
+		cursor: pointer;
 	}
 
 	label:not(.container),
@@ -106,4 +103,4 @@
 		color: var(--input-placeholder-color);
 	}
 
-</style>
+</style>

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_calendar"
-version = "0.0.1"
+version = "0.0.2"
 description = "Gradio component for selecting dates with a calendar 📆"
 readme = "README.md"
 license = "MIT"
@@ -36,7 +36,7 @@ classifiers = [
 dev = ["build", "twine"]
 
 [tool.hatch.build]
-artifacts = ["/backend/gradio_calendar/templates", "*.pyi", "backend/gradio_calendar/templates", "backend/gradio_calendar/templates"]
+artifacts = ["/backend/gradio_calendar/templates", "*.pyi", "backend/gradio_calendar/templates", "backend/gradio_calendar/templates", "backend/gradio_calendar/templates", "backend/gradio_calendar/templates", "backend/gradio_calendar/templates", "backend/gradio_calendar/templates"]
 
 [tool.hatch.build.targets.wheel]
 packages = ["/backend/gradio_calendar"]