@alaarab/ogrid-vue-radix 2.0.8 → 2.0.12

package/dist/esm/ColumnChooser/ColumnChooser.css

@@ -0,0 +1,127 @@
+.container[data-v-b4568bb4] {
+  position: relative;
+  display: inline-flex;
+}
+.trigger-button[data-v-b4568bb4] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  border-radius: 6px;
+  background: var(--ogrid-bg, #fff);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+  transition: background 0.15s, border-color 0.15s;
+}
+.trigger-button[data-v-b4568bb4]:hover {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+  border-color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+}
+.trigger-button[aria-expanded=true][data-v-b4568bb4] {
+  border-color: var(--ogrid-accent, #0078d4);
+}
+.button-icon[data-v-b4568bb4] {
+  font-size: 16px;
+  line-height: 1;
+}
+.chevron[data-v-b4568bb4] {
+  font-size: 12px;
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+}
+.dropdown[data-v-b4568bb4] {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  min-width: 220px;
+  background: var(--ogrid-bg, #fff);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  z-index: 50;
+}
+.header[data-v-b4568bb4] {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+  background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+}
+.options-list[data-v-b4568bb4] {
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 0;
+}
+.option-item[data-v-b4568bb4] {
+  padding: 4px 12px;
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+  gap: 8px;
+}
+.option-item[data-v-b4568bb4]:hover {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+}
+.checkbox-input[data-v-b4568bb4] {
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  border-radius: 3px;
+  background: var(--ogrid-bg, #fff);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.checkbox-input[data-v-b4568bb4]:checked {
+  background: var(--ogrid-accent, #0078d4);
+  border-color: var(--ogrid-accent, #0078d4);
+}
+.checkbox-input[data-v-b4568bb4]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.checkbox-label[data-v-b4568bb4] {
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+  user-select: none;
+}
+.actions[data-v-b4568bb4] {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+}
+.clear-button[data-v-b4568bb4] {
+  padding: 6px 12px;
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  border-radius: 4px;
+  background: var(--ogrid-bg, #fff);
+  color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
+  font-size: 12px;
+  cursor: pointer;
+}
+.clear-button[data-v-b4568bb4]:hover {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+}
+.select-all-button[data-v-b4568bb4] {
+  padding: 6px 16px;
+  border: none;
+  border-radius: 4px;
+  background: var(--ogrid-accent, #0078d4);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.select-all-button[data-v-b4568bb4]:hover {
+  opacity: 0.85;
+}

package/dist/esm/ColumnChooser/ColumnChooser.module.css

@@ -8,21 +8,21 @@
   align-items: center;
   gap: 6px;
   padding: 6px 12px;
-  border: 1px solid var(--ogrid-border, #ccc);
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   background: var(--ogrid-bg, #fff);
   cursor: pointer;
   font-size: 13px;
   font-weight: 600;
-  color: var(--ogrid-fg, #333);
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
   transition: background 0.15s, border-color 0.15s;
 }
 .trigger-button:hover {
-  background: var(--ogrid-bg-hover, #f5f5f5);
-  border-color: var(--ogrid-border-hover, #999);
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+  border-color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
 }
 .trigger-button[aria-expanded=true] {
-  border-color: var(--ogrid-primary, #0066cc);
+  border-color: var(--ogrid-accent, #0078d4);
 }
 
 .button-icon {
@@ -32,7 +32,7 @@
 
 .chevron {
   font-size: 12px;
-  color: var(--ogrid-muted, #888);
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
 }
 
 .dropdown {
@@ -42,8 +42,8 @@
   min-width: 220px;
   background: var(--ogrid-bg, #fff);
   border-radius: 6px;
-  box-shadow: var(--ogrid-shadow, 0 4px 16px rgba(0, 0, 0, 0.12));
-  border: 1px solid var(--ogrid-border, #e0e0e0);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
   display: flex;
   flex-direction: column;
   padding: 0;
@@ -52,11 +52,11 @@
 
 .header {
   padding: 8px 12px;
-  border-bottom: 1px solid var(--ogrid-border, #e5e5e5);
+  border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
   font-weight: 600;
   font-size: 13px;
-  color: var(--ogrid-fg, #333);
-  background: var(--ogrid-bg-subtle, #f5f5f5);
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+  background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
 }
 
 .options-list {
@@ -73,21 +73,21 @@
   gap: 8px;
 }
 .option-item:hover {
-  background: var(--ogrid-bg-hover, #f0f0f0);
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
 }
 
 .checkbox-input {
   width: 16px;
   height: 16px;
-  border: 1px solid var(--ogrid-border, #888);
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
   border-radius: 3px;
   background: var(--ogrid-bg, #fff);
   cursor: pointer;
   flex-shrink: 0;
 }
 .checkbox-input:checked {
-  background: var(--ogrid-primary, #0066cc);
-  border-color: var(--ogrid-primary, #0066cc);
+  background: var(--ogrid-accent, #0078d4);
+  border-color: var(--ogrid-accent, #0078d4);
 }
 .checkbox-input:disabled {
   opacity: 0.5;
@@ -97,7 +97,7 @@
 .checkbox-label {
   cursor: pointer;
   font-size: 13px;
-  color: var(--ogrid-fg, #333);
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
   user-select: none;
 }
 
@@ -106,34 +106,34 @@
   justify-content: flex-end;
   gap: 8px;
   padding: 8px 12px;
-  border-top: 1px solid var(--ogrid-border, #e5e5e5);
-  background: var(--ogrid-bg-subtle, #f5f5f5);
+  border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
 }
 
 .clear-button {
   padding: 6px 12px;
-  border: 1px solid var(--ogrid-border, #ccc);
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
   border-radius: 4px;
   background: var(--ogrid-bg, #fff);
-  color: var(--ogrid-muted, #666);
+  color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
   font-size: 12px;
   cursor: pointer;
 }
 .clear-button:hover {
-  background: var(--ogrid-bg-hover, #f5f5f5);
-  color: var(--ogrid-fg, #333);
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
 }
 
 .select-all-button {
   padding: 6px 16px;
   border: none;
   border-radius: 4px;
-  background: var(--ogrid-primary, #0066cc);
-  color: var(--ogrid-primary-fg, #fff);
+  background: var(--ogrid-accent, #0078d4);
+  color: #fff;
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
 }
 .select-all-button:hover {
-  background: var(--ogrid-primary-hover, #0052a3);
+  opacity: 0.85;
 }

package/dist/esm/ColumnChooser/ColumnChooser.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./ColumnChooser.vue2.js";
+import './ColumnChooser.css';
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const ColumnChooser = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b4568bb4"]]);
+export {
+  ColumnChooser as default
+};

package/dist/esm/ColumnChooser/ColumnChooser.vue2.js

@@ -0,0 +1,128 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createVNode, unref, withCtx, createElementVNode, toDisplayString, Transition, Fragment, renderList, createBlock } from "vue";
+import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
+import { useColumnChooserState } from "@alaarab/ogrid-vue";
+const _hoisted_1 = {
+  class: "chevron",
+  "aria-hidden": ""
+};
+const _hoisted_2 = { class: "header" };
+const _hoisted_3 = { class: "options-list" };
+const _hoisted_4 = ["id", "checked", "disabled", "onChange"];
+const _hoisted_5 = ["for"];
+const _hoisted_6 = { class: "actions" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ColumnChooser",
+  props: {
+    columns: {},
+    visibleColumns: {},
+    onVisibilityChange: {},
+    className: { default: "" }
+  },
+  setup(__props) {
+    const props = __props;
+    const {
+      open,
+      setOpen,
+      handleCheckboxChange: setColumnVisible,
+      handleSelectAll,
+      handleClearAll,
+      visibleCount,
+      totalCount
+    } = useColumnChooserState({
+      columns: computed(() => props.columns),
+      visibleColumns: computed(() => props.visibleColumns),
+      onVisibilityChange: props.onVisibilityChange
+    });
+    const handleCheckboxChange = (columnKey) => (e) => {
+      const target = e.target;
+      setColumnVisible(columnKey)(target.checked);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["container", __props.className])
+      }, [
+        createVNode(unref(Menu), null, {
+          default: withCtx(({ open: isOpen }) => [
+            createVNode(unref(MenuButton), {
+              class: "trigger-button",
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              onClick: _cache[0] || (_cache[0] = ($event) => unref(setOpen)(!unref(open)))
+            }, {
+              default: withCtx(() => [
+                _cache[3] || (_cache[3] = createElementVNode("span", {
+                  class: "button-icon",
+                  "aria-hidden": ""
+                }, "⚙", -1)),
+                createElementVNode("span", null, "Column Visibility (" + toDisplayString(unref(visibleCount)) + " of " + toDisplayString(unref(totalCount)) + ")", 1),
+                createElementVNode("span", _hoisted_1, toDisplayString(isOpen ? "▲" : "▼"), 1)
+              ]),
+              _: 2
+            }, 1032, ["aria-expanded"]),
+            createVNode(Transition, {
+              "enter-active-class": "transition duration-100 ease-out",
+              "enter-from-class": "opacity-0 scale-95",
+              "enter-to-class": "opacity-100 scale-100",
+              "leave-active-class": "transition duration-75 ease-in",
+              "leave-from-class": "opacity-100 scale-100",
+              "leave-to-class": "opacity-0 scale-95"
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(MenuItems), { class: "dropdown" }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_2, "Select Columns (" + toDisplayString(unref(visibleCount)) + " of " + toDisplayString(unref(totalCount)) + ")", 1),
+                    createElementVNode("div", _hoisted_3, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column) => {
+                        return openBlock(), createBlock(unref(MenuItem), {
+                          key: column.columnId,
+                          as: "div",
+                          class: "option-item"
+                        }, {
+                          default: withCtx(() => [
+                            createElementVNode("input", {
+                              id: `col-${column.columnId}`,
+                              type: "checkbox",
+                              checked: __props.visibleColumns.has(column.columnId),
+                              disabled: column.required === true,
+                              class: "checkbox-input",
+                              onChange: ($event) => handleCheckboxChange(column.columnId)
+                            }, null, 40, _hoisted_4),
+                            createElementVNode("label", {
+                              for: `col-${column.columnId}`,
+                              class: "checkbox-label"
+                            }, toDisplayString(column.name), 9, _hoisted_5)
+                          ]),
+                          _: 2
+                        }, 1024);
+                      }), 128))
+                    ]),
+                    createElementVNode("div", _hoisted_6, [
+                      createElementVNode("button", {
+                        type: "button",
+                        class: "clear-button",
+                        onClick: _cache[1] || (_cache[1] = //@ts-ignore
+                        (...args) => unref(handleClearAll) && unref(handleClearAll)(...args))
+                      }, " Clear All "),
+                      createElementVNode("button", {
+                        type: "button",
+                        class: "select-all-button",
+                        onClick: _cache[2] || (_cache[2] = //@ts-ignore
+                        (...args) => unref(handleSelectAll) && unref(handleSelectAll)(...args))
+                      }, " Select All ")
+                    ])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.css

@@ -0,0 +1,228 @@
+.column-header[data-v-daf1f1c5] {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+  box-sizing: border-box;
+}
+.header-content[data-v-daf1f1c5] {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+.column-name[data-v-daf1f1c5] {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+}
+.header-actions[data-v-daf1f1c5] {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.sort-icon[data-v-daf1f1c5] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+  cursor: pointer;
+  flex-shrink: 0;
+  font-size: 14px;
+}
+.sort-icon[data-v-daf1f1c5]:hover {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+}
+.sort-icon.sort-active[data-v-daf1f1c5] {
+  background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+}
+.filter-icon[data-v-daf1f1c5] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  font-size: 14px;
+}
+.filter-icon[data-v-daf1f1c5]:hover {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+}
+.filter-icon.filter-active[data-v-daf1f1c5] {
+  background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+  color: var(--ogrid-accent, #0078d4);
+}
+.filter-icon.filter-open[data-v-daf1f1c5] {
+  background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+}
+.filter-badge[data-v-daf1f1c5] {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 6px;
+  height: 6px;
+  background: var(--ogrid-accent, #0078d4);
+  border-radius: 50%;
+  border: 1px solid var(--ogrid-bg, #fff);
+}
+.popover-content[data-v-daf1f1c5] {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 1000;
+  min-width: 280px;
+  max-width: 320px;
+  background: var(--ogrid-bg, #fff);
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+}
+.popover-header[data-v-daf1f1c5] {
+  padding: 10px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+  border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+}
+.popover-search[data-v-daf1f1c5] {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+}
+.search-input[data-v-daf1f1c5] {
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  border-radius: 4px;
+  font-size: 14px;
+  box-sizing: border-box;
+  background: var(--ogrid-bg, #fff);
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+}
+.search-input[data-v-daf1f1c5]:focus {
+  outline: none;
+  border-color: var(--ogrid-accent, #0078d4);
+}
+.result-count[data-v-daf1f1c5] {
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+}
+.select-all-row[data-v-daf1f1c5] {
+  display: flex;
+  gap: 8px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+}
+.select-all-button[data-v-daf1f1c5] {
+  background: none;
+  border: none;
+  color: var(--ogrid-accent, #0078d4);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+.select-all-button[data-v-daf1f1c5]:hover {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+}
+.popover-options[data-v-daf1f1c5] {
+  overflow-y: auto;
+  max-height: 250px;
+  padding: 6px 0;
+}
+.popover-option[data-v-daf1f1c5] {
+  padding: 4px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+}
+.popover-option[data-v-daf1f1c5]:hover {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+}
+.filter-checkbox[data-v-daf1f1c5] {
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  border-radius: 3px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.popover-actions[data-v-daf1f1c5] {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+}
+.clear-button[data-v-daf1f1c5] {
+  padding: 6px 12px;
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  border-radius: 4px;
+  background: var(--ogrid-bg, #fff);
+  color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
+  font-size: 12px;
+  cursor: pointer;
+}
+.clear-button[data-v-daf1f1c5]:hover {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+}
+.clear-button[data-v-daf1f1c5]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.apply-button[data-v-daf1f1c5] {
+  padding: 6px 16px;
+  border: none;
+  border-radius: 4px;
+  background: var(--ogrid-accent, #0078d4);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.apply-button[data-v-daf1f1c5]:hover {
+  opacity: 0.85;
+}
+.loading-container[data-v-daf1f1c5],
+.no-results[data-v-daf1f1c5] {
+  padding: 20px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
+}