@operato/board 0.2.48 → 0.2.52

package/dist/src/graphql/group.js

@@ -0,0 +1,125 @@
+import { client } from '@operato/graphql';
+import gql from 'graphql-tag';
+export async function fetchGroup(id) {
+    const response = await client.query({
+        query: gql `
+      query FetchGroupById($id: String!) {
+        group(id: $id) {
+          id
+          name
+          description
+          createdAt
+          creator {
+            id
+            name
+          }
+          updatedAt
+          updater {
+            id
+            name
+          }
+        }
+      }
+    `,
+        variables: { id }
+    });
+    return response.data;
+}
+export async function updateGroup(group) {
+    var { id, name, description } = group;
+    const response = await client.mutate({
+        mutation: gql `
+      mutation UpdateGroup($id: String!, $patch: GroupPatch!) {
+        updateGroup(id: $id, patch: $patch) {
+          id
+          name
+          description
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+        variables: {
+            id,
+            patch: { name, description }
+        }
+    });
+    return response.data;
+}
+export async function deleteGroup(id) {
+    const response = await client.mutate({
+        mutation: gql `
+      mutation ($id: String!) {
+        deleteGroup(id: $id)
+      }
+    `,
+        variables: {
+            id
+        }
+    });
+    return response.data;
+}
+export async function fetchGroupList() {
+    const response = await client.query({
+        query: gql `
+      {
+        groups {
+          items {
+            id
+            name
+            description
+            createdAt
+            updatedAt
+          }
+          total
+        }
+      }
+    `
+    });
+    return response.data;
+}
+export async function createGroup(group) {
+    const response = await client.mutate({
+        mutation: gql `
+      mutation CreateGroup($group: NewGroup!) {
+        createGroup(group: $group) {
+          id
+          name
+          description
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+        variables: { group }
+    });
+    return response.data;
+}
+export async function joinGroup(boardId, groupId) {
+    const response = await client.mutate({
+        mutation: gql `
+      mutation JoinGroup($id: String!, $boardIds: [String!]!) {
+        joinGroup(id: $id, boardIds: $boardIds) {
+          id
+          name
+          description
+          boards {
+            id
+            name
+            description
+            createdAt
+            updatedAt
+          }
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+        variables: {
+            id: groupId,
+            boardIds: [boardId]
+        }
+    });
+    return response.data;
+}
+//# sourceMappingURL=group.js.map

package/dist/src/graphql/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../src/graphql/group.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,MAAM,CAAC,KAAK,UAAU,UAAU,CAAC,EAAU;IACzC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;KAkBT;QACD,SAAS,EAAE,EAAE,EAAE,EAAE;KAClB,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,KAAiB;IACjD,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IAErC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;KAUZ;QACD,SAAS,EAAE;YACT,EAAE;YACF,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;SAC7B;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,EAAU;IAC1C,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;KAIZ;QACD,SAAS,EAAE;YACT,EAAE;SACH;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,cAAc;IAClC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;KAaT;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,KAAiB;IACjD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;KAUZ;QACD,SAAS,EAAE,EAAE,KAAK,EAAE;KACrB,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,OAAe,EAAE,OAAe;IAC9D,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBZ;QACD,SAAS,EAAE;YACT,EAAE,EAAE,OAAO;YACX,QAAQ,EAAE,CAAC,OAAO,CAAC;SACpB;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC","sourcesContent":["import { BoardGroup } from '../types'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\n\nexport async function fetchGroup(id: string) {\n  const response = await client.query({\n    query: gql`\n      query FetchGroupById($id: String!) {\n        group(id: $id) {\n          id\n          name\n          description\n          createdAt\n          creator {\n            id\n            name\n          }\n          updatedAt\n          updater {\n            id\n            name\n          }\n        }\n      }\n    `,\n    variables: { id }\n  })\n\n  return response.data\n}\n\nexport async function updateGroup(group: BoardGroup) {\n  var { id, name, description } = group\n\n  const response = await client.mutate({\n    mutation: gql`\n      mutation UpdateGroup($id: String!, $patch: GroupPatch!) {\n        updateGroup(id: $id, patch: $patch) {\n          id\n          name\n          description\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      id,\n      patch: { name, description }\n    }\n  })\n\n  return response.data\n}\n\nexport async function deleteGroup(id: string) {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ($id: String!) {\n        deleteGroup(id: $id)\n      }\n    `,\n    variables: {\n      id\n    }\n  })\n\n  return response.data\n}\n\nexport async function fetchGroupList() {\n  const response = await client.query({\n    query: gql`\n      {\n        groups {\n          items {\n            id\n            name\n            description\n            createdAt\n            updatedAt\n          }\n          total\n        }\n      }\n    `\n  })\n\n  return response.data\n}\n\nexport async function createGroup(group: BoardGroup) {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation CreateGroup($group: NewGroup!) {\n        createGroup(group: $group) {\n          id\n          name\n          description\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: { group }\n  })\n\n  return response.data\n}\n\nexport async function joinGroup(boardId: string, groupId: string) {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation JoinGroup($id: String!, $boardIds: [String!]!) {\n        joinGroup(id: $id, boardIds: $boardIds) {\n          id\n          name\n          description\n          boards {\n            id\n            name\n            description\n            createdAt\n            updatedAt\n          }\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      id: groupId,\n      boardIds: [boardId]\n    }\n  })\n\n  return response.data\n}\n"]}

package/dist/src/graphql/index.d.ts

@@ -0,0 +1,4 @@
+export * from './board';
+export * from './group';
+export * from './play-group';
+export * from './favorite-board';

package/dist/src/graphql/index.js

@@ -0,0 +1,5 @@
+export * from './board';
+export * from './group';
+export * from './play-group';
+export * from './favorite-board';
+//# sourceMappingURL=index.js.map

package/dist/src/graphql/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/graphql/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA","sourcesContent":["export * from './board'\nexport * from './group'\nexport * from './play-group'\nexport * from './favorite-board'\n"]}

package/dist/src/graphql/play-group.d.ts

@@ -0,0 +1,8 @@
+import { PlayGroup } from '../types';
+export declare function fetchPlayGroupList(): Promise<any>;
+export declare function fetchPlayGroup(groupId: string): Promise<any>;
+export declare function createPlayGroup(group: PlayGroup): Promise<any>;
+export declare function updatePlayGroup(group: PlayGroup): Promise<any>;
+export declare function deletePlayGroup(id: string): Promise<any>;
+export declare function joinPlayGroup(boardId: string, group: PlayGroup): Promise<any>;
+export declare function leavePlayGroup(boardId: string, groupId: string): Promise<any>;

package/dist/src/graphql/play-group.js

@@ -0,0 +1,173 @@
+import { client } from '@operato/graphql';
+import gql from 'graphql-tag';
+export async function fetchPlayGroupList() {
+    const response = await client.query({
+        query: gql `
+      {
+        playGroups {
+          items {
+            id
+            name
+            description
+          }
+          total
+        }
+      }
+    `
+    });
+    return response.data;
+}
+export async function fetchPlayGroup(groupId) {
+    const response = await client.query({
+        query: gql `
+      query FetchPlayGroup($id: String!) {
+        playGroup(id: $id) {
+          id
+          name
+          description
+          boards {
+            id
+            name
+            description
+            model
+            thumbnail
+            createdAt
+            creator {
+              id
+              name
+            }
+            updatedAt
+            updater {
+              id
+              name
+            }
+          }
+          createdAt
+          creator {
+            id
+            name
+          }
+          updatedAt
+          updater {
+            id
+            name
+          }
+        }
+      }
+    `,
+        variables: {
+            id: groupId
+        }
+    });
+    return response.data;
+}
+export async function createPlayGroup(group) {
+    var { name, description } = group;
+    const response = await client.mutate({
+        mutation: gql `
+      mutation CreatePlayGroup($playGroup: NewPlayGroup!) {
+        createPlayGroup(playGroup: $playGroup) {
+          id
+          name
+          description
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+        variables: {
+            playGroup: { name, description }
+        }
+    });
+    return response.data;
+}
+export async function updatePlayGroup(group) {
+    var { id, name, description } = group;
+    const response = await client.mutate({
+        mutation: gql `
+      mutation UpdatePlayGroup($id: String!, $patch: PlayGroupPatch!) {
+        updatePlayGroup(id: $id, patch: $patch) {
+          id
+          name
+          description
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+        variables: {
+            id,
+            patch: { name, description }
+        }
+    });
+    return response.data;
+}
+export async function deletePlayGroup(id) {
+    const response = await client.mutate({
+        mutation: gql `
+      mutation ($id: String!) {
+        deletePlayGroup(id: $id)
+      }
+    `,
+        variables: {
+            id
+        }
+    });
+    return response.data;
+}
+export async function joinPlayGroup(boardId, group) {
+    var { id, name, description } = group;
+    const response = await client.mutate({
+        mutation: gql `
+      mutation JoinPlayGroup($id: String!, $boardIds: [String!]!) {
+        joinPlayGroup(id: $id, boardIds: $boardIds) {
+          id
+          name
+          description
+          boards {
+            id
+            name
+            description
+            createdAt
+            updatedAt
+          }
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+        variables: {
+            id,
+            boardIds: [boardId]
+        }
+    });
+    return response.data;
+}
+export async function leavePlayGroup(boardId, groupId) {
+    const response = await client.mutate({
+        mutation: gql `
+      mutation ($id: String!, $boardIds: [String]!) {
+        leavePlayGroup(id: $id, boardIds: $boardIds) {
+          id
+          name
+          description
+          boards {
+            id
+            name
+            description
+            createdAt
+            updatedAt
+          }
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+        variables: {
+            id: groupId,
+            boardIds: [boardId]
+        }
+    });
+    return response.data;
+}
+//# sourceMappingURL=play-group.js.map

package/dist/src/graphql/play-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"play-group.js","sourceRoot":"","sources":["../../../src/graphql/play-group.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,MAAM,CAAC,KAAK,UAAU,kBAAkB;IACtC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;KAWT;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,cAAc,CAAC,OAAe;IAClD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCT;QACD,SAAS,EAAE;YACT,EAAE,EAAE,OAAO;SACZ;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,KAAgB;IACpD,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IAEjC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;KAUZ;QACD,SAAS,EAAE;YACT,SAAS,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;SACjC;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,KAAgB;IACpD,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IAErC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;KAUZ;QACD,SAAS,EAAE;YACT,EAAE;YACF,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;SAC7B;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,EAAU;IAC9C,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;KAIZ;QACD,SAAS,EAAE;YACT,EAAE;SACH;KACF,CAAC,CAAA;IACF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,OAAe,EAAE,KAAgB;IACnE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IAErC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBZ;QACD,SAAS,EAAE;YACT,EAAE;YACF,QAAQ,EAAE,CAAC,OAAO,CAAC;SACpB;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,cAAc,CAAC,OAAe,EAAE,OAAe;IACnE,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBZ;QACD,SAAS,EAAE;YACT,EAAE,EAAE,OAAO;YACX,QAAQ,EAAE,CAAC,OAAO,CAAC;SACpB;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC","sourcesContent":["import { PlayGroup } from '../types'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\n\nexport async function fetchPlayGroupList() {\n  const response = await client.query({\n    query: gql`\n      {\n        playGroups {\n          items {\n            id\n            name\n            description\n          }\n          total\n        }\n      }\n    `\n  })\n\n  return response.data\n}\n\nexport async function fetchPlayGroup(groupId: string) {\n  const response = await client.query({\n    query: gql`\n      query FetchPlayGroup($id: String!) {\n        playGroup(id: $id) {\n          id\n          name\n          description\n          boards {\n            id\n            name\n            description\n            model\n            thumbnail\n            createdAt\n            creator {\n              id\n              name\n            }\n            updatedAt\n            updater {\n              id\n              name\n            }\n          }\n          createdAt\n          creator {\n            id\n            name\n          }\n          updatedAt\n          updater {\n            id\n            name\n          }\n        }\n      }\n    `,\n    variables: {\n      id: groupId\n    }\n  })\n\n  return response.data\n}\n\nexport async function createPlayGroup(group: PlayGroup) {\n  var { name, description } = group\n\n  const response = await client.mutate({\n    mutation: gql`\n      mutation CreatePlayGroup($playGroup: NewPlayGroup!) {\n        createPlayGroup(playGroup: $playGroup) {\n          id\n          name\n          description\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      playGroup: { name, description }\n    }\n  })\n\n  return response.data\n}\n\nexport async function updatePlayGroup(group: PlayGroup) {\n  var { id, name, description } = group\n\n  const response = await client.mutate({\n    mutation: gql`\n      mutation UpdatePlayGroup($id: String!, $patch: PlayGroupPatch!) {\n        updatePlayGroup(id: $id, patch: $patch) {\n          id\n          name\n          description\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      id,\n      patch: { name, description }\n    }\n  })\n\n  return response.data\n}\n\nexport async function deletePlayGroup(id: string) {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ($id: String!) {\n        deletePlayGroup(id: $id)\n      }\n    `,\n    variables: {\n      id\n    }\n  })\n  return response.data\n}\n\nexport async function joinPlayGroup(boardId: string, group: PlayGroup) {\n  var { id, name, description } = group\n\n  const response = await client.mutate({\n    mutation: gql`\n      mutation JoinPlayGroup($id: String!, $boardIds: [String!]!) {\n        joinPlayGroup(id: $id, boardIds: $boardIds) {\n          id\n          name\n          description\n          boards {\n            id\n            name\n            description\n            createdAt\n            updatedAt\n          }\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      id,\n      boardIds: [boardId]\n    }\n  })\n\n  return response.data\n}\n\nexport async function leavePlayGroup(boardId: string, groupId: string) {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ($id: String!, $boardIds: [String]!) {\n        leavePlayGroup(id: $id, boardIds: $boardIds) {\n          id\n          name\n          description\n          boards {\n            id\n            name\n            description\n            createdAt\n            updatedAt\n          }\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      id: groupId,\n      boardIds: [boardId]\n    }\n  })\n\n  return response.data\n}\n"]}

package/dist/src/modeller/component-toolbar/component-detail.d.ts

@@ -1,4 +1,4 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-export {};
+import '@operato/markdown';

package/dist/src/modeller/component-toolbar/component-detail.js

@@ -2,7 +2,8 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
+import '@operato/markdown';
+import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ScrollbarStyles } from '@operato/styles';
 let ComponentDetail = class ComponentDetail extends LitElement {
@@ -11,10 +12,9 @@ let ComponentDetail = class ComponentDetail extends LitElement {
         this.template = null;
     }
     render() {
-        const { about = '/helps/board-modeller/effects/animation.md' } = this.template || {};
-        return this.template ? html ` <iframe .src=${about}></iframe> ` : html ``;
+        const { about } = this.template || {};
+        return html ` <ox-markdown .src=${about}></ox-markdown> `;
     }
-    updated(changes) { }
 };
 ComponentDetail.styles = [
     ScrollbarStyles,
@@ -26,7 +26,7 @@ ComponentDetail.styles = [
 
         background-color: var(--component-detail-background-color, white);
         margin: 0px;
-        padding: 0px;
+        padding: 10px;
 
         width: 360px;
         height: 100%;
@@ -42,7 +42,7 @@ ComponentDetail.styles = [
         z-index: 1;
       }
 
-      iframe {
+      ox-markdown {
         flex: 1;
       }
     `

package/dist/src/modeller/component-toolbar/component-detail.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-detail.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-detail.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAiC8B,aAAQ,GAA6B,IAAI,CAAA;IASvE,CAAC;IAPC,MAAM;QACJ,MAAM,EAAE,KAAK,GAAG,4CAA4C,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAEpF,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,KAAK,aAAa,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;IACzE,CAAC;IAED,OAAO,CAAC,OAA6B,IAAG,CAAC;CAC1C,CAAA;AAzCQ,sBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA0C;AAjCjE,eAAe;IADpB,aAAa,CAAC,kBAAkB,CAAC;GAC5B,eAAe,CA0CpB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('component-detail')\nclass ComponentDetail extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-content: stretch;\n\n        background-color: var(--component-detail-background-color, white);\n        margin: 0px;\n        padding: 0px;\n\n        width: 360px;\n        height: 100%;\n\n        overflow: hidden;\n\n        border: 2px solid var(--component-detail-border-color);\n        box-sizing: border-box;\n\n        position: absolute;\n        top: 0px;\n\n        z-index: 1;\n      }\n\n      iframe {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) template: { about: string } | null = null\n\n  render() {\n    const { about = '/helps/board-modeller/effects/animation.md' } = this.template || {}\n\n    return this.template ? html` <iframe .src=${about}></iframe> ` : html``\n  }\n\n  updated(changes: PropertyValues<this>) {}\n}\n"]}
+{"version":3,"file":"component-detail.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-detail.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAiC8B,aAAQ,GAA6B,IAAI,CAAA;IAOvE,CAAC;IALC,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAErC,OAAO,IAAI,CAAA,sBAAsB,KAAK,kBAAkB,CAAA;IAC1D,CAAC;CACF,CAAA;AAvCQ,sBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA0C;AAjCjE,eAAe;IADpB,aAAa,CAAC,kBAAkB,CAAC;GAC5B,eAAe,CAwCpB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/markdown'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('component-detail')\nclass ComponentDetail extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-content: stretch;\n\n        background-color: var(--component-detail-background-color, white);\n        margin: 0px;\n        padding: 10px;\n\n        width: 360px;\n        height: 100%;\n\n        overflow: hidden;\n\n        border: 2px solid var(--component-detail-border-color);\n        box-sizing: border-box;\n\n        position: absolute;\n        top: 0px;\n\n        z-index: 1;\n      }\n\n      ox-markdown {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) template: { about: string } | null = null\n\n  render() {\n    const { about } = this.template || {}\n\n    return html` <ox-markdown .src=${about}></ox-markdown> `\n  }\n}\n"]}

package/dist/src/modeller/component-toolbar/component-menu.js

@@ -3,7 +3,7 @@
  */
 import { __decorate } from "tslib";
 import './component-detail';
-import { css, html, LitElement } from 'lit';
+import { LitElement, css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ScrollbarStyles } from '@operato/styles';
 import noImage from '../../../../assets/images/components/no-image.png';
@@ -77,7 +77,6 @@ let ComponentMenu = class ComponentMenu extends LitElement {
         if (!type) {
             return;
         }
-        // var group = this.groups.find(g => g.name == this.group)
         if (this.scene) {
             this.template = this.templates.find(template => template.type == type);
             this.template && this.scene.add(JSON.parse(JSON.stringify(this.template.model)), { cx: 200, cy: 200 });

package/dist/src/modeller/component-toolbar/component-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-menu.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-menu.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './component-detail'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { Scene } from '@hatiolab/things-scene'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport noImage from '../../../../assets/images/components/no-image.png'\nimport { Pallet, PalletItem } from '../../types'\n\n@customElement('component-menu')\nclass ComponentMenu extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-content: stretch;\n\n        background-color: var(--component-menu-background-color);\n        margin: 0px;\n        padding: 0px;\n\n        width: 180px;\n        height: 100%;\n\n        overflow: visible;\n\n        border: 2px solid var(--component-menu-border-color);\n        box-sizing: border-box;\n\n        position: absolute;\n        top: 0px;\n\n        z-index: 1;\n      }\n\n      h2 {\n        background-color: var(--component-menu-border-color);\n        padding: 1px 5px;\n        margin: 0;\n        font: var(--component-menu-title);\n        color: #fff;\n        text-transform: capitalize;\n      }\n\n      [templates] {\n        flex: 1;\n\n        display: block;\n        margin: 0;\n        padding: 0;\n        overflow-y: auto;\n\n        background-color: var(--component-menu-background-color);\n      }\n\n      [template] {\n        display: flex;\n        align-items: center;\n        min-height: var(--component-menu-item-icon-size);\n        padding: 0 5px 0 0;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        font-size: 11px;\n        color: var(--component-menu-item-color);\n      }\n\n      [template]:hover,\n      [template]:focus {\n        color: var(--component-menu-item-hover-color);\n        font-weight: bold;\n        cursor: pointer;\n      }\n\n      [template] img {\n        margin: 5px;\n        width: var(--component-menu-item-icon-size);\n        height: var(--component-menu-item-icon-size);\n      }\n\n      component-detail {\n        position: absolute;\n        top: 0;\n        left: 180px;\n        height: 100%;\n        outline: none;\n      }\n\n      component-detail[hidden] {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) groups: Pallet[] = []\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: String }) group: string | null = ''\n\n  @state() templates: PalletItem[] = []\n  @state() template: PalletItem | any\n\n  @query('component-detail') detail!: HTMLElement\n\n  render() {\n    return this.group\n      ? html`\n          <h2 onclick=${(e: MouseEvent) => e.stopPropagation()}>${this.group} list</h2>\n\n          <div\n            templates\n            @mouseover=${(e: MouseEvent) => this.onHoverComponent(e)}\n            @mouseout=${(e: MouseEvent) => (this.template = null)}\n          >\n            ${(this.templates || []).map(\n              template => html`\n                <div @click=${this.onClickTemplate} data-type=${template.type} template>\n                  <img src=${this.templateIcon(template)} />${template.type}\n                </div>\n              `\n            )}\n          </div>\n\n          <component-detail\n            tabindex=\"-1\"\n            @focusout=${() => {\n              this.template = null\n            }}\n            .template=${this.template}\n            hidden\n          >\n          </component-detail>\n        `\n      : html``\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('group')) {\n      if (!this.group) {\n        this.templates = []\n        this.setAttribute('hidden', '')\n      } else {\n        this.templates = this.groups.find((g: Pallet) => g.name === this.group)?.templates || []\n        this.removeAttribute('active')\n      }\n    }\n\n    if (changes.has('template')) {\n      this.template && this.template.about\n        ? this.detail.removeAttribute('hidden')\n        : this.detail.setAttribute('hidden', '')\n    }\n  }\n\n  findTemplate(type: string | null | undefined) {\n    this.template = type && this.templates.find(template => template.type == type)\n  }\n\n  onHoverComponent(e: MouseEvent) {\n    const button = e.target as HTMLElement\n    this.findTemplate(button!.closest('[data-type]')?.getAttribute('data-type'))\n  }\n\n  onClickTemplate(e: MouseEvent) {\n    var item = e.target as HTMLElement\n    var type = item.closest('[data-type]')?.getAttribute('data-type')\n\n    if (!type) {\n      return\n    }\n\n    // var group = this.groups.find(g => g.name == this.group)\n\n    if (this.scene) {\n      this.template = this.templates.find(template => template.type == type)\n      this.template && this.scene.add(JSON.parse(JSON.stringify(this.template.model)), { cx: 200, cy: 200 })\n    }\n\n    this.group = null\n  }\n\n  templateIcon(template: PalletItem) {\n    return template.icon || noImage\n  }\n}\n"]}
+{"version":3,"file":"component-menu.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-menu.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './component-detail'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { Pallet, PalletItem } from '../../types'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { Scene } from '@hatiolab/things-scene'\nimport { ScrollbarStyles } from '@operato/styles'\nimport noImage from '../../../../assets/images/components/no-image.png'\n\n@customElement('component-menu')\nclass ComponentMenu extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-content: stretch;\n\n        background-color: var(--component-menu-background-color);\n        margin: 0px;\n        padding: 0px;\n\n        width: 180px;\n        height: 100%;\n\n        overflow: visible;\n\n        border: 2px solid var(--component-menu-border-color);\n        box-sizing: border-box;\n\n        position: absolute;\n        top: 0px;\n\n        z-index: 1;\n      }\n\n      h2 {\n        background-color: var(--component-menu-border-color);\n        padding: 1px 5px;\n        margin: 0;\n        font: var(--component-menu-title);\n        color: #fff;\n        text-transform: capitalize;\n      }\n\n      [templates] {\n        flex: 1;\n\n        display: block;\n        margin: 0;\n        padding: 0;\n        overflow-y: auto;\n\n        background-color: var(--component-menu-background-color);\n      }\n\n      [template] {\n        display: flex;\n        align-items: center;\n        min-height: var(--component-menu-item-icon-size);\n        padding: 0 5px 0 0;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        font-size: 11px;\n        color: var(--component-menu-item-color);\n      }\n\n      [template]:hover,\n      [template]:focus {\n        color: var(--component-menu-item-hover-color);\n        font-weight: bold;\n        cursor: pointer;\n      }\n\n      [template] img {\n        margin: 5px;\n        width: var(--component-menu-item-icon-size);\n        height: var(--component-menu-item-icon-size);\n      }\n\n      component-detail {\n        position: absolute;\n        top: 0;\n        left: 180px;\n        height: 100%;\n        outline: none;\n      }\n\n      component-detail[hidden] {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) groups: Pallet[] = []\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: String }) group: string | null = ''\n\n  @state() templates: PalletItem[] = []\n  @state() template: PalletItem | any\n\n  @query('component-detail') detail!: HTMLElement\n\n  render() {\n    return this.group\n      ? html`\n          <h2 onclick=${(e: MouseEvent) => e.stopPropagation()}>${this.group} list</h2>\n\n          <div\n            templates\n            @mouseover=${(e: MouseEvent) => this.onHoverComponent(e)}\n            @mouseout=${(e: MouseEvent) => (this.template = null)}\n          >\n            ${(this.templates || []).map(\n              template => html`\n                <div @click=${this.onClickTemplate} data-type=${template.type} template>\n                  <img src=${this.templateIcon(template)} />${template.type}\n                </div>\n              `\n            )}\n          </div>\n\n          <component-detail\n            tabindex=\"-1\"\n            @focusout=${() => {\n              this.template = null\n            }}\n            .template=${this.template}\n            hidden\n          >\n          </component-detail>\n        `\n      : html``\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('group')) {\n      if (!this.group) {\n        this.templates = []\n        this.setAttribute('hidden', '')\n      } else {\n        this.templates = this.groups.find((g: Pallet) => g.name === this.group)?.templates || []\n        this.removeAttribute('active')\n      }\n    }\n\n    if (changes.has('template')) {\n      this.template && this.template.about\n        ? this.detail.removeAttribute('hidden')\n        : this.detail.setAttribute('hidden', '')\n    }\n  }\n\n  findTemplate(type: string | null | undefined) {\n    this.template = type && this.templates.find(template => template.type == type)\n  }\n\n  onHoverComponent(e: MouseEvent) {\n    const button = e.target as HTMLElement\n    this.findTemplate(button!.closest('[data-type]')?.getAttribute('data-type'))\n  }\n\n  onClickTemplate(e: MouseEvent) {\n    var item = e.target as HTMLElement\n    var type = item.closest('[data-type]')?.getAttribute('data-type')\n\n    if (!type) {\n      return\n    }\n\n    if (this.scene) {\n      this.template = this.templates.find(template => template.type == type)\n      this.template && this.scene.add(JSON.parse(JSON.stringify(this.template.model)), { cx: 200, cy: 200 })\n    }\n\n    this.group = null\n  }\n\n  templateIcon(template: PalletItem) {\n    return template.icon || noImage\n  }\n}\n"]}

package/dist/src/modeller/component-toolbar/component-toolbar.js

@@ -3,16 +3,27 @@
  */
 import { __decorate } from "tslib";
 import './component-menu';
-import { css, html, LitElement } from 'lit';
-import { customElement, property, query, queryAll } from 'lit/decorators.js';
+import { LitElement, css, html } from 'lit';
 import { SCENE_MODE } from '@hatiolab/things-scene';
+import { customElement, property, query, queryAll } from 'lit/decorators.js';
 let ComponentToolbar = class ComponentToolbar extends LitElement {
     constructor() {
         super(...arguments);
         this.componentGroupList = [];
         this.mode = SCENE_MODE.VIEW;
+        this.icons = {};
     }
     updated(changes) {
+        if (changes.has('componentGroupList')) {
+            const color = getComputedStyle(this, null).getPropertyValue('--primary-color');
+            this.icons = (this.componentGroupList || [])
+                .filter(group => { var _a; return ((_a = group.templates) === null || _a === void 0 ? void 0 : _a.length) > 0; })
+                .reduce((sum, group) => {
+                sum[group.name] =
+                    'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color));
+                return sum;
+            }, {});
+        }
         if (changes.has('group')) {
             this.groups.forEach(group => {
                 group.getAttribute('data-group') === this.group
@@ -23,10 +34,17 @@ let ComponentToolbar = class ComponentToolbar extends LitElement {
         }
     }
     render() {
+        const componentList = this.componentGroupList || [];
         return html `
-      ${this.componentGroupList
+      ${componentList
             .filter(group => { var _a; return ((_a = group.templates) === null || _a === void 0 ? void 0 : _a.length) > 0; })
-            .map(item => html ` <span data-group=${item.name} @click=${(e) => this._onClickGroup(e)}> </span> `)}
+            .map(group => html `
+            <img
+              data-group=${group.name}
+              @click=${(e) => this._onClickGroup(e)}
+              .src=${this.icons[group.name]}
+            />
+          `)}
 
       <component-menu
         tabindex="-1"
@@ -35,7 +53,7 @@ let ComponentToolbar = class ComponentToolbar extends LitElement {
         }}
         .scene=${this.scene}
         .group=${this.group}
-        .groups=${this.componentGroupList}
+        .groups=${componentList}
         hidden
       >
       </component-menu>
@@ -62,7 +80,7 @@ ComponentToolbar.styles = [
         background-color: var(--component-toolbar-background-color);
       }
 
-      span {
+      img {
         display: flex;
         flex-direction: row;
 
@@ -72,65 +90,8 @@ ComponentToolbar.styles = [
 
         border-bottom: var(--component-toolbar-border);
         margin: 0;
-        background: url(/assets/images/icon-vtoolbar.png) -1px 0 no-repeat;
-      }
-
-      span[data-group='line'] {
-        background-position: 50% -186px;
-      }
-
-      span[data-group='shape'] {
-        background-position: 0px -284px;
-      }
-
-      span[data-group='textAndMedia'] {
-        background-position: 50% -385px;
-      }
-
-      span[data-group='chartAndGauge'] {
-        background-position: 50% -488px;
-      }
-
-      span[data-group='table'] {
-        background-position: 50% -585px;
-      }
-
-      span[data-group='container'] {
-        background-position: 50% -685px;
-      }
-
-      span[data-group='dataSource'] {
-        background-position: 50% -888px;
-      }
-
-      span[data-group='IoT'] {
-        background-position: -3px -788px;
-      }
-
-      span[data-group='3D'] {
-        background-position: 50% -992px;
-      }
-
-      span[data-group='warehouse'] {
-        background-position: -2px -1089px;
-      }
-
-      span[data-group='form'] {
-        background-position: -2px -1287px;
-      }
-
-      span[data-group='etc'] {
-        background-position: -1px -1189px;
-      }
-
-      .pressed {
-        background-position: 0 15px;
-      }
-
-      .pressed[pressed],
-      .pressed[active] {
-        background-position: -3px -88px;
-        background-color: #beb9b3;
+        padding: 6px;
+        box-sizing: border-box;
       }
 
       component-menu {

package/dist/src/modeller/component-toolbar/component-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-toolbar.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-toolbar.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5E,OAAO,EAAS,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAG1D,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAiG6B,uBAAkB,GAAU,EAAE,CAAA;QAG7B,SAAI,GAAe,UAAU,CAAC,IAAI,CAAA;IAgDhE,CAAC;IA3CC,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBAC1B,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC,KAAK;oBAC7C,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC;oBAClC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;YACrC,CAAC,CAAC,CAAA;YAEF,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;SACxF;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,kBAAkB;aACtB,MAAM,CAAC,KAAK,CAAC,EAAE,WAAC,OAAA,CAAA,MAAA,KAAK,CAAC,SAAS,0CAAE,MAAM,IAAG,CAAC,CAAA,EAAA,CAAC;aAC5C,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,IAAI,WAAW,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC;;;;oBAInG,GAAG,EAAE;YACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;QACnB,CAAC;iBACQ,IAAI,CAAC,KAAK;iBACV,IAAI,CAAC,KAAK;kBACT,IAAI,CAAC,kBAAkB;;;;KAIpC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,CAAa;;QAC/B,IAAI,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAA;QAEpC,IAAI,CAAC,KAAK,GAAG,MAAA,MAAO,CAAC,OAAO,CAAC,cAAc,CAAC,0CAAE,YAAY,CAAC,YAAY,CAAC,CAAA;QAExE,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAM;QAEvB,MAAM,IAAI,CAAC,cAAc,CAAA;QAEzB,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAA;IACpB,CAAC;CACF,CAAA;AAnJQ,uBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4FF;CACF,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4DAA+B;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmC;AAErC;IAAxB,KAAK,CAAC,gBAAgB,CAAC;8CAA2B;AACzB;IAAzB,QAAQ,CAAC,cAAc,CAAC;gDAAiC;AAvGtD,gBAAgB;IADrB,aAAa,CAAC,mBAAmB,CAAC;GAC7B,gBAAgB,CAoJrB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './component-menu'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nimport { Scene, SCENE_MODE } from '@hatiolab/things-scene'\n\n@customElement('component-toolbar')\nclass ComponentToolbar extends LitElement {\n  static styles = [\n    css`\n      :host {\n        left: 0;\n        display: block;\n        position: relative;\n\n        width: var(--component-toolbar-icon-size);\n        background-color: var(--component-toolbar-background-color);\n      }\n\n      span {\n        display: flex;\n        flex-direction: row;\n\n        width: var(--component-toolbar-icon-size);\n        height: var(--component-toolbar-icon-size);\n        min-width: 50%;\n\n        border-bottom: var(--component-toolbar-border);\n        margin: 0;\n        background: url(/assets/images/icon-vtoolbar.png) -1px 0 no-repeat;\n      }\n\n      span[data-group='line'] {\n        background-position: 50% -186px;\n      }\n\n      span[data-group='shape'] {\n        background-position: 0px -284px;\n      }\n\n      span[data-group='textAndMedia'] {\n        background-position: 50% -385px;\n      }\n\n      span[data-group='chartAndGauge'] {\n        background-position: 50% -488px;\n      }\n\n      span[data-group='table'] {\n        background-position: 50% -585px;\n      }\n\n      span[data-group='container'] {\n        background-position: 50% -685px;\n      }\n\n      span[data-group='dataSource'] {\n        background-position: 50% -888px;\n      }\n\n      span[data-group='IoT'] {\n        background-position: -3px -788px;\n      }\n\n      span[data-group='3D'] {\n        background-position: 50% -992px;\n      }\n\n      span[data-group='warehouse'] {\n        background-position: -2px -1089px;\n      }\n\n      span[data-group='form'] {\n        background-position: -2px -1287px;\n      }\n\n      span[data-group='etc'] {\n        background-position: -1px -1189px;\n      }\n\n      .pressed {\n        background-position: 0 15px;\n      }\n\n      .pressed[pressed],\n      .pressed[active] {\n        background-position: -3px -88px;\n        background-color: #beb9b3;\n      }\n\n      component-menu {\n        position: absolute;\n        top: 0;\n        left: var(--component-toolbar-icon-size);\n        height: 100%;\n        outline: none;\n      }\n\n      component-menu[hidden] {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Array }) componentGroupList: any[] = []\n  @property({ type: String }) group?: string | null\n  @property({ type: Object }) scene!: Scene\n  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.VIEW\n\n  @query('component-menu') private menu!: HTMLElement\n  @queryAll('[data-group]') groups!: NodeListOf<HTMLElement>\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('group')) {\n      this.groups.forEach(group => {\n        group.getAttribute('data-group') === this.group\n          ? group.setAttribute('active', '')\n          : group.removeAttribute('active')\n      })\n\n      this.group ? this.menu.removeAttribute('hidden') : this.menu.setAttribute('hidden', '')\n    }\n  }\n\n  render() {\n    return html`\n      ${this.componentGroupList\n        .filter(group => group.templates?.length > 0)\n        .map(item => html` <span data-group=${item.name} @click=${(e: MouseEvent) => this._onClickGroup(e)}> </span> `)}\n\n      <component-menu\n        tabindex=\"-1\"\n        @focusout=${() => {\n          this.group = null\n        }}\n        .scene=${this.scene}\n        .group=${this.group}\n        .groups=${this.componentGroupList}\n        hidden\n      >\n      </component-menu>\n    `\n  }\n\n  async _onClickGroup(e: MouseEvent) {\n    var button = e.target as HTMLElement\n\n    this.group = button!.closest('[data-group]')?.getAttribute('data-group')\n\n    if (!this.group) return\n\n    await this.updateComplete\n\n    this.menu?.focus()\n  }\n}\n"]}
+{"version":3,"file":"component-toolbar.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './component-menu'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { SCENE_MODE, Scene } from '@hatiolab/things-scene'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nimport { ComponentGroup } from '../../types'\n\n@customElement('component-toolbar')\nclass ComponentToolbar extends LitElement {\n  static styles = [\n    css`\n      :host {\n        left: 0;\n        display: block;\n        position: relative;\n\n        width: var(--component-toolbar-icon-size);\n        background-color: var(--component-toolbar-background-color);\n      }\n\n      img {\n        display: flex;\n        flex-direction: row;\n\n        width: var(--component-toolbar-icon-size);\n        height: var(--component-toolbar-icon-size);\n        min-width: 50%;\n\n        border-bottom: var(--component-toolbar-border);\n        margin: 0;\n        padding: 6px;\n        box-sizing: border-box;\n      }\n\n      component-menu {\n        position: absolute;\n        top: 0;\n        left: var(--component-toolbar-icon-size);\n        height: 100%;\n        outline: none;\n      }\n\n      component-menu[hidden] {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Array }) componentGroupList: ComponentGroup[] = []\n  @property({ type: String }) group?: string | null\n  @property({ type: Object }) scene!: Scene\n  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.VIEW\n\n  @query('component-menu') private menu!: HTMLElement\n  @queryAll('[data-group]') private groups!: NodeListOf<HTMLElement>\n\n  private icons: { [name: string]: string } = {}\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('componentGroupList')) {\n      const color = getComputedStyle(this, null).getPropertyValue('--primary-color')\n\n      this.icons = (this.componentGroupList || [])\n        .filter(group => group.templates?.length > 0)\n        .reduce((sum, group: ComponentGroup) => {\n          sum[group.name] =\n            'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color))\n          return sum\n        }, {} as { [name: string]: string })\n    }\n\n    if (changes.has('group')) {\n      this.groups.forEach(group => {\n        group.getAttribute('data-group') === this.group\n          ? group.setAttribute('active', '')\n          : group.removeAttribute('active')\n      })\n\n      this.group ? this.menu.removeAttribute('hidden') : this.menu.setAttribute('hidden', '')\n    }\n  }\n\n  render() {\n    const componentList = this.componentGroupList || []\n\n    return html`\n      ${componentList\n        .filter(group => group.templates?.length > 0)\n        .map(\n          group => html`\n            <img\n              data-group=${group.name}\n              @click=${(e: MouseEvent) => this._onClickGroup(e)}\n              .src=${this.icons[group.name]}\n            />\n          `\n        )}\n\n      <component-menu\n        tabindex=\"-1\"\n        @focusout=${() => {\n          this.group = null\n        }}\n        .scene=${this.scene}\n        .group=${this.group}\n        .groups=${componentList}\n        hidden\n      >\n      </component-menu>\n    `\n  }\n\n  async _onClickGroup(e: MouseEvent) {\n    var button = e.target as HTMLElement\n\n    this.group = button!.closest('[data-group]')?.getAttribute('data-group')\n\n    if (!this.group) return\n\n    await this.updateComplete\n\n    this.menu?.focus()\n  }\n}\n"]}

package/dist/src/ox-board-list.d.ts

@@ -0,0 +1,2 @@
+import '@operato/popup';
+import '@operato/data-grist';