@nixweb/nixloc-ui 1.14.0 → 1.16.0

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

@@ -0,0 +1,758 @@
+<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>