@_linked/shape-ui 2.0.0

package/lib/esm/components/SelectEditor.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Root, } from '@_linked/primitives/components/Select';
+// interface RootSelectProps extend  {
+//   of?: Shape;
+//   property?: PropertyShape;
+// }
+// const RootSelect = () => {
+//   return <Root></Root>;
+// };
+export const SelectEditor = ({ onValueChange, of, property, preConvertValueFn, postConvertValueFn, ...restProps }) => {
+    const onChangeHandler = (value) => {
+        console.log(value, 'value select');
+        if (!of)
+            return;
+        if (postConvertValueFn) {
+            value = postConvertValueFn(value);
+        }
+        of[property.label] = value;
+        console.log(of[property.label], 'of[property.label] switch');
+        if (onValueChange) {
+            onValueChange(value);
+        }
+    };
+    return (React.createElement(Root, { value: of[property.label], onValueChange: onChangeHandler, defaultValue: of
+            ? preConvertValueFn
+                ? preConvertValueFn(of[property.label])
+                : of[property.label]
+            : '', ...restProps }));
+};
+//# sourceMappingURL=SelectEditor.js.map

package/lib/esm/components/SelectEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectEditor.js","sourceRoot":"","sources":["../../../src/components/SelectEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EACL,IAAI,GAUL,MAAM,uCAAuC,CAAC;AAqB/C,sCAAsC;AACtC,gBAAgB;AAChB,8BAA8B;AAC9B,IAAI;AACJ,6BAA6B;AAC7B,0BAA0B;AAC1B,KAAK;AAEL,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,aAAa,EACb,EAAE,EACF,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,GAAG,SAAS,EACM,EAAE,EAAE;IACtB,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,EAAE;QAChC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;QACnC,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,IAAI,kBAAkB,EAAE,CAAC;YACvB,KAAK,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;QACD,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;QAC3B,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,2BAA2B,CAAC,CAAC;QAE7D,IAAI,aAAa,EAAE,CAAC;YAClB,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,IAAI,IACH,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EACzB,aAAa,EAAE,eAAe,EAC9B,YAAY,EACV,EAAE;YACA,CAAC,CAAC,iBAAiB;gBACjB,CAAC,CAAC,iBAAiB,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACvC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC;YACtB,CAAC,CAAC,EAAE,KAEJ,SAAS,GAQR,CACR,CAAC;AACJ,CAAC,CAAC"}

package/lib/esm/components/ShapeTable.module.css

@@ -0,0 +1,394 @@
+.action {
+  display: flex;
+  justify-content: flex-start;
+  gap: 10px;
+  margin: 20px 0;
+}
+
+.filterButton {
+  justify-content: flex-start !important;
+  width: fit-content !important;
+}
+
+.tableWrapper {
+  display: flex;
+  flex-direction: column;
+
+  .deleteDataButton {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 3px;
+    width: auto;
+    border-radius: 0;
+    padding: none;
+    --ld-button-filled-primary-background-color: #eb3223;
+    --ld-button-filled-primary-hover-background-color: #eb3223;
+    --ld-button-filled-primary-border-color: none;
+    --ld-button-filled-primary-font-color: rgb(255, 255, 255);
+  }
+
+  .tableBar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    border-top: 1px solid #d6d6d6;
+    border-bottom: 1px solid #d6d6d6;
+    padding: 15px 0;
+    /*   height: 200px;*/
+
+    .filterBar {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      width: 85%;
+      height: 100%;
+      /* flex: 1;*/
+    }
+  }
+}
+
+.actionTableButton {
+  --ld-button-filled-primary-background-color: transparent;
+  --ld-button-filled-primary-hover-background-color: transparent;
+  --ld-button-filled-primary-border-color: none;
+  --ld-button-filled-primary-font-color: black;
+}
+
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 15px;
+  margin: 10px 0;
+
+  .pageInfo {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 5px;
+
+    .goToPageForm {
+      box-shadow: none;
+      width: 80px;
+      border: 1px solid var(--ld-input-placeholder);
+      --ld-input-border-radius: 5px;
+    }
+  }
+
+  .selectPageRows {
+    position: relative;
+    width: 120px; /* Adjust width as needed */
+    padding: 11px 10px;
+    border-radius: 5px;
+    appearance: none; /* Remove default arrow appearance */
+    -webkit-appearance: none; /* Remove default arrow appearance for Safari */
+    -moz-appearance: none; /* Remove default arrow appearance for Firefox */
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>')
+      no-repeat;
+    background-position: right 3px center; /* Adjust right position to move arrow left */
+    background-size: 30px 30px;
+    border: 1px solid var(--ld-input-placeholder);
+    background-color: white; /* Adjust as needed */
+    cursor: pointer;
+  }
+}
+
+.paginationButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  border-radius: 5px;
+  --ld-button-border-radius: 5px;
+}
+
+.content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tableContainer {
+  width: 100%; /* Adjust as needed */
+  max-height: 450px; /* Set the height you need */
+  overflow: auto;
+}
+
+.table {
+  width: 100%;
+  table-layout: auto;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+.th,
+.td {
+  border-bottom: 1px solid #d6d6d6;
+  /* vertical-align: middle;*/
+  padding: 8px; /* Adjust padding as needed */
+  white-space: nowrap; /* Prevents text wrapping, ensuring the content fits in the cell */
+  /* display: flex;*/
+  /* flex-direction: row;*/
+  /* align-items: center;*/
+  /* justify-content: center;*/
+}
+
+thead th {
+  position: sticky;
+  top: 0;
+}
+
+.tbodyContainer {
+  display: block;
+  max-height: 350px; /* Adjust as needed */
+  overflow-y: auto;
+}
+
+.tbodyContainer tbody {
+  display: block;
+}
+
+.tbodyContainer tr {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+}
+
+.tbodyContainer td {
+  display: table-cell;
+}
+
+.th:first-child {
+  z-index: 1;
+}
+
+.th:last-child {
+  z-index: 1;
+}
+
+.th:first-child,
+.td:first-child {
+  text-align: center;
+  vertical-align: middle;
+}
+
+.th:last-child,
+.td:last-child {
+  width: 120px;
+}
+
+/* .th:first-child,*/
+/* .td:first-child {*/
+/*     width: 50px;*/
+/* }*/
+
+.th {
+  text-align: left;
+  background-color: #ffffff;
+  cursor: pointer;
+
+  .canSort {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+  }
+}
+.tr {
+  background-color: #f7f7f7;
+  height: 40px;
+}
+
+.sticky {
+  position: -webkit-sticky; /* For Safari */
+  position: sticky;
+  background: white; /* Or the background color of your table */
+  /* z-index: 1; /* Ensure it stays above other content */
+}
+
+.stickyLeft {
+  left: 0;
+}
+
+.stickyRight {
+  right: 0;
+}
+
+.modalContainer {
+  right: 0;
+  min-height: 100vh;
+  background-color: #ffffff;
+  z-index: 1;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  --dialog-animation-name: none;
+  --dialog-position-left: auto;
+  --dialog-transform: translate(0, -50%);
+  --dialog-width: 300px;
+  --ld-border-radius: 5px;
+}
+
+.modalHeader {
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+
+  h1 {
+    font-size: 25px;
+    font-weight: 500;
+  }
+}
+
+.modalHeader h2 {
+  margin: 0;
+}
+
+.modalBody {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 20px;
+
+  img {
+    width: 80%;
+  }
+
+  .form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 20px;
+
+    .formSection {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      p {
+        text-align: center;
+      }
+
+      .formFilter {
+        border: 1px solid var(--ld-input-placeholder);
+        --ld-input-border-radius: 5px;
+      }
+    }
+
+    .filter {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      button {
+        padding: 8px 20px;
+        background-color: #007bff;
+        color: #fff;
+        border: none;
+        border-radius: 3px;
+        cursor: pointer;
+        width: 100%;
+      }
+    }
+    /* justify-content: center;*/
+
+    /* .input {*/
+    /*   width: 100%;*/
+    /* }*/
+  }
+}
+
+.modalFooter {
+  display: flex;
+  text-align: right;
+}
+
+.buttonFilter {
+  width: 100%;
+}
+
+.modalFooter button {
+  padding: 8px 20px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  width: 100%;
+}
+
+.modalFooter button:hover {
+  background-color: #0056b3;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  background-color: transparent;
+  color: #007bff; /* Text color*/
+  border: 1px solid #007bff;
+  padding: 4px 8px;
+  border-radius: 5px;
+  font-size: 14px;
+  padding: 10px 12px;
+  /* margin-right: 8px;*/
+
+  .badgeText {
+    margin-right: 4px;
+  }
+
+  .badgeCloseButton {
+    border: none;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    margin-left: 4px;
+
+    &:hover {
+      color: #ff0000; /* Change color on hover*/
+    }
+  }
+}
+
+/* Hide the default checkbox */
+input[type='checkbox'] {
+  position: relative;
+  appearance: none;
+  width: 22px;
+  height: 22px;
+  background-color: #eee;
+  border: 2px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+/* Custom checkmark */
+input[type='checkbox']:after {
+  content: '';
+  position: absolute;
+  display: none;
+  left: 7px;
+  top: 2px;
+  width: 6px;
+  height: 12px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+/* Show the checkmark when checked */
+input[type='checkbox']:checked {
+  background-color: #4caf50;
+  border-color: #4caf50;
+}
+
+input[type='checkbox']:checked:after {
+  display: block;
+}
+
+/* Hover effect */
+input[type='checkbox']:hover {
+  background-color: #ccc;
+}

package/lib/esm/components/SwitchEditor.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Shape } from '@_linked/core/shapes/Shape';
+import { PropertyDetails } from '@_linked/server/utils/Shapes';
+export interface SwitchEditorProps {
+    onCheckedChange?: (e: any) => void;
+    of?: Shape;
+    property?: PropertyDetails;
+    /**
+     *  Converts the value returned by the shape, to the input string for the switch
+     * @param shapePropertyValue
+     * @returns
+     */
+    preConvertValueFn?: (shapePropertyValue: any) => string;
+    /**
+     * Converts the value of the switch to a value that can be provided to the set method of the shape
+     * @param inputValue
+     * @returns
+     */
+    postConvertValueFn?: (inputValue: string) => any;
+}
+export declare const SwitchEditor: ({ onCheckedChange, of, property, preConvertValueFn, postConvertValueFn, ...restProps }: SwitchEditorProps) => React.JSX.Element;

package/lib/esm/components/SwitchEditor.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Switch } from '@_linked/primitives/components/Switch';
+export const SwitchEditor = ({ onCheckedChange, of, property, preConvertValueFn, postConvertValueFn, ...restProps }) => {
+    const onChangeHandler = (value) => {
+        console.log(value, 'value switch');
+        if (!of)
+            return;
+        if (postConvertValueFn) {
+            value = postConvertValueFn(value);
+        }
+        of[property.label] = value;
+        console.log(of[property.label], 'of[property.label] switch');
+        if (onCheckedChange) {
+            onCheckedChange(value);
+        }
+    };
+    return (React.createElement(Switch, { value: of[property.label], onCheckedChange: onChangeHandler, defaultChecked: of
+            ? preConvertValueFn
+                ? preConvertValueFn(of[property.label])
+                : of[property.label]
+            : '', ...restProps }));
+};
+//# sourceMappingURL=SwitchEditor.js.map

package/lib/esm/components/SwitchEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchEditor.js","sourceRoot":"","sources":["../../../src/components/SwitchEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAsB/D,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,eAAe,EACf,EAAE,EACF,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,GAAG,SAAS,EACM,EAAE,EAAE;IACtB,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,EAAE;QAChC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;QACnC,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,IAAI,kBAAkB,EAAE,CAAC;YACvB,KAAK,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;QACD,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;QAC3B,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,2BAA2B,CAAC,CAAC;QAE7D,IAAI,eAAe,EAAE,CAAC;YACpB,eAAe,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,MAAM,IACL,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EACzB,eAAe,EAAE,eAAe,EAChC,cAAc,EACZ,EAAE;YACA,CAAC,CAAC,iBAAiB;gBACjB,CAAC,CAAC,iBAAiB,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACvC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC;YACtB,CAAC,CAAC,EAAE,KAEJ,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC"}

package/lib/esm/components/TextareaEditor.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Shape } from '@_linked/core/shapes/Shape';
+export interface TextareaEditorProps {
+    onChange?: (e: any) => void;
+    value?: string[];
+    of?: Shape;
+    property?: string;
+    children?: any;
+    className?: any;
+    /**
+     *  Converts the value returned by the shape, to the text area string for the text area
+     * @param shapePropertyValue
+     * @returns
+     */
+    preConvertValueFn?: (shapePropertyValue: any) => string;
+    /**
+     * Converts the value of the text area to a value that can be provided to the set method of the shape
+     * @param textAreaValue
+     * @returns
+     */
+    postConvertValueFn?: (textAreaValue: string) => any;
+}
+export declare const TextareaEditor: ({ onChange, value, of, property, preConvertValueFn, postConvertValueFn, children, className, ...props }: TextareaEditorProps) => React.JSX.Element;

package/lib/esm/components/TextareaEditor.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Textarea } from '@_linked/primitives/components/Textarea';
+export const TextareaEditor = ({ onChange, value, of, property, preConvertValueFn, postConvertValueFn, children, className, ...props }) => {
+    const onChangeHandler = (e) => {
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    return (React.createElement(Textarea, { onChange: onChangeHandler, defaultValue: of
+            ? preConvertValueFn
+                ? preConvertValueFn(of[property])
+                : of[property]
+            : '', value: value, ...props }));
+};
+//# sourceMappingURL=TextareaEditor.js.map

package/lib/esm/components/TextareaEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaEditor.js","sourceRoot":"","sources":["../../../src/components/TextareaEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AAsBnE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,EAAE,EACF,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACY,EAAE,EAAE;IACxB,MAAM,eAAe,GAAG,CAAC,CAAC,EAAE,EAAE;QAC5B,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,CAAC,CAAC,CAAC;QACd,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,IACP,QAAQ,EAAE,eAAe,EACzB,YAAY,EACV,EAAE;YACA,CAAC,CAAC,iBAAiB;gBACjB,CAAC,CAAC,iBAAiB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;gBACjC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC;YAChB,CAAC,CAAC,EAAE,EAER,KAAK,EAAE,KAAK,KACR,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC"}

package/lib/esm/components/TextfieldEditor.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Shape } from '@_linked/core/shapes/Shape';
+import { InputProps } from '@_linked/primitives/components/Input';
+export interface TextfieldProps extends InputProps {
+    onChange?: (e: any) => void;
+    value?: number | string;
+    helperText?: string;
+    of: Shape;
+    valueProperty?: string;
+    property?: any;
+    /**
+     *  Converts the value returned by the shape, to the input string for the input field
+     * @param shapePropertyValue
+     * @returns
+     */
+    preConvertValueFn?: (shapePropertyValue: any) => string;
+    /**
+     * Converts the value of the input field to a value that can be provided to the set method of the shape
+     * @param inputValue
+     * @returns
+     */
+    postConvertValueFn?: (inputValue: string) => any;
+}
+export declare const TextfieldEditor: ({ onChange, value, of, property, valueProperty, preConvertValueFn, postConvertValueFn, ...restProps }: TextfieldProps) => React.JSX.Element;

package/lib/esm/components/TextfieldEditor.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Input } from '@_linked/primitives/components/Input';
+export const TextfieldEditor = ({ onChange, value, of, property, valueProperty, preConvertValueFn, postConvertValueFn, ...restProps }) => {
+    const onBlur = (e) => {
+        let value = e.currentTarget.value;
+        if (!of)
+            return;
+        if (postConvertValueFn) {
+            value = postConvertValueFn(value);
+        }
+        of[property.label] = value;
+        console.log('of', of);
+        console.log('value', value);
+    };
+    const onChangeHandler = (e) => {
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    return (React.createElement(Input, { value: value, onChange: onChangeHandler, defaultValue: of
+            ? preConvertValueFn
+                ? preConvertValueFn(of[property.label])
+                : of[property.label]
+            : '', onBlur: onBlur, ...restProps }));
+};
+//# sourceMappingURL=TextfieldEditor.js.map

package/lib/esm/components/TextfieldEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextfieldEditor.js","sourceRoot":"","sources":["../../../src/components/TextfieldEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,KAAK,EAAc,MAAM,sCAAsC,CAAC;AAuBzE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,EAAE,EACF,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,GAAG,SAAS,EACG,EAAE,EAAE;IACnB,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE;QACnB,IAAI,KAAK,GAAG,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;QAClC,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,IAAI,kBAAkB,EAAE,CAAC;YACvB,KAAK,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;QACD,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;QAC3B,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACtB,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,CAAC,EAAE,EAAE;QAC5B,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,CAAC,CAAC,CAAC;QACd,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,eAAe,EACzB,YAAY,EACV,EAAE;YACA,CAAC,CAAC,iBAAiB;gBACjB,CAAC,CAAC,iBAAiB,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACvC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC;YACtB,CAAC,CAAC,EAAE,EAER,MAAM,EAAE,MAAM,KACV,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC"}

package/lib/esm/components/ToggleEditor.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Shape } from '@_linked/core/shapes/Shape';
+import { PropertyShape } from '@_linked/core/shapes/SHACL';
+export interface ToggleEditorProps {
+    onPressedChange?: (e: any) => void;
+    of?: Shape;
+    property?: PropertyShape;
+    children: React.ReactNode;
+    /**
+     *  Converts the value returned by the shape, to the input string for the toggle
+     * @param shapePropertyValue
+     * @returns
+     */
+    preConvertValueFn?: (shapePropertyValue: any) => string;
+    /**
+     * Converts the value of the toggle to a value that can be provided to the set method of the shape
+     * @param inputValue
+     * @returns
+     */
+    postConvertValueFn?: (inputValue: string) => any;
+}
+export declare const ToggleEditor: ({ onPressedChange, of, property, children, preConvertValueFn, postConvertValueFn, ...restProps }: ToggleEditorProps) => React.JSX.Element;

package/lib/esm/components/ToggleEditor.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Root as Toggle } from '@_linked/primitives/components/Toggle';
+export const ToggleEditor = ({ onPressedChange, of, property, children, preConvertValueFn, postConvertValueFn, ...restProps }) => {
+    const onChangeHandler = (value) => {
+        console.log(value, 'value toggle');
+        if (!of)
+            return;
+        if (postConvertValueFn) {
+            value = postConvertValueFn(value);
+        }
+        of[property.label] = value;
+        console.log(of[property.label], 'of[property.label] toggle');
+        if (onPressedChange) {
+            onPressedChange(value);
+        }
+    };
+    return (React.createElement(Toggle, { pressed: of[property.label], onPressedChange: onChangeHandler, defaultPressed: of
+            ? preConvertValueFn
+                ? preConvertValueFn(of[property.label])
+                : of[property.label]
+            : '', ...restProps }, children));
+};
+//# sourceMappingURL=ToggleEditor.js.map

package/lib/esm/components/ToggleEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleEditor.js","sourceRoot":"","sources":["../../../src/components/ToggleEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAsBvE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,eAAe,EACf,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,GAAG,SAAS,EACM,EAAE,EAAE;IACtB,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,EAAE;QAChC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;QACnC,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,IAAI,kBAAkB,EAAE,CAAC;YACvB,KAAK,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;QACD,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;QAC3B,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,2BAA2B,CAAC,CAAC;QAE7D,IAAI,eAAe,EAAE,CAAC;YACpB,eAAe,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,MAAM,IACL,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC3B,eAAe,EAAE,eAAe,EAChC,cAAc,EACZ,EAAE;YACA,CAAC,CAAC,iBAAiB;gBACjB,CAAC,CAAC,iBAAiB,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACvC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC;YACtB,CAAC,CAAC,EAAE,KAEJ,SAAS,IAEZ,QAAQ,CACF,CACV,CAAC;AACJ,CAAC,CAAC"}

package/lib/esm/index.d.ts

@@ -0,0 +1,10 @@
+import './ontologies/lincd-ui.js';
+import './components/TextfieldEditor.js';
+import './components/RadioButtonEditor.js';
+import './components/TextareaEditor.js';
+import './components/DateEditor.js';
+import './components/SwitchEditor.js';
+import './components/CheckboxEditor.js';
+import './components/ToggleEditor.js';
+import './components/SelectEditor.js';
+import './components/AvatarEditor.js';

package/lib/esm/index.js

@@ -0,0 +1,15 @@
+import './ontologies/lincd-ui.js';
+// lincd-ui package is for process the shape in the component
+//SHAPES FIRST
+// import './shapes/YourShape';
+//THEN COMPONENTS
+import './components/TextfieldEditor.js';
+import './components/RadioButtonEditor.js';
+import './components/TextareaEditor.js';
+import './components/DateEditor.js';
+import './components/SwitchEditor.js';
+import './components/CheckboxEditor.js';
+import './components/ToggleEditor.js';
+import './components/SelectEditor.js';
+import './components/AvatarEditor.js';
+//# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAElC,6DAA6D;AAE7D,cAAc;AACd,+BAA+B;AAE/B,iBAAiB;AACjB,OAAO,iCAAiC,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,gCAAgC,CAAC;AACxC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,gCAAgC,CAAC;AACxC,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC"}

package/lib/esm/ontologies/lincd-ui.d.ts

@@ -0,0 +1,6 @@
+export declare const loadData: () => Promise<any>;
+export declare const ns: (term: string) => import("@_linked/core/utils/NodeReference.js").NodeReferenceValue;
+export declare const _self: import("@_linked/core/utils/NodeReference.js").NodeReferenceValue;
+export declare const lincdUi: {
+    _self: import("@_linked/core/utils/NodeReference.js").NodeReferenceValue;
+};