@nixweb/nixloc-ui 1.16.0 → 1.19.0

package/src/components/modules/rental/new-items-rent/GroupSubgroupSelector.vue

@@ -1,758 +0,0 @@
-<template>
-  <div class="gss-root">
-    <div v-if="groups.length > 0">
-      <div class="gss-hint title">
-        Você pode <b>adicionar</b>, <b>editar</b> grupos/subgrupos e <b>arrastar para ordenar</b>
-      </div>
-
-      <div class="gss-scroll-shell">
-        <button v-if="scrollState.group.has" type="button" class="gss-scroll-btn left"
-          :class="{ 'is-disabled': !scrollState.group.canLeft }" :disabled="!scrollState.group.canLeft"
-          @click.stop="scrollWrap('group', -1)" aria-label="Rolar para a esquerda">
-          <i class="fa-solid fa-chevron-left"></i>
-        </button>
-
-        <button v-if="scrollState.group.has" type="button" class="gss-scroll-btn right"
-          :class="{ 'is-disabled': !scrollState.group.canRight }" :disabled="!scrollState.group.canRight"
-          @click.stop="scrollWrap('group', 1)" aria-label="Rolar para a direita">
-          <i class="fa-solid fa-chevron-right"></i>
-        </button>
-
-        <div ref="groupWrap" class="gss-rail-wrap gss-scrollwrap" @scroll="onWrapScroll('group')">
-          <div ref="groupRail" class="gss-rail">
-            <div v-if="showNoGroup" class="gss-chip gss-search-trigger" @click="clean()" title="Limpar seleção">
-              <i class="fa-solid fa-broom-wide"></i>
-              <span class="gss-chip-title"></span>
-            </div>
-
-            <div class="gss-chip gss-search-trigger" @click="addGroupLocal" title="Adicionar grupo">
-              <i class="fa-solid fa-plus"></i>
-              <span class="gss-chip-title"></span>
-            </div>
-
-            <div v-for="(g, index) in groupsSorted" :key="g.__key || g.groupId || g.groupOrder" class="gss-chip"
-              draggable="true" :style="{ position: 'relative' }"
-              :class="{ active: isGroupSelected(g), 'gss-dragging': drag.groupKey === g.__key }"
-              @dragstart="onDragStartGroup(g, index, $event)" @dragover.prevent="onDragOverGroup(g, index, $event)"
-              @drop.prevent="onDropGroup(g, index, $event)" @dragend="onDragEnd" @click="onClickGroup(g)"
-              :title="isGroupSelected(g) ? 'Clique novamente para editar' : 'Clique para selecionar'">
-
-              <span :style="deleteBadgeStyle" title="Excluir grupo" @click.stop="removeGroup(g)">
-                <i class="fa-solid fa-xmark" :style="{ fontSize: '10px', lineHeight: '1' }"></i>
-              </span>
-
-              <i class="fa-solid fa-layer-group gss-icon-group"></i>
-
-              <template v-if="editingGroupKey === g.__key">
-                <input ref="groupNameInput" v-model="editingGroupName" type="text" :style="groupNameInputStyle"
-                  @click.stop @keydown.enter.prevent="saveGroupName(g)" @keydown.esc.prevent="cancelGroupNameEdit"
-                  @blur="saveGroupName(g)" />
-              </template>
-              <template v-else>
-                <span class="gss-chip-title">{{ g.groupName }}</span>
-              </template>
-
-              <span class="gss-badge">{{ (g.subGroups || []).length }}</span>
-
-              <span class="gss-mini" title="Arraste para ordenar">
-                <i class="fa-solid fa-grip-lines"></i>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="selectedGroup" class="gss-scroll-shell" :class="{ 'gss-disabled': !selectedGroup }">
-        <button v-if="scrollState.sub.has" type="button" class="gss-scroll-btn left"
-          :class="{ 'is-disabled': !scrollState.sub.canLeft }" :disabled="!scrollState.sub.canLeft"
-          @click.stop="scrollWrap('sub', -1)" aria-label="Rolar para a esquerda">
-          <i class="fa-solid fa-chevron-left"></i>
-        </button>
-
-        <button v-if="scrollState.sub.has" type="button" class="gss-scroll-btn right"
-          :class="{ 'is-disabled': !scrollState.sub.canRight }" :disabled="!scrollState.sub.canRight"
-          @click.stop="scrollWrap('sub', 1)" aria-label="Rolar para a direita">
-          <i class="fa-solid fa-chevron-right"></i>
-        </button>
-
-        <div ref="subWrap" class="gss-rail-wrap gss-scrollwrap" @scroll="onWrapScroll('sub')">
-          <div ref="subRail" class="gss-rail">
-            <div class="gss-chip gss-search-trigger" @click="addSubGroupLocal" :disabled="!selectedGroup"
-              title="Adicionar subgrupo">
-              <i class="fa-solid fa-plus"></i>
-            </div>
-
-            <div v-for="(sg, index) in subGroupsSorted" :key="sg.__key || sg.groupId || sg.groupOrder" class="gss-chip"
-              draggable="true" :style="{ position: 'relative' }"
-              :class="{ active: selectedSubGroup && selectedSubGroup.__key === sg.__key, 'gss-dragging': drag.subKey === sg.__key }"
-              :disabled="!selectedGroup" @dragstart="onDragStartSubGroup(sg, index, $event)"
-              @dragover.prevent="onDragOverSubGroup(sg, index, $event)"
-              @drop.prevent="onDropSubGroup(sg, index, $event)" @dragend="onDragEnd" @click="onClickSubGroup(sg)"
-              :title="selectedSubGroup && selectedSubGroup.__key === sg.__key ? 'Clique novamente para editar' : 'Clique para selecionar'">
-
-              <span :style="deleteSubBadgeStyle" title="Excluir subgrupo" @click.stop="removeSubGroup(sg)">
-                <i class="fa-solid fa-xmark" :style="{ fontSize: '10px', lineHeight: '1' }"></i>
-              </span>
-
-              <i class="fa-regular fa-layer-group gss-icon-group"></i>
-
-              <template v-if="editingSubGroupKey === sg.__key">
-                <input ref="subGroupNameInput" v-model="editingSubGroupName" type="text" :style="subGroupNameInputStyle"
-                  @click.stop @keydown.enter.prevent="saveSubGroupName(sg)"
-                  @keydown.esc.prevent="cancelSubGroupNameEdit" @blur="saveSubGroupName(sg)" />
-              </template>
-              <template v-else>
-                <span class="gss-chip-title">{{ sg.groupName }}</span>
-              </template>
-
-              <span class="gss-mini" title="Arraste para ordenar">
-                <i class="fa-solid fa-grip-lines"></i>
-              </span>
-            </div>
-
-            <div v-if="selectedGroup && subGroupsSorted.length === 0" class="gss-empty">
-              Sem subgrupos.
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div v-else>
-      <div class="gss-hint">
-        Você pode <b>criar</b> e <b>editar</b> grupos/subgrupos. Ordenação: <b>arraste para ordenar</b>.
-      </div>
-
-      <div class="gss-rail-wrap">
-        <div class="gss-rail">
-          <div class="gss-chip gss-search-trigger" @click="addGroupLocal" title="Adicionar grupo">
-            <i class="fa-solid fa-plus"></i>
-            <span class="gss-chip-title title-create">Criar grupo</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapActions } from "vuex";
-
-export default {
-  name: "GroupSubgroupSelector",
-  props: {
-    value: { type: Object, default: null },
-    showNoGroup: { type: Boolean, default: true },
-    selectedPeriod: Object,
-    operational: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      urlGetAll: "/api/v1/rental/group-subgroup-rent/get-all-group-subgroup",
-      urlCreateUpdateGroup: "/api/v1/rental/group-subgroup-rent/create-update-group-selector",
-      urlDeleteGroup: "/api/v1/rental/group-subgroup-rent/delete-group-selector",
-      urlReorderedGroup: "/api/v1/rental/group-subgroup-rent/reordered-group-selector",
-      urlCreateUpdateSubgroup: "/api/v1/rental/group-subgroup-rent/create-update-subgroup-selector",
-      urlDeleteSubgroup: "/api/v1/rental/group-subgroup-rent/delete-subgroup-selector",
-      urlReorderedSubgroup: "/api/v1/rental/group-subgroup-rent/reordered-subgroup-selector",
-      groups: [],
-      selectedGroup: null,
-      selectedSubGroup: null,
-      editingGroupKey: null,
-      editingGroupName: "",
-      editingSubGroupKey: null,
-      editingSubGroupName: "",
-      drag: {
-        groupFromIndex: null,
-        groupKey: null,
-        subFromIndex: null,
-        subKey: null,
-      },
-      deleteBadgeStyle: {
-        position: "absolute",
-        top: "-5px",
-        right: "-5px",
-        width: "18px",
-        height: "18px",
-        borderRadius: "999px",
-        background: "#ef4444",
-        color: "#fff",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        cursor: "pointer"
-      },
-      deleteSubBadgeStyle: {
-        position: "absolute",
-        top: "-5px",
-        right: "-5px",
-        width: "18px",
-        height: "18px",
-        borderRadius: "999px",
-        background: "#ef4444",
-        color: "#fff",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        cursor: "pointer"
-      },
-      groupNameInputStyle: {
-        border: "none",
-        outline: "none",
-        background: "transparent",
-        fontWeight: "600",
-        fontSize: "13px",
-        color: "#0f172a",
-        width: "120px",
-        minWidth: "80px"
-      },
-      subGroupNameInputStyle: {
-        border: "none",
-        outline: "none",
-        background: "transparent",
-        fontWeight: "600",
-        fontSize: "13px",
-        color: "#0f172a",
-        width: "120px",
-        minWidth: "80px"
-      },
-      scrollState: {
-        group: { has: false, canLeft: false, canRight: false },
-        sub: { has: false, canLeft: false, canRight: false }
-      }
-    };
-  },
-  mounted() {
-    this.refreshScrollStates();
-    window.addEventListener("resize", this.refreshScrollStates, { passive: true });
-    this.loadInitialSelection();
-  },
-  created() {
-    this.getAll();
-  },
-  beforeDestroy() {
-    window.removeEventListener("resize", this.refreshScrollStates);
-  },
-  updated() {
-    this.refreshScrollStates();
-  },
-  computed: {
-    groupsSorted() {
-      return [...this.groups].sort((a, b) => (a.groupOrder || 0) - (b.groupOrder || 0));
-    },
-    subGroupsSorted() {
-      if (!this.selectedGroup) return [];
-      return [...(this.selectedGroup.subGroups || [])].sort((a, b) => (a.groupOrder || 0) - (b.groupOrder || 0));
-    }
-  },
-  watch: {
-    value: {
-      handler() {
-        this.loadInitialSelection();
-      },
-      deep: true
-    }
-  },
-  methods: {
-    ...mapActions("generic", ["getApi", "postApi", "putApi", "deleteApi"]),
-
-    makeKey(prefix) {
-      return `${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`;
-    },
-
-    ensureKeys(list, prefix) {
-      if (!Array.isArray(list)) return [];
-      return list.map((x) => {
-        if (!x.__key) {
-          const base = x.groupId ? String(x.groupId) : "";
-          x.__key = base ? `${prefix}-${base}` : this.makeKey(prefix);
-        }
-        return x;
-      });
-    },
-
-    normalizeGroupsKeys() {
-      this.groups = this.ensureKeys(this.groups, "g").map((g) => {
-        if (Array.isArray(g.subGroups)) {
-          g.subGroups = this.ensureKeys(g.subGroups, "sg");
-        }
-        return g;
-      });
-    },
-
-    getAll() {
-      const params = {
-        url: this.urlGetAll,
-        obj: { any: this.selectedPeriod.period.rentId, id: this.selectedPeriod.period.id }
-      };
-      this.getApi(params).then(response => {
-        this.groups = response.content || [];
-        this.normalizeGroupsKeys();
-        this.loadInitialSelection();
-      });
-    },
-    loadInitialSelection() {
-      if (!this.value || !this.value.groupId || this.groups.length === 0) return;
-
-      const targetSubgroupId = this.value.groupId;
-
-      for (let group of this.groups) {
-        if (!group.subGroups || !Array.isArray(group.subGroups)) continue;
-
-        const foundSubGroup = group.subGroups.find(sg => sg.groupId === targetSubgroupId);
-        if (foundSubGroup) {
-          if (!group.__key) {
-            group.__key = group.groupId ? `g-${String(group.groupId)}` : this.makeKey("g");
-          }
-          if (!foundSubGroup.__key) {
-            foundSubGroup.__key = foundSubGroup.groupId ? `sg-${String(foundSubGroup.groupId)}` : this.makeKey("sg");
-          }
-
-          this.selectedGroup = group;
-          this.selectedSubGroup = foundSubGroup;
-          return;
-        }
-      }
-    },
-    notifyChanged() {
-      this.$emit("input", this.selectedSubGroup);
-    },
-    isGroupSelected(g) {
-      if (!this.selectedGroup) return false;
-      if (this.selectedGroup.__key && g.__key) return this.selectedGroup.__key === g.__key;
-      if (this.selectedGroup.groupId && g.groupId) return this.selectedGroup.groupId === g.groupId;
-      return this.selectedGroup === g;
-    },
-    refreshScrollStates() {
-      this.$nextTick(() => {
-        this.updateScrollState("group");
-        this.updateScrollState("sub");
-      });
-    },
-    getWrapEl(which) {
-      if (which === "group") return this.$refs.groupWrap;
-      if (which === "sub") return this.$refs.subWrap;
-      return null;
-    },
-    updateScrollState(which) {
-      const el = this.getWrapEl(which);
-      if (!el || !el.clientWidth) {
-        if (this.scrollState[which]) {
-          this.scrollState[which].has = false;
-          this.scrollState[which].canLeft = false;
-          this.scrollState[which].canRight = false;
-        }
-        return;
-      }
-
-      const max = Math.max(0, el.scrollWidth - el.clientWidth);
-      const left = el.scrollLeft || 0;
-      const has = max > 2;
-
-      this.scrollState[which].has = has;
-      this.scrollState[which].canLeft = has ? (left > 2) : false;
-      this.scrollState[which].canRight = has ? ((max - left) > 2) : false;
-    },
-    onWrapScroll(which) {
-      this.updateScrollState(which);
-    },
-    scrollWrap(which, dir) {
-      const el = this.getWrapEl(which);
-      if (!el) return;
-      const amount = Math.max(180, Math.floor(el.clientWidth * 0.7));
-      try {
-        el.scrollBy({ left: dir * amount, behavior: "smooth" });
-      } catch {
-        el.scrollLeft = el.scrollLeft + (dir * amount);
-      }
-      this.$nextTick(() => this.updateScrollState(which));
-    },
-    addGroupLocal() {
-      var nextOrder = (this.groups.reduce((m, g) => Math.max(m, g.groupOrder || 0), 0) || 0) + 1;
-      var newGroup = {
-        __key: this.makeKey("g"),
-        groupId: "",
-        groupName: `Novo grupo ${nextOrder}`,
-        groupOrder: nextOrder,
-        rentId: this.selectedPeriod.period.rentId,
-        periodRentId: this.selectedPeriod.period.id,
-        subGroups: [],
-      };
-      let params = { url: this.urlCreateUpdateGroup, obj: newGroup, notNotifyToast: true };
-      this.postApi(params).then((response) => {
-        newGroup.groupId = response.content;
-      });
-      this.groups.push(newGroup);
-      this.selectedGroup = newGroup;
-      this.selectedSubGroup = null;
-      this.startGroupNameEdit(newGroup);
-      this.notifyChanged();
-    },
-    addSubGroupLocal() {
-      if (!this.selectedGroup) return;
-      const g = this.selectedGroup;
-      if (!g.subGroups) this.$set(g, "subGroups", []);
-
-      const nextOrder = ((g.subGroups || []).reduce((m, s) => Math.max(m, s.groupOrder || 0), 0) || 0) + 1;
-
-      const newSub = {
-        __key: this.makeKey("sg"),
-        groupId: "",
-        groupName: `Novo subgrupo ${nextOrder}`,
-        groupOrder: nextOrder,
-        groupMasterId: g.groupId,
-      };
-
-
-      let params = { url: this.urlCreateUpdateSubgroup, obj: newSub, notNotifyToast: true };
-      this.postApi(params).then((response) => {
-        newSub.groupId = response.content;
-      });
-      g.subGroups.push(newSub);
-      this.selectedSubGroup = newSub;
-      this.startSubGroupNameEdit(newSub);
-      this.notifyChanged();
-    },
-    removeGroup(g) {
-      const url = `${this.urlDeleteGroup}?id=${g.groupId}`;
-      const params = { url, obj: {}, notNotifyToast: true };
-      this.deleteApi(params).then((response) => {
-        if (response.success) {
-          this.groups = this.groups.filter(x => x.__key !== g.__key);
-          if (this.selectedGroup && this.isGroupSelected(g)) {
-            this.selectedGroup = null;
-            this.selectedSubGroup = null;
-          }
-          this.notifyChanged();
-        }
-      });
-    },
-    removeSubGroup(sg) {
-      const url = `${this.urlDeleteSubgroup}?id=${sg.groupId}`;
-      const params = { url, obj: {}, notNotifyToast: true };
-      this.deleteApi(params).then((response) => {
-        if (response.success) {
-          const g = this.selectedGroup;
-          g.subGroups = (g.subGroups || []).filter(x => x.__key !== sg.__key);
-          if (this.selectedSubGroup && this.selectedSubGroup.__key === sg.__key) {
-            this.selectedSubGroup = null;
-          }
-          this.notifyChanged();
-        }
-      });
-    },
-    clean() {
-      this.selectedGroup = null;
-      this.selectedSubGroup = null;
-      this.notifyChanged();
-    },
-    onClickGroup(g) {
-      if (!g.__key) g.__key = g.groupId ? `g-${String(g.groupId)}` : this.makeKey("g");
-
-      const isSame = this.isGroupSelected(g);
-      this.selectedGroup = g;
-      this.selectedSubGroup = null;
-      if (isSame) this.startGroupNameEdit(g);
-      this.notifyChanged();
-    },
-    onClickSubGroup(sg) {
-      if (!sg.__key) sg.__key = sg.groupId ? `sg-${String(sg.groupId)}` : this.makeKey("sg");
-      const isSame = this.selectedSubGroup && this.selectedSubGroup.__key === sg.__key;
-      this.selectedSubGroup = sg;
-      if (isSame) this.startSubGroupNameEdit(sg);
-      this.notifyChanged();
-    },
-    startGroupNameEdit(g) {
-      if (!g.__key) g.__key = g.groupId ? `g-${String(g.groupId)}` : this.makeKey("g");
-
-      this.editingGroupKey = g.__key;
-      this.editingGroupName = g.groupName || "";
-      this.$nextTick(() => {
-        const refs = this.$refs.groupNameInput;
-        const el = Array.isArray(refs) ? refs.find(x => x && x.focus) : refs;
-        if (el && el.focus) {
-          el.focus();
-          el.select && el.select();
-        }
-      });
-    },
-    saveGroupName(g) {
-      if (!g.__key) g.__key = g.groupId ? `g-${String(g.groupId)}` : this.makeKey("g");
-      if (this.editingGroupKey !== g.__key) return;
-
-      const name = (this.editingGroupName || "").trim();
-      if (name) {
-        g.groupName = name;
-        this.notifyChanged();
-      }
-
-      let params = { url: this.urlCreateUpdateGroup, obj: g, notNotifyToast: true };
-      this.postApi(params).then(() => { this.notifyChanged(); });
-      this.editingGroupKey = null;
-      this.editingGroupName = "";
-    },
-    cancelGroupNameEdit() {
-      this.editingGroupKey = null;
-      this.editingGroupName = "";
-    },
-    startSubGroupNameEdit(sg) {
-      if (!sg.__key) sg.__key = sg.groupId ? `sg-${String(sg.groupId)}` : this.makeKey("sg");
-
-      this.editingSubGroupKey = sg.__key;
-      this.editingSubGroupName = sg.groupName || "";
-      this.$nextTick(() => {
-        const refs = this.$refs.subGroupNameInput;
-        const el = Array.isArray(refs) ? refs.find(x => x && x.focus) : refs;
-        if (el && el.focus) {
-          el.focus();
-          el.select && el.select();
-        }
-      });
-    },
-    saveSubGroupName(sg) {
-      if (!sg.__key) sg.__key = sg.groupId ? `sg-${String(sg.groupId)}` : this.makeKey("sg");
-      if (this.editingSubGroupKey !== sg.__key) return;
-
-      const name = (this.editingSubGroupName || "").trim();
-      if (name) {
-        sg.groupName = name;
-        this.notifyChanged();
-      }
-
-      let params = { url: this.urlCreateUpdateSubgroup, obj: sg, notNotifyToast: true };
-      this.postApi(params).then((response) => {
-        sg.groupId = response.content;
-        this.notifyChanged();
-      });
-
-      this.editingSubGroupKey = null;
-      this.editingSubGroupName = "";
-    },
-    cancelSubGroupNameEdit() {
-      this.editingSubGroupKey = null;
-      this.editingSubGroupName = "";
-    },
-    onDragStartGroup(g, index, evt) {
-      this.drag.groupFromIndex = index;
-      this.drag.groupKey = g.__key;
-      try { evt.dataTransfer.effectAllowed = "move"; } catch { }
-    },
-    onDragOverGroup(g, index, evt) {
-      try { evt.dataTransfer.dropEffect = "move"; } catch { }
-    },
-    onDropGroup(g, dropIndex) {
-      if (this.drag.groupFromIndex === null) return;
-      if (dropIndex === this.drag.groupFromIndex) return;
-
-      const arr = [...this.groupsSorted];
-      const [moved] = arr.splice(this.drag.groupFromIndex, 1);
-      arr.splice(dropIndex, 0, moved);
-
-      this.groups = arr.map((x, idx) => ({ ...x, groupOrder: idx + 1 }));
-      this.normalizeGroupsKeys();
-      this.notifyChanged();
-      this.onDragEnd();
-
-      let params = { url: this.urlReorderedGroup, obj: this.groups, notNotifyToast: true };
-      this.postApi(params).then(() => { });
-    },
-    onDragStartSubGroup(sg, index, evt) {
-      this.drag.subFromIndex = index;
-      this.drag.subKey = sg.__key;
-      try { evt.dataTransfer.effectAllowed = "move"; } catch { }
-    },
-    onDragOverSubGroup(sg, index, evt) {
-      try { evt.dataTransfer.dropEffect = "move"; } catch { }
-    },
-    onDropSubGroup(sg, dropIndex) {
-      if (!this.selectedGroup) return;
-      if (this.drag.subFromIndex === null) return;
-      if (dropIndex === this.drag.subFromIndex) return;
-
-      const g = this.selectedGroup;
-      const arr = [...this.subGroupsSorted];
-      const [moved] = arr.splice(this.drag.subFromIndex, 1);
-      arr.splice(dropIndex, 0, moved);
-
-      g.subGroups = arr.map((x, idx) => ({ ...x, groupOrder: idx + 1 }));
-      g.subGroups = this.ensureKeys(g.subGroups, "sg");
-      this.notifyChanged();
-      this.onDragEnd();
-
-      let params = { url: this.urlReorderedSubgroup, obj: g.subGroups, notNotifyToast: true };
-      this.postApi(params).then(() => { });
-
-    },
-    onDragEnd() {
-      this.drag.groupFromIndex = null;
-      this.drag.groupKey = null;
-      this.drag.subFromIndex = null;
-      this.drag.subKey = null;
-    },
-  },
-};
-</script>
-
-<style scoped>
-.gss-root {
-  color: #1e293b;
-  font-size: 13px;
-  padding: 4px 0;
-}
-
-.gss-hint {
-  margin-top: -10px;
-  margin-bottom: 10px;
-  margin-left: 45px;
-  color: rgb(107, 107, 107);
-}
-
-.gss-rail-wrap {
-  margin-bottom: 10px;
-  max-width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
-  padding: 7px 6px;
-  box-sizing: border-box;
-  margin-left: 35px;
-  margin-right: 55px;
-}
-
-.gss-scroll-shell {
-  position: relative;
-}
-
-.gss-scrollwrap {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.gss-scrollwrap::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  display: none;
-}
-
-.gss-scroll-btn {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 26px;
-  height: 26px;
-  border-radius: 999px;
-  border: 0px solid #e2e8f0;
-  background: #D98621;
-  color: white;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  z-index: 3;
-  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
-}
-
-.gss-scroll-btn.is-disabled {
-  opacity: 0.35;
-  cursor: default;
-  pointer-events: none;
-}
-
-.gss-scroll-btn.left {
-  left: 6px;
-}
-
-.gss-scroll-btn.right {
-  right: 26px;
-}
-
-.gss-rail-wrap:last-of-type {
-  margin-top: -5px
-}
-
-.gss-disabled {
-  opacity: .5;
-  pointer-events: none
-}
-
-.gss-rail {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: 8px;
-  min-width: max-content;
-}
-
-.gss-check {
-  margin-left: 5px;
-}
-
-.gss-chip {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 35px;
-  padding: 0 10px;
-  border-radius: 999px;
-  background: #f8fafc;
-  color: #1e293b;
-  font-weight: 600;
-  font-size: 13px;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: all .2s ease;
-  box-shadow: 0 0 0 1px #e2e8f0 inset;
-  user-select: none;
-  flex: 0 0 auto;
-}
-
-.gss-chip:hover {
-  background: #e0f2fe;
-  box-shadow: 0 0 0 1px #38bdf8 inset
-}
-
-.gss-chip.active {
-  background: #E3E5ED;
-  box-shadow: 0 0 0 1px #2563eb inset
-}
-
-.gss-chip.gss-dragging {
-  opacity: .65;
-  transform: scale(.98);
-}
-
-.gss-icon-group {
-  margin-right: 6px;
-  color: #2563EB
-}
-
-.gss-badge {
-  background: #3b82f6;
-  color: #fff;
-  border-radius: 999px;
-  padding: 2px 6px;
-  font-size: 10px;
-  line-height: 1;
-  margin-left: 6px
-}
-
-.gss-mini {
-  margin-left: 8px;
-  font-size: 12px;
-  opacity: .55;
-  display: inline-flex;
-  align-items: center;
-}
-
-.gss-search-trigger {
-  border: 1px solid #e1e1e2;
-  box-shadow: 0 0 0 1px #F8FAFC inset
-}
-
-.gss-empty {
-  margin-top: 7px;
-}
-
-.title-create {
-  margin-left: 8px;
-}
-</style>