@things-factory/lite-menu 10.0.18 → 10.1.0

package/dist-client/actions/lite-menu.d.ts

@@ -2,6 +2,6 @@ import '@material/web/icon/icon.js';
 import '@operato/menu/ox-menu-part.js';
 export declare const UPDATE_ADDON_MENUS = "UPDATE_ADDON_MENUS";
 export declare const UPDATE_MENU_TEMPLATE = "UPDATE_MENU_TEMPLATE";
-export declare function setupMenuPart(options: any): Promise<void>;
+export declare function setupMenuPart(options?: any): Promise<void>;
 export declare function updateMenuTemplate(template: any): Promise<void>;
 export declare function fetchAddonMenus(): Promise<void>;

package/dist-client/actions/lite-menu.js

@@ -1,5 +1,6 @@
 import '@material/web/icon/icon.js';
 import '@operato/menu/ox-menu-part.js';
+import { permittedMenus } from '@operato/menu';
 import gql from 'graphql-tag';
 import { html } from 'lit';
 import { store, InheritedValueType, clientSettingStore } from '@operato/shell';
@@ -7,24 +8,78 @@ import { client } from '@operato/graphql';
 import { appendViewpart, toggleOverlay, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout';
 import { isMobileDevice } from '@operato/utils';
 import { APPEND_APP_TOOL, REMOVE_APP_TOOL } from '@things-factory/apptool-base/client';
+import { auth, hasPrivilege } from '@things-factory/auth-base/dist-client';
 export const UPDATE_ADDON_MENUS = 'UPDATE_ADDON_MENUS';
 export const UPDATE_MENU_TEMPLATE = 'UPDATE_MENU_TEMPLATE';
 var HAMBURGER;
+/**
+ * 앱이 마지막으로 준 옵션.
+ *
+ * ── 왜 기억해야 하나 ─────────────────────────────────────────────────────────
+ * 이 함수는 앱의 부팅에서 한 번만 불리는 것이 아니다. **설정 화면이 다시 부른다** —
+ * `lite-menu-setting-let` 은 메뉴 감추기를 켜고 끌 때 `setupMenuPart({ hovering })` 만 넘긴다.
+ *
+ * 그때 앱이 처음 준 것들이 사라졌다. `rail` 이 빠지면 레일 모드가 꺼지고, `slotTemplate` 이
+ * 빠지면 앱이 메뉴에 붙여 둔 것이 없어진다(dataset · gangsters 가 그것을 준다).
+ *
+ * 설정 화면은 **자기가 바꾸는 것만** 알면 되는 것이 맞다. 나머지를 기억하는 것은 이쪽 일이다.
+ */
+var lastOptions = {};
 export async function setupMenuPart(options) {
-    var { hovering = isMobileDevice() ? true : false, slotTemplate, portraitSlotTemplate, landscapeSlotTemplate, position = VIEWPART_POSITION.NAVBAR } = options || {};
+    /* 준 것만 덮어쓴다 — 안 준 것은 앞의 값을 그대로 쓴다. */
+    lastOptions = { ...lastOptions, ...(options || {}) };
+    options = lastOptions;
+    var { hovering = isMobileDevice() ? true : false, slotTemplate, portraitSlotTemplate, landscapeSlotTemplate, position = VIEWPART_POSITION.NAVBAR, 
+    /*
+     * 레일 모드 — 접을 수 있고, 접히면 하위가 팝업으로 뜬다.
+     *
+     * 앱이 켜야 한다. 켜지 않은 앱은 지금과 한 글자도 다르지 않다.
+     */
+    rail = false, 
+    /**
+     * 오른쪽 끝을 끌어 메뉴 폭을 바꿀 수 있나.
+     *
+     * **기본은 그대로 둔다** — 이 함수를 쓰는 앱이 다섯이고, 말없이 끄면 그 앱들의 화면이 함께
+     * 바뀐다. 끄고 싶은 앱이 셋업에서 끈다.
+     *
+     * 레일 모드에서는 폭이 두 값(208 · 56)뿐이고 접기 단추가 그 사이를 오간다. 그 위에 자유
+     * 조절까지 두면 「내가 정한 폭」과 「접기가 정한 폭」이 서로를 덮어쓴다.
+     */
+    resizable = true } = options || {};
     const { hovering: hoveringSetting } = (await clientSettingStore.get('lite-menu'))?.value || {};
     if (hoveringSetting !== undefined) {
         hovering = hoveringSetting;
     }
     const orientation = position == VIEWPART_POSITION.HEADERBAR ? 'landscape' : 'portrait';
     const orientatedSlotTemplate = (orientation == 'landscape' ? landscapeSlotTemplate : portraitSlotTemplate) || slotTemplate || html ``;
+    /*
+     * 접기와 hovering 은 **같은 요구에 대한 두 답**이다 — 화면을 넓게 쓰고 싶다는 것.
+     *
+     * 둘이 함께 켜지면 56px 짜리 오버레이가 뜬다(오버레이는 이미 숨어 있으므로 접을 것이 없다).
+     * 그래서 hovering 일 때는 레일 모드를 켜지 않는다. 모바일도 같다 — 거기서는 오버레이가 답이다.
+     */
+    const railMode = rail && orientation == 'portrait' && !hovering && !isMobileDevice();
+    /*
+     * 서랍인가 — 화면 위에 겹쳐 떴다가 닫히는 메뉴.
+     *
+     * 그때 최상위를 누르면 **이동하지 않고 펼치기만** 해야 한다. 이동하면 서랍이 닫혀 그 묶음의
+     * 나머지 하위를 볼 기회가 없다 — 휴대폰에서 「작업」을 누르면 작업지시로 튀고 나머지 다섯은
+     * 못 본다.
+     *
+     * 판단은 여기서 한다 — 메뉴 부품은 자기가 오버레이에 떠 있는지 모른다.
+     */
+    const drawerMode = orientation == 'portrait' && (hovering || isMobileDevice());
     appendViewpart({
         name: 'ox-menu-part',
         viewpart: {
             show: !hovering,
-            resizable: true,
+            resizable,
             hovering: isMobileDevice() ? true : hovering,
-            template: html ` <ox-menu-part .orientation=${orientation}>${orientatedSlotTemplate}</ox-menu-part> `
+            template: html `
+        <ox-menu-part .orientation=${orientation} ?rail=${railMode} ?drawer=${drawerMode}
+          >${orientatedSlotTemplate}</ox-menu-part
+        >
+      `
         },
         position
     });
@@ -60,13 +115,45 @@ export async function setupMenuPart(options) {
         }
     }
 }
-export async function updateMenuTemplate(template) {
-    await fetchAddonMenus();
+/**
+ * 프로필이 도착했나.
+ *
+ * `hasPrivilege` 는 프로필을 **기다린다**. 로그인 전에 부르면 거기서 멈추고, 멈추면 메뉴가 아예
+ * 안 그려진다 — 앱은 로그인 전에도 메뉴를 한 번 넣는다.
+ *
+ * 그래서 도착 여부를 여기서 들고, 도착 전에는 권한이 걸린 항목을 **빼고** 그린다. 도착하면 다시
+ * 그린다(아래 구독). 「모른다」를 「된다」로 접지 않는다.
+ */
+var profileSeen = false;
+var lastTemplate = null;
+auth.on('profile', () => {
+    profileSeen = true;
+    /* 누가 들어왔는지 알고 나서 다시 거른다 — 로그인·로그아웃·도메인 전환이 모두 여기로 온다. */
+    if (lastTemplate) {
+        dispatchMenuTemplate(lastTemplate);
+    }
+});
+/**
+ * 쓸 수 있는 것만 남겨 넣는다.
+ *
+ * 규칙은 `@operato/menu` 가 든다(`permittedMenus`) — 두 제품이 같이 쓰고 시험으로 못박혀 있다.
+ * 여기서는 **누가 무엇을 가졌나**만 답한다.
+ */
+async function dispatchMenuTemplate(template) {
     store.dispatch({
         type: UPDATE_MENU_TEMPLATE,
-        template
+        template: Array.isArray(template)
+            ? await permittedMenus(template, async (requirement) => 
+            /* 프로필을 아직 못 봤으면 묻지 않는다 — 물으면 거기서 멈춘다. */
+            profileSeen ? Boolean(await hasPrivilege(requirement)) : false)
+            : template
     });
 }
+export async function updateMenuTemplate(template) {
+    await fetchAddonMenus();
+    lastTemplate = template;
+    await dispatchMenuTemplate(template);
+}
 export async function fetchAddonMenus() {
     var applicationName = document.querySelector('meta[name="application-name"]')?.content;
     var liteMenus = (await client.query({

package/dist-client/actions/lite-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"lite-menu.js","sourceRoot":"","sources":["../../client/actions/lite-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/menu/ox-menu-part.js'\n\nimport gql from 'graphql-tag'\nimport { html } from 'lit'\n\nimport { store, InheritedValueType, clientSettingStore } from '@operato/shell'\nimport { client } from '@operato/graphql'\nimport { appendViewpart, toggleOverlay, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout'\nimport { isMobileDevice } from '@operato/utils'\n\nimport { APPEND_APP_TOOL, REMOVE_APP_TOOL } from '@things-factory/apptool-base/client'\n\nexport const UPDATE_ADDON_MENUS = 'UPDATE_ADDON_MENUS'\nexport const UPDATE_MENU_TEMPLATE = 'UPDATE_MENU_TEMPLATE'\n\nvar HAMBURGER\n\nexport async function setupMenuPart(options) {\n  var {\n    hovering = isMobileDevice() ? true : false,\n    slotTemplate,\n    portraitSlotTemplate,\n    landscapeSlotTemplate,\n    position = VIEWPART_POSITION.NAVBAR\n  } = options || {}\n\n  const { hovering: hoveringSetting } = (await clientSettingStore.get('lite-menu'))?.value || {}\n  if (hoveringSetting !== undefined) {\n    hovering = hoveringSetting\n  }\n\n  const orientation = position == VIEWPART_POSITION.HEADERBAR ? 'landscape' : 'portrait'\n  const orientatedSlotTemplate =\n    (orientation == 'landscape' ? landscapeSlotTemplate : portraitSlotTemplate) || slotTemplate || html``\n\n  appendViewpart({\n    name: 'ox-menu-part',\n    viewpart: {\n      show: !hovering,\n      resizable: true,\n      hovering: isMobileDevice() ? true : hovering,\n      template: html` <ox-menu-part .orientation=${orientation}>${orientatedSlotTemplate}</ox-menu-part> `\n    },\n    position\n  })\n\n  // hovering이 true거나 모바일 일때는 계속 햄버거 버튼 표시\n  if ((hovering || isMobileDevice()) && orientation == 'portrait') {\n    if (!HAMBURGER) {\n      HAMBURGER = {\n        name: 'hamburger',\n        template: html`\n          <md-icon\n            @click=${e =>\n              toggleOverlay('ox-menu-part', {\n                backdrop: true\n              })}\n            >view_headline</md-icon\n          >\n        `,\n        position: TOOL_POSITION.FRONT_END\n      }\n\n      store.dispatch({\n        /* incase of mobile : add hamburger tool */\n        type: APPEND_APP_TOOL,\n        tool: HAMBURGER\n      })\n    }\n  } else {\n    if (HAMBURGER) {\n      store.dispatch({\n        type: REMOVE_APP_TOOL,\n        name: 'hamburger'\n      })\n\n      HAMBURGER = null\n    }\n  }\n}\n\nexport async function updateMenuTemplate(template) {\n  await fetchAddonMenus()\n\n  store.dispatch({\n    type: UPDATE_MENU_TEMPLATE,\n    template\n  })\n}\n\nexport async function fetchAddonMenus() {\n  var applicationName = (document.querySelector('meta[name=\"application-name\"]') as HTMLMetaElement)?.content\n\n  var liteMenus = (\n    await client.query({\n      query: gql`\n        query ($filters: [Filter!], $inherited: InheritedValueType) {\n          liteMenus: myLiteMenus(filters: $filters, inherited: $inherited) {\n            items {\n              id\n              name\n              label\n              description\n              appName\n              parent\n              rank\n              active\n              type\n              value\n              icon\n              help\n            }\n            total\n          }\n        }\n      `,\n      variables: {\n        filters: [\n          {\n            name: 'active',\n            operator: 'eq',\n            value: true\n          },\n          {\n            name: 'appName',\n            operator: 'in',\n            value: ['', applicationName]\n          }\n        ],\n        sortings: [\n          {\n            name: 'rank',\n            desc: false\n          }\n        ],\n        inherited: InheritedValueType.Include\n      }\n    })\n  ).data.liteMenus.items\n\n  store.dispatch({\n    type: UPDATE_ADDON_MENUS,\n    addon: liteMenus.filter(menu => !menu.appName || menu.appName === applicationName)\n  })\n}\n"]}
+{"version":3,"file":"lite-menu.js","sourceRoot":"","sources":["../../client/actions/lite-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/menu/ox-menu-part.js'\nimport { permittedMenus } from '@operato/menu'\n\nimport gql from 'graphql-tag'\nimport { html } from 'lit'\n\nimport { store, InheritedValueType, clientSettingStore } from '@operato/shell'\nimport { client } from '@operato/graphql'\nimport { appendViewpart, toggleOverlay, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout'\nimport { isMobileDevice } from '@operato/utils'\n\nimport { APPEND_APP_TOOL, REMOVE_APP_TOOL } from '@things-factory/apptool-base/client'\nimport { auth, hasPrivilege } from '@things-factory/auth-base/dist-client'\n\nexport const UPDATE_ADDON_MENUS = 'UPDATE_ADDON_MENUS'\nexport const UPDATE_MENU_TEMPLATE = 'UPDATE_MENU_TEMPLATE'\n\nvar HAMBURGER\n\n/**\n * 앱이 마지막으로 준 옵션.\n *\n * ── 왜 기억해야 하나 ─────────────────────────────────────────────────────────\n * 이 함수는 앱의 부팅에서 한 번만 불리는 것이 아니다. **설정 화면이 다시 부른다** —\n * `lite-menu-setting-let` 은 메뉴 감추기를 켜고 끌 때 `setupMenuPart({ hovering })` 만 넘긴다.\n *\n * 그때 앱이 처음 준 것들이 사라졌다. `rail` 이 빠지면 레일 모드가 꺼지고, `slotTemplate` 이\n * 빠지면 앱이 메뉴에 붙여 둔 것이 없어진다(dataset · gangsters 가 그것을 준다).\n *\n * 설정 화면은 **자기가 바꾸는 것만** 알면 되는 것이 맞다. 나머지를 기억하는 것은 이쪽 일이다.\n */\nvar lastOptions: any = {}\n\nexport async function setupMenuPart(options?) {\n  /* 준 것만 덮어쓴다 — 안 준 것은 앞의 값을 그대로 쓴다. */\n  lastOptions = { ...lastOptions, ...(options || {}) }\n  options = lastOptions\n\n  var {\n    hovering = isMobileDevice() ? true : false,\n    slotTemplate,\n    portraitSlotTemplate,\n    landscapeSlotTemplate,\n    position = VIEWPART_POSITION.NAVBAR,\n    /*\n     * 레일 모드 — 접을 수 있고, 접히면 하위가 팝업으로 뜬다.\n     *\n     * 앱이 켜야 한다. 켜지 않은 앱은 지금과 한 글자도 다르지 않다.\n     */\n    rail = false,\n    /**\n     * 오른쪽 끝을 끌어 메뉴 폭을 바꿀 수 있나.\n     *\n     * **기본은 그대로 둔다** — 이 함수를 쓰는 앱이 다섯이고, 말없이 끄면 그 앱들의 화면이 함께\n     * 바뀐다. 끄고 싶은 앱이 셋업에서 끈다.\n     *\n     * 레일 모드에서는 폭이 두 값(208 · 56)뿐이고 접기 단추가 그 사이를 오간다. 그 위에 자유\n     * 조절까지 두면 「내가 정한 폭」과 「접기가 정한 폭」이 서로를 덮어쓴다.\n     */\n    resizable = true\n  } = options || {}\n\n  const { hovering: hoveringSetting } = (await clientSettingStore.get('lite-menu'))?.value || {}\n  if (hoveringSetting !== undefined) {\n    hovering = hoveringSetting\n  }\n\n  const orientation = position == VIEWPART_POSITION.HEADERBAR ? 'landscape' : 'portrait'\n  const orientatedSlotTemplate =\n    (orientation == 'landscape' ? landscapeSlotTemplate : portraitSlotTemplate) || slotTemplate || html``\n\n  /*\n   * 접기와 hovering 은 **같은 요구에 대한 두 답**이다 — 화면을 넓게 쓰고 싶다는 것.\n   *\n   * 둘이 함께 켜지면 56px 짜리 오버레이가 뜬다(오버레이는 이미 숨어 있으므로 접을 것이 없다).\n   * 그래서 hovering 일 때는 레일 모드를 켜지 않는다. 모바일도 같다 — 거기서는 오버레이가 답이다.\n   */\n  const railMode = rail && orientation == 'portrait' && !hovering && !isMobileDevice()\n\n  /*\n   * 서랍인가 — 화면 위에 겹쳐 떴다가 닫히는 메뉴.\n   *\n   * 그때 최상위를 누르면 **이동하지 않고 펼치기만** 해야 한다. 이동하면 서랍이 닫혀 그 묶음의\n   * 나머지 하위를 볼 기회가 없다 — 휴대폰에서 「작업」을 누르면 작업지시로 튀고 나머지 다섯은\n   * 못 본다.\n   *\n   * 판단은 여기서 한다 — 메뉴 부품은 자기가 오버레이에 떠 있는지 모른다.\n   */\n  const drawerMode = orientation == 'portrait' && (hovering || isMobileDevice())\n\n  appendViewpart({\n    name: 'ox-menu-part',\n    viewpart: {\n      show: !hovering,\n      resizable,\n      hovering: isMobileDevice() ? true : hovering,\n      template: html`\n        <ox-menu-part .orientation=${orientation} ?rail=${railMode} ?drawer=${drawerMode}\n          >${orientatedSlotTemplate}</ox-menu-part\n        >\n      `\n    },\n    position\n  })\n\n  // hovering이 true거나 모바일 일때는 계속 햄버거 버튼 표시\n  if ((hovering || isMobileDevice()) && orientation == 'portrait') {\n    if (!HAMBURGER) {\n      HAMBURGER = {\n        name: 'hamburger',\n        template: html`\n          <md-icon\n            @click=${e =>\n              toggleOverlay('ox-menu-part', {\n                backdrop: true\n              })}\n            >view_headline</md-icon\n          >\n        `,\n        position: TOOL_POSITION.FRONT_END\n      }\n\n      store.dispatch({\n        /* incase of mobile : add hamburger tool */\n        type: APPEND_APP_TOOL,\n        tool: HAMBURGER\n      })\n    }\n  } else {\n    if (HAMBURGER) {\n      store.dispatch({\n        type: REMOVE_APP_TOOL,\n        name: 'hamburger'\n      })\n\n      HAMBURGER = null\n    }\n  }\n}\n\n/**\n * 프로필이 도착했나.\n *\n * `hasPrivilege` 는 프로필을 **기다린다**. 로그인 전에 부르면 거기서 멈추고, 멈추면 메뉴가 아예\n * 안 그려진다 — 앱은 로그인 전에도 메뉴를 한 번 넣는다.\n *\n * 그래서 도착 여부를 여기서 들고, 도착 전에는 권한이 걸린 항목을 **빼고** 그린다. 도착하면 다시\n * 그린다(아래 구독). 「모른다」를 「된다」로 접지 않는다.\n */\nvar profileSeen = false\nvar lastTemplate: any = null\n\nauth.on('profile', () => {\n  profileSeen = true\n\n  /* 누가 들어왔는지 알고 나서 다시 거른다 — 로그인·로그아웃·도메인 전환이 모두 여기로 온다. */\n  if (lastTemplate) {\n    dispatchMenuTemplate(lastTemplate)\n  }\n})\n\n/**\n * 쓸 수 있는 것만 남겨 넣는다.\n *\n * 규칙은 `@operato/menu` 가 든다(`permittedMenus`) — 두 제품이 같이 쓰고 시험으로 못박혀 있다.\n * 여기서는 **누가 무엇을 가졌나**만 답한다.\n */\nasync function dispatchMenuTemplate(template) {\n  store.dispatch({\n    type: UPDATE_MENU_TEMPLATE,\n    template: Array.isArray(template)\n      ? await permittedMenus(template, async requirement =>\n          /* 프로필을 아직 못 봤으면 묻지 않는다 — 물으면 거기서 멈춘다. */\n          profileSeen ? Boolean(await hasPrivilege(requirement)) : false\n        )\n      : template\n  })\n}\n\nexport async function updateMenuTemplate(template) {\n  await fetchAddonMenus()\n\n  lastTemplate = template\n\n  await dispatchMenuTemplate(template)\n}\n\nexport async function fetchAddonMenus() {\n  var applicationName = (document.querySelector('meta[name=\"application-name\"]') as HTMLMetaElement)?.content\n\n  var liteMenus = (\n    await client.query({\n      query: gql`\n        query ($filters: [Filter!], $inherited: InheritedValueType) {\n          liteMenus: myLiteMenus(filters: $filters, inherited: $inherited) {\n            items {\n              id\n              name\n              label\n              description\n              appName\n              parent\n              rank\n              active\n              type\n              value\n              icon\n              help\n            }\n            total\n          }\n        }\n      `,\n      variables: {\n        filters: [\n          {\n            name: 'active',\n            operator: 'eq',\n            value: true\n          },\n          {\n            name: 'appName',\n            operator: 'in',\n            value: ['', applicationName]\n          }\n        ],\n        sortings: [\n          {\n            name: 'rank',\n            desc: false\n          }\n        ],\n        inherited: InheritedValueType.Include\n      }\n    })\n  ).data.liteMenus.items\n\n  store.dispatch({\n    type: UPDATE_ADDON_MENUS,\n    addon: liteMenus.filter(menu => !menu.appName || menu.appName === applicationName)\n  })\n}\n"]}

package/dist-client/lite-menu-setting-let.js

@@ -35,7 +35,11 @@ let LiteMenuSettingLet = class LiteMenuSettingLet extends localize(i18next)(LitE
               ?checked=${checked}
               ?indeterminate=${indeterminate}
             ></md-checkbox>
-            hovering
+            <!--
+              「hovering」은 이 코드가 그 거동을 부르는 이름이고 사용자의 말이 아니다. 무슨 일이
+              일어나는지 문장으로 말한다 — 켜면 메뉴가 화면에서 사라지고 햄버거로 열린다.
+            -->
+            <ox-i18n msgid="text.hide-menu-until-needed"></ox-i18n>
           </label>
         </div>
       </setting-let>

package/dist-client/lite-menu-setting-let.js.map

@@ -1 +1 @@
-{"version":3,"file":"lite-menu-setting-let.js","sourceRoot":"","sources":["../client/lite-menu-setting-let.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAS,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAG5C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aAC5D,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;KAUF;KACF,AAZY,CAYZ;IAID,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAA;QACtC,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAA;QAEjD,OAAO,IAAI,CAAA;;;;;;;;wBAQS,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;yBACpB,OAAO;+BACD,aAAa;;;;;;KAMvC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM,kBAAkB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAA;IACrF,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,CAAQ;QACrB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;YAC3B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;QACvB,CAAC;aAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE,CAAC;YACnC,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;QAC3B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;QACtB,CAAC;QAED,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,CAAC,MAAM,kBAAkB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,IAAI,EAAE,CAAA;QAC7F,IAAI,IAAI,CAAC,QAAQ,KAAK,cAAc,EAAE,CAAC;YACrC,OAAM;QACR,CAAC;QAED,IAAI,CAAC;YACH,MAAM,kBAAkB,CAAC,GAAG,CAAC;gBAC3B,GAAG,EAAE,WAAW;gBAChB,KAAK,EAAE;oBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;aACF,CAAC,CAAA;QACJ,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;QAClB,CAAC;QAED,aAAa,CAAC;YACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;IACJ,CAAC;;AAzD4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;oDAAmB;AAfpC,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAyE9B","sourcesContent":["import '@operato/i18n/ox-i18n.js'\nimport '@material/web/checkbox/checkbox.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query, property, state } from 'lit/decorators.js'\n\nimport { clientSettingStore } from '@operato/shell'\nimport { i18next, localize } from '@operato/i18n'\n\nimport { setupMenuPart } from './actions/lite-menu'\n\n@customElement('lite-menu-setting-let')\nexport class LiteMenuSettingLet extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      label {\n        display: flex;\n        gap: 10px;\n        align-items: center;\n\n        font: var(--label-font);\n        color: var(--md-sys-color-on-primary-container);\n        text-transform: var(--label-text-transform);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) hovering?: boolean\n\n  render() {\n    const checked = this.hovering === true\n    const indeterminate = this.hovering === undefined\n\n    return html`\n      <setting-let>\n        <ox-i18n slot=\"title\" msgid=\"title.lite-menu-setting\"></ox-i18n>\n\n        <div slot=\"content\">\n          <label>\n            <md-checkbox\n              id=\"hovering\"\n              @change=${e => this.onChange(e)}\n              ?checked=${checked}\n              ?indeterminate=${indeterminate}\n            ></md-checkbox>\n            hovering\n          </label>\n        </div>\n      </setting-let>\n    `\n  }\n\n  async firstUpdated() {\n    this.hovering = ((await clientSettingStore.get('lite-menu'))?.value || {}).hovering\n  }\n\n  async onChange(e: Event) {\n    if (this.hovering === true) {\n      this.hovering = false\n    } else if (this.hovering === false) {\n      this.hovering = undefined\n    } else {\n      this.hovering = true\n    }\n\n    const { hovering: valueFromStore } = (await clientSettingStore.get('lite-menu'))?.value || {}\n    if (this.hovering === valueFromStore) {\n      return\n    }\n\n    try {\n      await clientSettingStore.put({\n        key: 'lite-menu',\n        value: {\n          hovering: this.hovering\n        }\n      })\n    } catch (e) {\n      console.error(e)\n    }\n\n    setupMenuPart({\n      hovering: this.hovering\n    })\n  }\n}\n"]}
+{"version":3,"file":"lite-menu-setting-let.js","sourceRoot":"","sources":["../client/lite-menu-setting-let.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAS,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAG5C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aAC5D,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;KAUF;KACF,AAZY,CAYZ;IAID,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAA;QACtC,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAA;QAEjD,OAAO,IAAI,CAAA;;;;;;;;wBAQS,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;yBACpB,OAAO;+BACD,aAAa;;;;;;;;;;KAUvC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM,kBAAkB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAA;IACrF,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,CAAQ;QACrB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;YAC3B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;QACvB,CAAC;aAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE,CAAC;YACnC,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;QAC3B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;QACtB,CAAC;QAED,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,CAAC,MAAM,kBAAkB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,IAAI,EAAE,CAAA;QAC7F,IAAI,IAAI,CAAC,QAAQ,KAAK,cAAc,EAAE,CAAC;YACrC,OAAM;QACR,CAAC;QAED,IAAI,CAAC;YACH,MAAM,kBAAkB,CAAC,GAAG,CAAC;gBAC3B,GAAG,EAAE,WAAW;gBAChB,KAAK,EAAE;oBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;aACF,CAAC,CAAA;QACJ,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;QAClB,CAAC;QAED,aAAa,CAAC;YACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;IACJ,CAAC;;AA7D4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;oDAAmB;AAfpC,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CA6E9B","sourcesContent":["import '@operato/i18n/ox-i18n.js'\nimport '@material/web/checkbox/checkbox.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query, property, state } from 'lit/decorators.js'\n\nimport { clientSettingStore } from '@operato/shell'\nimport { i18next, localize } from '@operato/i18n'\n\nimport { setupMenuPart } from './actions/lite-menu'\n\n@customElement('lite-menu-setting-let')\nexport class LiteMenuSettingLet extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      label {\n        display: flex;\n        gap: 10px;\n        align-items: center;\n\n        font: var(--label-font);\n        color: var(--md-sys-color-on-primary-container);\n        text-transform: var(--label-text-transform);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) hovering?: boolean\n\n  render() {\n    const checked = this.hovering === true\n    const indeterminate = this.hovering === undefined\n\n    return html`\n      <setting-let>\n        <ox-i18n slot=\"title\" msgid=\"title.lite-menu-setting\"></ox-i18n>\n\n        <div slot=\"content\">\n          <label>\n            <md-checkbox\n              id=\"hovering\"\n              @change=${e => this.onChange(e)}\n              ?checked=${checked}\n              ?indeterminate=${indeterminate}\n            ></md-checkbox>\n            <!--\n              「hovering」은 이 코드가 그 거동을 부르는 이름이고 사용자의 말이 아니다. 무슨 일이\n              일어나는지 문장으로 말한다 — 켜면 메뉴가 화면에서 사라지고 햄버거로 열린다.\n            -->\n            <ox-i18n msgid=\"text.hide-menu-until-needed\"></ox-i18n>\n          </label>\n        </div>\n      </setting-let>\n    `\n  }\n\n  async firstUpdated() {\n    this.hovering = ((await clientSettingStore.get('lite-menu'))?.value || {}).hovering\n  }\n\n  async onChange(e: Event) {\n    if (this.hovering === true) {\n      this.hovering = false\n    } else if (this.hovering === false) {\n      this.hovering = undefined\n    } else {\n      this.hovering = true\n    }\n\n    const { hovering: valueFromStore } = (await clientSettingStore.get('lite-menu'))?.value || {}\n    if (this.hovering === valueFromStore) {\n      return\n    }\n\n    try {\n      await clientSettingStore.put({\n        key: 'lite-menu',\n        value: {\n          hovering: this.hovering\n        }\n      })\n    } catch (e) {\n      console.error(e)\n    }\n\n    setupMenuPart({\n      hovering: this.hovering\n    })\n  }\n}\n"]}