@ibiz-template/vue3-components 0.7.31-alpha.0 → 0.7.37-alpha.5

package/lib/editor/date-range-select/date-range-select-picker/components/week-range-select/week-range-select.cjs

@@ -0,0 +1,264 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var dayjs = require('dayjs');
+require('../../../../../node_modules/.pnpm/dayjs@1.11.10/node_modules/dayjs/locale/zh-cn.cjs');
+require('./week-range-select.css');
+
+"use strict";
+var weekRangeSelect = /* @__PURE__ */ vue.defineComponent({
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["change", "visibleChange"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("bi-week-range");
+    const curValue = vue.ref();
+    const weekRangeRef = vue.ref();
+    const visible = vue.ref(false);
+    const Today = dayjs(/* @__PURE__ */ new Date()).format("YYYY/MM/DD");
+    const start = vue.ref();
+    const end = vue.ref();
+    let clicked = false;
+    const hoverItem = vue.ref();
+    const initSelectDate = () => {
+      start.value = null;
+      end.value = null;
+    };
+    vue.watch(() => props.value, (newVal) => {
+      if (newVal && Array.isArray(newVal)) {
+        start.value = new Date(newVal[0]);
+        end.value = new Date(newVal[1]);
+      } else {
+        initSelectDate();
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const computedDateWeekSunday = (date) => {
+      const day = date.getDay();
+      let weekday = day;
+      if (day === 0) {
+        weekday = 7;
+      }
+      const sunday = date.getTime() + (7 - weekday) * 24 * 60 * 60 * 1e3;
+      const tempEnd = new Date(sunday);
+      tempEnd.setHours(23, 59, 59, 0);
+      return tempEnd;
+    };
+    const computedDateWeekMonday = (date) => {
+      const day = date.getDay();
+      let weekday = day;
+      if (day === 0) {
+        weekday = 7;
+      }
+      const monday = date.getTime() - (weekday - 1) * 24 * 60 * 60 * 1e3;
+      const tempStart = new Date(monday);
+      tempStart.setHours(0, 0, 0, 0);
+      return tempStart;
+    };
+    const isInRange = (cell) => {
+      const {
+        date
+      } = cell;
+      const curTime = date.getTime();
+      if (start.value && end.value) {
+        const startTime = start.value.getTime();
+        const endTime = end.value.getTime();
+        if (curTime >= startTime && curTime <= endTime) {
+          return true;
+        }
+      }
+      return false;
+    };
+    const isEnded = (cell) => {
+      const {
+        date
+      } = cell;
+      if (end.value) {
+        const sunday = computedDateWeekSunday(end.value);
+        const monday = computedDateWeekMonday(end.value);
+        if (date.getTime() >= monday.getTime() && date.getTime() <= sunday.getTime()) {
+          return true;
+        }
+        return false;
+      }
+    };
+    const isStarted = (cell) => {
+      const {
+        date
+      } = cell;
+      if (start.value) {
+        const sunday = computedDateWeekSunday(start.value);
+        const monday = computedDateWeekMonday(start.value);
+        if (date.getTime() >= monday.getTime() && date.getTime() <= sunday.getTime()) {
+          return true;
+        }
+        return false;
+      }
+    };
+    const isToday = (cell) => {
+      const format = "YYYY/MM/DD";
+      return cell.dayjs.format(format) === Today;
+    };
+    const handleChange = () => {
+      if (start.value && end.value) {
+        const startDate = start.value.toLocaleDateString();
+        const endDate = end.value.toLocaleDateString();
+        emit("change", [startDate, endDate]);
+      }
+    };
+    const cellClick = (cell) => {
+      const {
+        date
+      } = cell;
+      if (!clicked) {
+        initSelectDate();
+        start.value = computedDateWeekMonday(date);
+        clicked = true;
+      } else {
+        const tempSunday = computedDateWeekSunday(date);
+        const tempMonday = computedDateWeekMonday(date);
+        if (tempMonday.getTime() > start.value.getTime()) {
+          end.value = tempSunday;
+        } else {
+          end.value = computedDateWeekSunday(start.value);
+          start.value = tempMonday;
+        }
+        clicked = false;
+      }
+    };
+    const weekRangeClick = () => {
+      if (visible.value) {
+        weekRangeRef.value.handleClose();
+      } else {
+        weekRangeRef.value.handleOpen();
+      }
+    };
+    const visibleChange = (tag) => {
+      visible.value = tag;
+      emit("visibleChange", tag);
+    };
+    const handleClose = () => {
+      weekRangeRef.value.handleClose();
+    };
+    const handleOpen = () => {
+      weekRangeRef.value.handleOpen();
+    };
+    const isHover = (cell) => {
+      const {
+        date
+      } = cell;
+      if (hoverItem.value) {
+        const monday = computedDateWeekMonday(hoverItem.value);
+        const sunday = computedDateWeekSunday(hoverItem.value);
+        const currentTime = date.getTime();
+        if (monday.getTime() <= currentTime && sunday.getTime() >= currentTime) {
+          return true;
+        }
+      }
+      return false;
+    };
+    const isInHoverRange = (cell) => {
+      var _a;
+      const {
+        date
+      } = cell;
+      const curTime = date.getTime();
+      if (start.value && !end.value && hoverItem.value) {
+        const curHoverTime = (_a = hoverItem.value) == null ? void 0 : _a.getTime();
+        let tempStart = start.value;
+        let tempEnd = hoverItem.value;
+        if (curHoverTime < start.value.getTime()) {
+          tempEnd = start.value;
+          tempStart = hoverItem.value;
+        }
+        const startTime = tempStart.getTime();
+        const endTime = tempEnd.getTime();
+        if (curTime >= startTime && curTime <= endTime) {
+          return true;
+        }
+        return isHover(cell);
+      }
+      return false;
+    };
+    const onMouseHover = (cell) => {
+      const {
+        date
+      } = cell;
+      hoverItem.value = date;
+    };
+    const onMouseleave = () => {
+      hoverItem.value = null;
+    };
+    const isMonday = (cell) => {
+      const {
+        date
+      } = cell;
+      return date.getDay() === 1;
+    };
+    const isSunday = (cell) => {
+      const {
+        date
+      } = cell;
+      return date.getDay() === 0;
+    };
+    return {
+      ns,
+      curValue,
+      weekRangeRef,
+      isInRange,
+      isInHoverRange,
+      isEnded,
+      isStarted,
+      isToday,
+      weekRangeClick,
+      cellClick,
+      visibleChange,
+      handleChange,
+      handleClose,
+      handleOpen,
+      isHover,
+      isMonday,
+      isSunday,
+      onMouseHover,
+      onMouseleave
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b(),
+      "onClick": this.weekRangeClick
+    }, [vue.createVNode(vue.resolveComponent("el-date-picker"), {
+      "ref": "weekRangeRef",
+      "modelValue": this.curValue,
+      "onUpdate:modelValue": ($event) => this.curValue = $event,
+      "popper-class": this.ns.b("picker-pop"),
+      "type": "daterange",
+      "onChange": this.handleChange,
+      "onVisibleChange": this.visibleChange
+    }, {
+      default: (cell) => {
+        return vue.createVNode("div", {
+          "class": [this.ns.e("cell-item"), this.ns.is("inrange", this.isInRange(cell) && !this.isEnded(cell) && !this.isStarted(cell)), this.ns.is("inhoverrange", this.isInHoverRange(cell) && !this.isEnded(cell) && !this.isStarted(cell)), this.ns.is("hover", this.isHover(cell) && !this.isEnded(cell) && !this.isStarted(cell)), this.ns.is("left", cell.column === 0), this.ns.is("right", cell.column === 6), this.ns.is("ended", this.isEnded(cell)), this.ns.is("started", this.isStarted(cell)), this.ns.is("monday", this.isMonday(cell)), this.ns.is("sunday", this.isSunday(cell))],
+          "onMouseenter": () => this.onMouseHover(cell),
+          "onMouseleave": () => this.onMouseleave(),
+          "onClick": () => this.cellClick(cell)
+        }, [vue.createVNode("span", {
+          "class": [this.ns.em("cell-item", "text"), this.ns.is("today", this.isToday(cell))]
+        }, [cell.text])]);
+      }
+    })]);
+  }
+});
+
+exports.default = weekRangeSelect;

package/lib/editor/date-range-select/date-range-select-picker/components/week-range-select/week-range-select.css

@@ -0,0 +1 @@
+.ibiz-bi-week-range{width:100%;height:100%;cursor:pointer}.ibiz-bi-week-range .el-date-editor{width:0;height:0;cursor:pointer}.ibiz-bi-week-range__cell-item{box-sizing:border-box;height:30px;padding:var(--ibiz-spacing-super-tight) 0}.ibiz-bi-week-range__cell-item--text{position:absolute;left:50%;display:block;width:24px;height:24px;margin:0 auto;line-height:24px;border-radius:50%;transform:translateX(-50%)}.ibiz-bi-week-range__cell-item--text.is-today{color:var(--ibiz-color-primary)}.ibiz-bi-week-range__cell-item.is-started{width:100%;margin-left:5px;color:var(--ibiz-color-primary-text);background:var(--ibiz-color-primary)}.ibiz-bi-week-range__cell-item.is-started .ibiz-bi-week-range__cell-item--text{color:var(--ibiz-color-primary-text);background:var(--ibiz-color-primary)}.ibiz-bi-week-range__cell-item.is-started.is-monday{border-top-left-radius:var(--ibiz-border-radius-small);border-bottom-left-radius:var(--ibiz-border-radius-small)}.ibiz-bi-week-range__cell-item.is-started.is-left{border-top-left-radius:var(--ibiz-border-radius-small);border-bottom-left-radius:var(--ibiz-border-radius-small)}.ibiz-bi-week-range__cell-item.is-started.is-sunday{position:relative;z-index:10;border-top-right-radius:var(--ibiz-border-radius-small);border-bottom-right-radius:var(--ibiz-border-radius-small)}.ibiz-bi-week-range__cell-item.is-started.is-right{border-top-right-radius:var(--ibiz-border-radius-small);border-bottom-right-radius:var(--ibiz-border-radius-small)}.ibiz-bi-week-range__cell-item.is-ended{z-index:10;width:100%;margin-right:var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-primary-text);background:var(--ibiz-color-primary)}.ibiz-bi-week-range__cell-item.is-ended .ibiz-bi-week-range__cell-item--text{color:var(--ibiz-color-primary-text);background:var(--ibiz-color-primary)}.ibiz-bi-week-range__cell-item.is-ended.is-monday{border-top-left-radius:5px;border-bottom-left-radius:5px}.ibiz-bi-week-range__cell-item.is-ended.is-left{border-top-left-radius:var(--ibiz-border-radius-small);border-bottom-left-radius:var(--ibiz-border-radius-small)}.ibiz-bi-week-range__cell-item.is-ended.is-sunday{border-top-right-radius:5px;border-bottom-right-radius:5px}.ibiz-bi-week-range__cell-item.is-ended.is-right{border-top-right-radius:var(--ibiz-border-radius-small);border-bottom-right-radius:var(--ibiz-border-radius-small)}.ibiz-bi-week-range__cell-item.is-inrange{color:var(--ibiz-color-text-0);background:var(--ibiz-color-secondary-light-default)}.ibiz-bi-week-range__cell-item.is-inrange.is-hover{background:var(--ibiz-color-secondary-light-default)}.ibiz-bi-week-range__cell-item.is-hover{color:var(--ibiz-color-primary);background:0 0}.ibiz-bi-week-range__cell-item.is-inhoverrange{color:var(--ibiz-color-text-0);background:var(--ibiz-color-secondary-light-default)}.ibiz-bi-week-range__cell-item.is-inhoverrange.is-hover{color:var(--ibiz-color-primary-text);background:var(--ibiz-color-primary)}.ibiz-bi-week-range__cell-item.is-inhoverrange.is-left{border-top-left-radius:var(--ibiz-border-radius-small);border-bottom-left-radius:var(--ibiz-border-radius-small)}.ibiz-bi-week-range__cell-item.is-inhoverrange.is-right{border-top-right-radius:var(--ibiz-border-radius-small);border-bottom-right-radius:var(--ibiz-border-radius-small)}.ibiz-bi-week-range-picker-pop .el-date-table tr:hover{background-color:unset!important}.ibiz-bi-week-range-picker-pop.el-picker__popper .el-date-table__row .is-started{padding-left:5px;margin-left:0}

package/lib/editor/date-range-select/date-range-select-picker/components/year-range-select/year-range-select.cjs

@@ -0,0 +1,262 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./year-range-select.css');
+
+"use strict";
+var yearRangeSelect = /* @__PURE__ */ vue.defineComponent({
+  name: "BIYearRangeSelect",
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["change", "visibleChange"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("bi-year-range-select");
+    const hoverItem = vue.ref();
+    const visible = vue.ref(false);
+    const leftYears = vue.ref([(/* @__PURE__ */ new Date()).getFullYear() - (/* @__PURE__ */ new Date()).getFullYear() % 10, (/* @__PURE__ */ new Date()).getFullYear() + (9 - (/* @__PURE__ */ new Date()).getFullYear() % 10)]);
+    const rightYears = vue.ref([(/* @__PURE__ */ new Date()).getFullYear() + (10 - (/* @__PURE__ */ new Date()).getFullYear() % 10), (/* @__PURE__ */ new Date()).getFullYear() + (19 - (/* @__PURE__ */ new Date()).getFullYear() % 10)]);
+    const years = vue.ref({
+      start: void 0,
+      end: void 0
+    });
+    const prevYears = vue.ref([]);
+    const nextYears = vue.ref([]);
+    const init = () => {
+      leftYears.value = [(/* @__PURE__ */ new Date()).getFullYear() - (/* @__PURE__ */ new Date()).getFullYear() % 10, (/* @__PURE__ */ new Date()).getFullYear() + (9 - (/* @__PURE__ */ new Date()).getFullYear() % 10)];
+      rightYears.value = [(/* @__PURE__ */ new Date()).getFullYear() + (10 - (/* @__PURE__ */ new Date()).getFullYear() % 10), (/* @__PURE__ */ new Date()).getFullYear() + (19 - (/* @__PURE__ */ new Date()).getFullYear() % 10)];
+    };
+    const computedBatchYears = (left, right) => {
+      let value = left - 1;
+      const tempYears = [];
+      while (value <= right + 1) {
+        tempYears.push(value);
+        value += 1;
+      }
+      return tempYears;
+    };
+    prevYears.value = computedBatchYears(leftYears.value[0], leftYears.value[1]);
+    nextYears.value = computedBatchYears(rightYears.value[0], rightYears.value[1]);
+    vue.watch(() => props.value, (newVal) => {
+      if (newVal && Array.isArray(newVal) && newVal.length > 0) {
+        const start = Number(newVal[0]);
+        const end = Number(newVal[1]);
+        if (!Number.isNaN(start) && !Number.isNaN(end)) {
+          leftYears.value = [start - start % 10, start + (9 - start % 10)];
+          years.value.start = start;
+          rightYears.value = [end - end % 10, end + (9 - end % 10)];
+          years.value.end = end;
+        }
+      } else {
+        init();
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const onReduce = (tag) => {
+      if (tag === "left") {
+        leftYears.value[0] -= 10;
+        leftYears.value[1] -= 10;
+        prevYears.value = computedBatchYears(leftYears.value[0], leftYears.value[1]);
+      } else {
+        rightYears.value[0] -= 10;
+        rightYears.value[1] -= 10;
+        nextYears.value = computedBatchYears(rightYears.value[0], rightYears.value[1]);
+      }
+    };
+    const onAdd = (tag) => {
+      if (tag === "left") {
+        leftYears.value[0] += 10;
+        leftYears.value[1] += 10;
+        prevYears.value = computedBatchYears(leftYears.value[0], leftYears.value[1]);
+      } else {
+        rightYears.value[0] += 10;
+        rightYears.value[1] += 10;
+        nextYears.value = computedBatchYears(rightYears.value[0], rightYears.value[1]);
+      }
+    };
+    const renderLeftIcon = (tag) => {
+      if (tag === "right" && leftYears.value && rightYears.value && leftYears.value.at(-1) === rightYears.value[0] - 1) {
+        return vue.createVNode("div", null, null);
+      }
+      return vue.createVNode("svg", {
+        "onClick": () => onReduce(tag),
+        "viewBox": "0 0 16 16",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "height": "1em",
+        "width": "1em",
+        "focusable": "false",
+        "fill": "currentColor"
+      }, [vue.createVNode("g", {
+        "id": "aav1.icon\u56FE\u6807/5.navigation/angle-double-left",
+        "stroke-width": "1",
+        "fill-rule": "evenodd"
+      }, [vue.createVNode("path", {
+        "d": "M7.984 7l4.75 4.762-.832.817-3.924-3.924-3.99 3.99-.825-.836L7.973 7l.005.006L7.984 7zm0-4l4.75 4.762-.832.817-3.924-3.924-3.99 3.99-.825-.836L7.973 3l.005.006L7.984 3z",
+        "id": "aav\u5F62\u72B6\u7ED3\u5408",
+        "transform": "rotate(-90 7.949 7.822)"
+      }, null)])]);
+    };
+    const renderRightIcon = (tag) => {
+      if (tag === "left" && leftYears.value && rightYears.value && leftYears.value.at(-1) === rightYears.value[0] - 1) {
+        return vue.createVNode("div", null, null);
+      }
+      return vue.createVNode("svg", {
+        "onClick": () => onAdd(tag),
+        "viewBox": "0 0 16 16",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "height": "1em",
+        "width": "1em",
+        "focusable": "false",
+        "fill": "currentColor"
+      }, [vue.createVNode("g", {
+        "id": "aaw1.icon\u56FE\u6807/5.navigation/angle-double-right",
+        "stroke-width": "1",
+        "fill-rule": "evenodd"
+      }, [vue.createVNode("path", {
+        "d": "M7.984 7.3l4.75 4.762-.832.817-3.924-3.924-3.99 3.99-.825-.836L7.973 7.3l.005.006.006-.006zm0-4l4.75 4.762-.832.817-3.924-3.924-3.99 3.99-.825-.836L7.973 3.3l.005.006.006-.006z",
+        "id": "aaw\u5F62\u72B6\u7ED3\u5408",
+        "transform": "rotate(90 7.949 8.122)"
+      }, null)])]);
+    };
+    const emitFunc = () => {
+      var _a, _b;
+      emit("change", [(_a = years.value.start) == null ? void 0 : _a.toString(), (_b = years.value.end) == null ? void 0 : _b.toString()]);
+      visible.value = false;
+    };
+    const onItemClick = (year) => {
+      if (years.value.start && years.value.end) {
+        years.value.start = void 0;
+        years.value.end = void 0;
+      }
+      if (!years.value.start) {
+        years.value.start = year;
+      } else {
+        if (year >= years.value.start) {
+          years.value.end = year;
+        } else {
+          const tempvalue = years.value.start;
+          years.value.start = year;
+          years.value.end = tempvalue;
+        }
+        emitFunc();
+      }
+    };
+    const computedSelectArea = (year) => {
+      if (years.value.start && years.value.end && year >= years.value.start && year <= years.value.end) {
+        return true;
+      }
+      return false;
+    };
+    const computedHoverSelectArea = (year) => {
+      if (years.value.start && !years.value.end && hoverItem.value) {
+        let tempStart = years.value.start;
+        let tempEnd = hoverItem.value;
+        if (hoverItem.value < years.value.start) {
+          tempEnd = years.value.start;
+          tempStart = hoverItem.value;
+        }
+        if (year >= tempStart && year <= tempEnd) {
+          return true;
+        }
+      }
+      return false;
+    };
+    const computedSelected = (year) => {
+      if (years.value.start === year || years.value.end === year) {
+        return true;
+      }
+      return false;
+    };
+    const isCurYear = (year) => {
+      return year === (/* @__PURE__ */ new Date()).getFullYear();
+    };
+    const onMouseHover = (year) => {
+      hoverItem.value = year;
+    };
+    const onMouseleave = () => {
+      hoverItem.value = null;
+    };
+    const renderSelect = () => {
+      var _a, _b;
+      return vue.createVNode("div", {
+        "class": ns.e("date-panel")
+      }, [vue.createVNode("div", {
+        "class": ns.em("date-panel", "left")
+      }, [vue.createVNode("div", {
+        "class": ns.em("date-panel", "left-header")
+      }, [renderLeftIcon("left"), vue.createVNode("span", null, [(_a = leftYears.value) == null ? void 0 : _a.join("-")]), renderRightIcon("left")]), vue.createVNode("div", {
+        "class": ns.em("date-panel", "left-content")
+      }, [prevYears.value.map((item) => {
+        return vue.createVNode("div", {
+          "class": [ns.em("date-panel", "left-item"), ns.is("selected", computedSelected(item)), ns.is("include", computedSelectArea(item)), ns.is("hover", hoverItem.value === item), ns.is("curyear", isCurYear(item)), ns.is("hoverinclude", computedHoverSelectArea(item))],
+          "onClick": () => onItemClick(item),
+          "onMouseenter": () => onMouseHover(item),
+          "onMouseleave": () => onMouseleave()
+        }, [item]);
+      })])]), vue.createVNode("div", {
+        "class": ns.em("date-panel", "right")
+      }, [vue.createVNode("div", {
+        "class": ns.em("date-panel", "right-header")
+      }, [renderLeftIcon("right"), vue.createVNode("span", null, [(_b = rightYears.value) == null ? void 0 : _b.join("-")]), renderRightIcon("right")]), vue.createVNode("div", {
+        "class": ns.em("date-panel", "right-content")
+      }, [nextYears.value.map((item) => {
+        return vue.createVNode("div", {
+          "class": [ns.em("date-panel", "right-item"), ns.is("selected", computedSelected(item)), ns.is("include", computedSelectArea(item)), ns.is("hover", hoverItem.value === item), ns.is("curyear", isCurYear(item)), ns.is("hoverinclude", computedHoverSelectArea(item))],
+          "onClick": () => onItemClick(item),
+          "onMouseenter": () => onMouseHover(item),
+          "onMouseleave": () => onMouseleave()
+        }, [item]);
+      })])])]);
+    };
+    const visibleChange = (tag) => {
+      visible.value = tag;
+      emit("visibleChange", tag);
+    };
+    const handleClose = () => {
+      visible.value = true;
+    };
+    const handleOpen = () => {
+      visible.value = true;
+    };
+    return {
+      ns,
+      visible,
+      renderSelect,
+      handleClose,
+      handleOpen,
+      visibleChange
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode(vue.resolveComponent("el-popover"), {
+      "visible": this.visible,
+      "onUpdate:visible": ($event) => this.visible = $event,
+      "trigger": "click",
+      "width": 600,
+      "placement": "top",
+      "onAfterEnter": () => this.visibleChange(true),
+      "onAfterLeave": () => this.visibleChange(false)
+    }, {
+      default: () => {
+        return this.renderSelect();
+      },
+      reference: () => {
+        return vue.createVNode("div", null, null);
+      }
+    })]);
+  }
+});
+
+exports.default = yearRangeSelect;

package/lib/editor/date-range-select/date-range-select-picker/components/year-range-select/year-range-select.css

@@ -0,0 +1 @@
+.ibiz-bi-year-range-select__date-panel{display:flex;height:200px}.ibiz-bi-year-range-select__date-panel--left{flex:1}.ibiz-bi-year-range-select__date-panel--left-header{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 var(--ibiz-spacing-base-loose);color:var(--ibiz-color-primary-light-active);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-bi-year-range-select__date-panel--left-header svg{color:var(--ibiz-color-black);cursor:pointer}.ibiz-bi-year-range-select__date-panel--left-header svg:hover{color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--left-content{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose)}.ibiz-bi-year-range-select__date-panel--left-item{position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:var(--ibiz-height-control-default);margin-top:var(--ibiz-spacing-extra-tight);margin-left:var(--ibiz-spacing-loose);cursor:pointer;border-radius:var(--ibiz-border-radius-small)}.ibiz-bi-year-range-select__date-panel--left-item::before{position:absolute;right:0;display:inline-block;width:calc(100% + var(--ibiz-spacing-loose));height:calc(100% + var(--ibiz-spacing-extra-tight));content:""}.ibiz-bi-year-range-select__date-panel--left-item.is-include{background:var(--ibiz-color-secondary-light-default)}.ibiz-bi-year-range-select__date-panel--left-item.is-selected{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--left-item.is-selected.is-curyear{color:var(--ibiz-color-primary-text)}.ibiz-bi-year-range-select__date-panel--left-item.is-hoverinclude{background:var(--ibiz-color-secondary-light-default)}.ibiz-bi-year-range-select__date-panel--left-item.is-hoverinclude.is-include{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--left-item.is-hoverinclude.is-hover{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--left-item.is-hoverinclude.is-selected{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--left-item.is-hover{color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--left-item.is-hover.is-selected{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--left-item.is-curyear{font-weight:700;color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--right{flex:1}.ibiz-bi-year-range-select__date-panel--right-header{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 var(--ibiz-spacing-base-loose);color:var(--ibiz-color-primary-light-active);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-bi-year-range-select__date-panel--right-header svg{color:var(--ibiz-color-black);cursor:pointer}.ibiz-bi-year-range-select__date-panel--right-header svg:hover{color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--right-content{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose)}.ibiz-bi-year-range-select__date-panel--right-item{position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:var(--ibiz-height-control-default);margin-top:var(--ibiz-spacing-extra-tight);margin-left:var(--ibiz-spacing-loose);cursor:pointer;border-radius:var(--ibiz-border-radius-small)}.ibiz-bi-year-range-select__date-panel--right-item::before{position:absolute;right:0;display:inline-block;width:calc(100% + var(--ibiz-spacing-loose));height:calc(100% + var(--ibiz-spacing-extra-tight));content:""}.ibiz-bi-year-range-select__date-panel--right-item.is-include{background:var(--ibiz-color-secondary-light-default)}.ibiz-bi-year-range-select__date-panel--right-item.is-selected{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--right-item.is-selected.is-curyear{color:var(--ibiz-color-primary-text)}.ibiz-bi-year-range-select__date-panel--right-item.is-hoverinclude{background:var(--ibiz-color-secondary-light-default)}.ibiz-bi-year-range-select__date-panel--right-item.is-hoverinclude.is-include{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--right-item.is-hoverinclude.is-hover{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--right-item.is-hoverinclude.is-selected{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--right-item.is-hover{color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--right-item.is-hover.is-selected{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-bi-year-range-select__date-panel--right-item.is-curyear{font-weight:700;color:var(--ibiz-color-primary)}