@things-factory/auth-ui 7.0.0-alpha.8 → 7.0.0

package/dist-client/index.js

@@ -1,86 +1,94 @@
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import '@operato/i18n/ox-i18n.js';
 import { html } from 'lit-html';
 import { navigate, store } from '@operato/shell';
-import { ADD_MORENDA } from '@things-factory/more-base';
+import { ADD_MORENDA } from '@things-factory/more-base/client';
 import { hasPrivilege } from '@things-factory/auth-base/dist-client';
 export * from './components/role-selector.js';
 export * from './components/domain-switch.js';
 export * from './components/invite-user.js';
-export async function setAuthManagementMenus() {
+export async function setAuthManagementMenus(options) {
+    const { role = true, appliance = true, application = true, user = true, authProvider = true, domain = true, attribute = true } = options || {};
     if (await hasPrivilege({ privilege: 'mutation', category: 'user', domainOwnerGranted: true, superUserGranted: true })) {
-        store.dispatch({
-            type: ADD_MORENDA,
-            morenda: {
-                icon: html ` <mwc-icon>how_to_reg</mwc-icon> `,
-                name: html ` <ox-i18n msgid="text.role_management"></ox-i18n> `,
-                action: () => {
-                    navigate('roles');
+        role &&
+            store.dispatch({
+                type: ADD_MORENDA,
+                morenda: {
+                    icon: html ` <md-icon>how_to_reg</md-icon> `,
+                    name: html ` <ox-i18n msgid="text.role_management"></ox-i18n> `,
+                    action: () => {
+                        navigate('roles');
+                    }
                 }
-            }
-        });
-        store.dispatch({
-            type: ADD_MORENDA,
-            morenda: {
-                icon: html ` <mwc-icon>devices</mwc-icon> `,
-                name: html ` <ox-i18n msgid="text.appliance"></ox-i18n> `,
-                action: () => {
-                    navigate('appliance-home');
+            });
+        appliance &&
+            store.dispatch({
+                type: ADD_MORENDA,
+                morenda: {
+                    icon: html ` <md-icon>devices</md-icon> `,
+                    name: html ` <ox-i18n msgid="text.appliance"></ox-i18n> `,
+                    action: () => {
+                        navigate('appliance-home');
+                    }
                 }
-            }
-        });
-        store.dispatch({
-            type: ADD_MORENDA,
-            morenda: {
-                icon: html ` <mwc-icon>apps</mwc-icon> `,
-                name: html ` <ox-i18n msgid="text.application management"></ox-i18n> `,
-                action: () => {
-                    navigate('applications');
+            });
+        application &&
+            store.dispatch({
+                type: ADD_MORENDA,
+                morenda: {
+                    icon: html ` <md-icon>apps</md-icon> `,
+                    name: html ` <ox-i18n msgid="text.application management"></ox-i18n> `,
+                    action: () => {
+                        navigate('applications');
+                    }
                 }
-            }
-        });
-        store.dispatch({
-            type: ADD_MORENDA,
-            morenda: {
-                icon: html ` <mwc-icon>people</mwc-icon> `,
-                name: html ` <ox-i18n msgid="text.user management"></ox-i18n> `,
-                action: () => {
-                    navigate('users');
+            });
+        user &&
+            store.dispatch({
+                type: ADD_MORENDA,
+                morenda: {
+                    icon: html ` <md-icon>people</md-icon> `,
+                    name: html ` <ox-i18n msgid="text.user management"></ox-i18n> `,
+                    action: () => {
+                        navigate('users');
+                    }
                 }
-            }
-        });
-        store.dispatch({
-            type: ADD_MORENDA,
-            morenda: {
-                icon: html ` <mwc-icon>badge</mwc-icon> `,
-                name: html ` <ox-i18n msgid="text.auth-provider management"></ox-i18n> `,
-                action: () => {
-                    navigate('auth-providers');
+            });
+        authProvider &&
+            store.dispatch({
+                type: ADD_MORENDA,
+                morenda: {
+                    icon: html ` <md-icon>badge</md-icon> `,
+                    name: html ` <ox-i18n msgid="text.auth-provider management"></ox-i18n> `,
+                    action: () => {
+                        navigate('auth-providers');
+                    }
                 }
-            }
-        });
+            });
     }
     if (await hasPrivilege({ superUserGranted: true })) {
-        store.dispatch({
-            type: ADD_MORENDA,
-            morenda: {
-                icon: html ` <mwc-icon>business</mwc-icon> `,
-                name: html ` <ox-i18n msgid="text.domain management"></ox-i18n> `,
-                action: () => {
-                    navigate('domains');
+        domain &&
+            store.dispatch({
+                type: ADD_MORENDA,
+                morenda: {
+                    icon: html ` <md-icon>business</md-icon> `,
+                    name: html ` <ox-i18n msgid="text.domain management"></ox-i18n> `,
+                    action: () => {
+                        navigate('domains');
+                    }
                 }
-            }
-        });
-        store.dispatch({
-            type: ADD_MORENDA,
-            morenda: {
-                icon: html ` <mwc-icon>dataset</mwc-icon> `,
-                name: html ` <ox-i18n msgid="text.attribute management"></ox-i18n> `,
-                action: () => {
-                    navigate('attributes');
+            });
+        attribute &&
+            store.dispatch({
+                type: ADD_MORENDA,
+                morenda: {
+                    icon: html ` <md-icon>dataset</md-icon> `,
+                    name: html ` <ox-i18n msgid="text.attribute management"></ox-i18n> `,
+                    action: () => {
+                        navigate('attributes');
+                    }
                 }
-            }
-        });
+            });
     }
 }
 //# sourceMappingURL=index.js.map

package/dist-client/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit-html'\n\nimport { navigate, store } from '@operato/shell'\nimport { ADD_MORENDA } from '@things-factory/more-base'\nimport { hasPrivilege } from '@things-factory/auth-base/dist-client'\n\nexport * from './components/role-selector.js'\nexport * from './components/domain-switch.js'\nexport * from './components/invite-user.js'\n\nexport async function setAuthManagementMenus() {\n  if (\n    await hasPrivilege({ privilege: 'mutation', category: 'user', domainOwnerGranted: true, superUserGranted: true })\n  ) {\n    store.dispatch({\n      type: ADD_MORENDA,\n      morenda: {\n        icon: html` <mwc-icon>how_to_reg</mwc-icon> `,\n        name: html` <ox-i18n msgid=\"text.role_management\"></ox-i18n> `,\n        action: () => {\n          navigate('roles')\n        }\n      }\n    })\n\n    store.dispatch({\n      type: ADD_MORENDA,\n      morenda: {\n        icon: html` <mwc-icon>devices</mwc-icon> `,\n        name: html` <ox-i18n msgid=\"text.appliance\"></ox-i18n> `,\n        action: () => {\n          navigate('appliance-home')\n        }\n      }\n    })\n\n    store.dispatch({\n      type: ADD_MORENDA,\n      morenda: {\n        icon: html` <mwc-icon>apps</mwc-icon> `,\n        name: html` <ox-i18n msgid=\"text.application management\"></ox-i18n> `,\n        action: () => {\n          navigate('applications')\n        }\n      }\n    })\n\n    store.dispatch({\n      type: ADD_MORENDA,\n      morenda: {\n        icon: html` <mwc-icon>people</mwc-icon> `,\n        name: html` <ox-i18n msgid=\"text.user management\"></ox-i18n> `,\n        action: () => {\n          navigate('users')\n        }\n      }\n    })\n\n    store.dispatch({\n      type: ADD_MORENDA,\n      morenda: {\n        icon: html` <mwc-icon>badge</mwc-icon> `,\n        name: html` <ox-i18n msgid=\"text.auth-provider management\"></ox-i18n> `,\n        action: () => {\n          navigate('auth-providers')\n        }\n      }\n    })\n  }\n\n  if (await hasPrivilege({ superUserGranted: true })) {\n    store.dispatch({\n      type: ADD_MORENDA,\n      morenda: {\n        icon: html` <mwc-icon>business</mwc-icon> `,\n        name: html` <ox-i18n msgid=\"text.domain management\"></ox-i18n> `,\n        action: () => {\n          navigate('domains')\n        }\n      }\n    })\n\n    store.dispatch({\n      type: ADD_MORENDA,\n      morenda: {\n        icon: html` <mwc-icon>dataset</mwc-icon> `,\n        name: html` <ox-i18n msgid=\"text.attribute management\"></ox-i18n> `,\n        action: () => {\n          navigate('attributes')\n        }\n      }\n    })\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAA;AAEpE,cAAc,+BAA+B,CAAA;AAC7C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAY3C,MAAM,CAAC,KAAK,UAAU,sBAAsB,CAAC,OAAa;IACxD,MAAM,EACJ,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,IAAI,EAChB,WAAW,GAAG,IAAI,EAClB,IAAI,GAAG,IAAI,EACX,YAAY,GAAG,IAAI,EACnB,MAAM,GAAG,IAAI,EACb,SAAS,GAAG,IAAI,EACjB,GAAG,OAAO,IAAI,EAAE,CAAA;IAEjB,IACE,MAAM,YAAY,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,EACjH,CAAC;QACD,IAAI;YACF,KAAK,CAAC,QAAQ,CAAC;gBACb,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,IAAI,EAAE,IAAI,CAAA,iCAAiC;oBAC3C,IAAI,EAAE,IAAI,CAAA,oDAAoD;oBAC9D,MAAM,EAAE,GAAG,EAAE;wBACX,QAAQ,CAAC,OAAO,CAAC,CAAA;oBACnB,CAAC;iBACF;aACF,CAAC,CAAA;QAEJ,SAAS;YACP,KAAK,CAAC,QAAQ,CAAC;gBACb,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,IAAI,EAAE,IAAI,CAAA,8BAA8B;oBACxC,IAAI,EAAE,IAAI,CAAA,8CAA8C;oBACxD,MAAM,EAAE,GAAG,EAAE;wBACX,QAAQ,CAAC,gBAAgB,CAAC,CAAA;oBAC5B,CAAC;iBACF;aACF,CAAC,CAAA;QAEJ,WAAW;YACT,KAAK,CAAC,QAAQ,CAAC;gBACb,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,IAAI,EAAE,IAAI,CAAA,2BAA2B;oBACrC,IAAI,EAAE,IAAI,CAAA,2DAA2D;oBACrE,MAAM,EAAE,GAAG,EAAE;wBACX,QAAQ,CAAC,cAAc,CAAC,CAAA;oBAC1B,CAAC;iBACF;aACF,CAAC,CAAA;QAEJ,IAAI;YACF,KAAK,CAAC,QAAQ,CAAC;gBACb,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,IAAI,EAAE,IAAI,CAAA,6BAA6B;oBACvC,IAAI,EAAE,IAAI,CAAA,oDAAoD;oBAC9D,MAAM,EAAE,GAAG,EAAE;wBACX,QAAQ,CAAC,OAAO,CAAC,CAAA;oBACnB,CAAC;iBACF;aACF,CAAC,CAAA;QAEJ,YAAY;YACV,KAAK,CAAC,QAAQ,CAAC;gBACb,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,IAAI,EAAE,IAAI,CAAA,4BAA4B;oBACtC,IAAI,EAAE,IAAI,CAAA,6DAA6D;oBACvE,MAAM,EAAE,GAAG,EAAE;wBACX,QAAQ,CAAC,gBAAgB,CAAC,CAAA;oBAC5B,CAAC;iBACF;aACF,CAAC,CAAA;IACN,CAAC;IAED,IAAI,MAAM,YAAY,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;QACnD,MAAM;YACJ,KAAK,CAAC,QAAQ,CAAC;gBACb,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,IAAI,EAAE,IAAI,CAAA,+BAA+B;oBACzC,IAAI,EAAE,IAAI,CAAA,sDAAsD;oBAChE,MAAM,EAAE,GAAG,EAAE;wBACX,QAAQ,CAAC,SAAS,CAAC,CAAA;oBACrB,CAAC;iBACF;aACF,CAAC,CAAA;QAEJ,SAAS;YACP,KAAK,CAAC,QAAQ,CAAC;gBACb,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,IAAI,EAAE,IAAI,CAAA,8BAA8B;oBACxC,IAAI,EAAE,IAAI,CAAA,yDAAyD;oBACnE,MAAM,EAAE,GAAG,EAAE;wBACX,QAAQ,CAAC,YAAY,CAAC,CAAA;oBACxB,CAAC;iBACF;aACF,CAAC,CAAA;IACN,CAAC;AACH,CAAC","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit-html'\n\nimport { navigate, store } from '@operato/shell'\nimport { ADD_MORENDA } from '@things-factory/more-base/client'\nimport { hasPrivilege } from '@things-factory/auth-base/dist-client'\n\nexport * from './components/role-selector.js'\nexport * from './components/domain-switch.js'\nexport * from './components/invite-user.js'\n\nexport type AuthManagementMenuOptions = {\n  role?: boolean\n  appliance?: boolean\n  application?: boolean\n  user?: boolean\n  authProvider?: boolean\n  domain?: boolean\n  attribute?: boolean\n}\n\nexport async function setAuthManagementMenus(options?: any) {\n  const {\n    role = true,\n    appliance = true,\n    application = true,\n    user = true,\n    authProvider = true,\n    domain = true,\n    attribute = true\n  } = options || {}\n\n  if (\n    await hasPrivilege({ privilege: 'mutation', category: 'user', domainOwnerGranted: true, superUserGranted: true })\n  ) {\n    role &&\n      store.dispatch({\n        type: ADD_MORENDA,\n        morenda: {\n          icon: html` <md-icon>how_to_reg</md-icon> `,\n          name: html` <ox-i18n msgid=\"text.role_management\"></ox-i18n> `,\n          action: () => {\n            navigate('roles')\n          }\n        }\n      })\n\n    appliance &&\n      store.dispatch({\n        type: ADD_MORENDA,\n        morenda: {\n          icon: html` <md-icon>devices</md-icon> `,\n          name: html` <ox-i18n msgid=\"text.appliance\"></ox-i18n> `,\n          action: () => {\n            navigate('appliance-home')\n          }\n        }\n      })\n\n    application &&\n      store.dispatch({\n        type: ADD_MORENDA,\n        morenda: {\n          icon: html` <md-icon>apps</md-icon> `,\n          name: html` <ox-i18n msgid=\"text.application management\"></ox-i18n> `,\n          action: () => {\n            navigate('applications')\n          }\n        }\n      })\n\n    user &&\n      store.dispatch({\n        type: ADD_MORENDA,\n        morenda: {\n          icon: html` <md-icon>people</md-icon> `,\n          name: html` <ox-i18n msgid=\"text.user management\"></ox-i18n> `,\n          action: () => {\n            navigate('users')\n          }\n        }\n      })\n\n    authProvider &&\n      store.dispatch({\n        type: ADD_MORENDA,\n        morenda: {\n          icon: html` <md-icon>badge</md-icon> `,\n          name: html` <ox-i18n msgid=\"text.auth-provider management\"></ox-i18n> `,\n          action: () => {\n            navigate('auth-providers')\n          }\n        }\n      })\n  }\n\n  if (await hasPrivilege({ superUserGranted: true })) {\n    domain &&\n      store.dispatch({\n        type: ADD_MORENDA,\n        morenda: {\n          icon: html` <md-icon>business</md-icon> `,\n          name: html` <ox-i18n msgid=\"text.domain management\"></ox-i18n> `,\n          action: () => {\n            navigate('domains')\n          }\n        }\n      })\n\n    attribute &&\n      store.dispatch({\n        type: ADD_MORENDA,\n        morenda: {\n          icon: html` <md-icon>dataset</md-icon> `,\n          name: html` <ox-i18n msgid=\"text.attribute management\"></ox-i18n> `,\n          action: () => {\n            navigate('attributes')\n          }\n        }\n      })\n  }\n}\n"]}

package/dist-client/pages/app-binding/app-binding.d.ts

@@ -1 +1 @@
-export {};
+import '@material/web/icon/icon.js';

package/dist-client/pages/app-binding/app-binding.js

@@ -1,4 +1,5 @@
 import { __asyncGenerator, __await, __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
 import Clipboard from 'clipboard';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
@@ -25,7 +26,7 @@ let AppBinding = class AppBinding extends connect(store)(PageView) {
         var accessTokenExp = (_c = this._accessTokenInfo) === null || _c === void 0 ? void 0 : _c.exp;
         return html `
       <div>
-        <h2><mwc-icon>link</mwc-icon>&nbsp;${app.name}</h2>
+        <h2><md-icon>link</md-icon>&nbsp;${app.name}</h2>
         <p page-description>${app.description}</p>
       </div>
 
@@ -256,19 +257,22 @@ AppBinding.styles = [
 
         position: relative;
 
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
       }
+
       h2 {
         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
       }
+
       [page-description] {
         margin: var(--page-description-margin);
         font: var(--page-description-font);
         color: var(--page-description-color);
       }
+
       [icon] {
         position: absolute;
         top: 10px;
@@ -276,68 +280,77 @@ AppBinding.styles = [
 
         max-width: 80px;
       }
+
       [icon] img {
         max-width: 100%;
         max-height: 100%;
       }
 
-      label {
-        font: var(--label-font);
-        color: var(--label-color);
-        text-transform: var(--label-text-transform);
-      }
-      input {
-        border: var(--border-dark-color);
-        border-radius: var(--border-radius);
-        margin: var(--input-margin);
-        padding: var(--input-padding);
-        font: var(--input-font);
-
-        flex: 1;
-      }
-      select:focus,
-      input:focus,
-      button {
-        outline: none;
-      }
-      form {
-        max-width: var(--content-container-max-width);
-      }
       [fieldset-container] {
-        background-color: var(--theme-white-color);
-        margin: var(--margin-wide) 0 var(--margin-default) 0;
-        padding: var(--padding-default);
+        background-color: var(--md-sys-color-surface);
+        margin: var(--spacing-large) 0 var(--spacing-medium) 0;
+        padding: var(--spacing-medium);
         border-radius: var(--border-radius);
         box-shadow: var(--box-shadow);
+
+        label {
+          font: var(--label-font);
+          color: var(--label-color, var(--md-sys-color-on-surface));
+          text-transform: var(--label-text-transform);
+        }
+        input {
+          border: var(--border-dim-color);
+          border-radius: var(--border-radius);
+          margin: var(--input-margin);
+          padding: var(--input-padding);
+          font: var(--input-font);
+
+          flex: 1;
+        }
+        select:focus,
+        input:focus,
+        button {
+          outline: none;
+        }
+        form {
+          max-width: var(--content-container-max-width);
+        }
       }
+
       [fieldset-container] fieldset {
         margin: 0;
         margin-top: -15px;
       }
+
       fieldset {
         border-radius: var(--border-radius);
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         margin: var(--fieldset-margin);
         padding: var(--fieldset-padding);
       }
+
       legend {
         padding: var(--legend-padding);
         font-weight: bold;
         color: var(--legend-color);
       }
+
       [field-2column] {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-gap: 15px;
       }
+
       [field] {
         display: flex;
         flex-direction: column;
         position: relative;
       }
+
       [grid-span] {
         grid-column: span 2;
       }
+
       button,
       [button-in-field] {
         background-color: var(--button-background-color);
@@ -348,14 +361,16 @@ AppBinding.styles = [
         font: var(--button-font);
         text-transform: var(--button-text-transform);
 
-        margin: var(--margin-default) 0 var(--margin-default) var(--margin-default);
+        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
         float: right;
         text-decoration: none;
       }
+
       button:hover {
         border: var(--button-activ-border);
         box-shadow: var(--button-active-box-shadow);
       }
+
       [button-in-field] {
         border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
         position: absolute;
@@ -363,10 +378,12 @@ AppBinding.styles = [
         right: 0;
         max-height: 36px;
       }
+
       [input-hint] {
         font: var(--input-hint-font);
         color: var(--input-hint-color);
       }
+
       @media screen and (max-width: 480px) {
         [field] {
           grid-column: span 2;

package/dist-client/pages/app-binding/app-binding.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-binding.js","sourceRoot":"","sources":["../../../client/pages/app-binding/app-binding.ts"],"names":[],"mappings":"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","sourcesContent":["import Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\nimport { parseJwt, sleep } from '@operato/utils'\n\n@customElement('app-binding-page')\nclass AppBinding extends connect(store)(PageView) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow-y: auto;\n\n        position: relative;\n\n        background-color: var(--main-section-background-color);\n        padding: var(--padding-wide);\n      }\n      h2 {\n        margin: var(--title-margin);\n        font: var(--title-font);\n        color: var(--title-text-color);\n      }\n      [page-description] {\n        margin: var(--page-description-margin);\n        font: var(--page-description-font);\n        color: var(--page-description-color);\n      }\n      [icon] {\n        position: absolute;\n        top: 10px;\n        right: 10px;\n\n        max-width: 80px;\n      }\n      [icon] img {\n        max-width: 100%;\n        max-height: 100%;\n      }\n\n      label {\n        font: var(--label-font);\n        color: var(--label-color);\n        text-transform: var(--label-text-transform);\n      }\n      input {\n        border: var(--border-dark-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        font: var(--input-font);\n\n        flex: 1;\n      }\n      select:focus,\n      input:focus,\n      button {\n        outline: none;\n      }\n      form {\n        max-width: var(--content-container-max-width);\n      }\n      [fieldset-container] {\n        background-color: var(--theme-white-color);\n        margin: var(--margin-wide) 0 var(--margin-default) 0;\n        padding: var(--padding-default);\n        border-radius: var(--border-radius);\n        box-shadow: var(--box-shadow);\n      }\n      [fieldset-container] fieldset {\n        margin: 0;\n        margin-top: -15px;\n      }\n      fieldset {\n        border-radius: var(--border-radius);\n        border: var(--border-dark-color);\n        margin: var(--fieldset-margin);\n        padding: var(--fieldset-padding);\n      }\n      legend {\n        padding: var(--legend-padding);\n        font-weight: bold;\n        color: var(--legend-color);\n      }\n      [field-2column] {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        grid-gap: 15px;\n      }\n      [field] {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n      }\n      [grid-span] {\n        grid-column: span 2;\n      }\n      button,\n      [button-in-field] {\n        background-color: var(--button-background-color);\n        border: var(--button-border);\n        border-radius: var(--button-border-radius);\n        padding: var(--button-padding);\n        color: var(--button-color);\n        font: var(--button-font);\n        text-transform: var(--button-text-transform);\n\n        margin: var(--margin-default) 0 var(--margin-default) var(--margin-default);\n        float: right;\n        text-decoration: none;\n      }\n      button:hover {\n        border: var(--button-activ-border);\n        box-shadow: var(--button-active-box-shadow);\n      }\n      [button-in-field] {\n        border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;\n        position: absolute;\n        top: 12px;\n        right: 0;\n        max-height: 36px;\n      }\n      [input-hint] {\n        font: var(--input-hint-font);\n        color: var(--input-hint-color);\n      }\n      @media screen and (max-width: 480px) {\n        [field] {\n          grid-column: span 2;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) appbinding: any\n  @property({ type: String }) accessToken?: string\n\n  @state() _refreshTokenInfo: any\n  @state() _accessTokenInfo: any\n\n  private clipboard?: Clipboard\n\n  get context() {\n    return {\n      title: {\n        icon: 'link',\n        text: this.appbinding.name\n      }\n    }\n  }\n\n  render() {\n    var binding = this.appbinding || {}\n    var app = this.appbinding?.application || {}\n    var refreshTokenExp = this._refreshTokenInfo?.exp\n    var accessTokenExp = this._accessTokenInfo?.exp\n\n    return html`\n      <div>\n        <h2><mwc-icon>link</mwc-icon>&nbsp;${app.name}</h2>\n        <p page-description>${app.description}</p>\n      </div>\n\n      ${app.icon\n        ? html`\n            <div icon>\n              <img src=${app.icon} />\n            </div>\n          `\n        : html``}\n\n      <form>\n        <div fieldset-container>\n          <fieldset>\n            <legend>application</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"app-name\">app name</label>\n                <input id=\"app-name\" type=\"text\" .value=${app.name} readonly />\n              </div>\n\n              <div field grid-span>\n                <label for=\"app-description\">description</label>\n                <input id=\"app-description\" type=\"text\" .value=${app.description} readonly />\n              </div>\n\n              <div field>\n                <label for=\"contact-email\">contact email</label>\n                <input id=\"contact-email\" type=\"text\" .value=${app.email} readonly />\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <div fieldset-container>\n          <fieldset>\n            <legend>binding</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"id\">id</label>\n                <input id=\"id\" type=\"text\" .value=${binding.id} readonly />\n              </div>\n\n              <div field grid-span>\n                <label for=\"name\">name</label>\n                <input id=\"name\" type=\"text\" .value=${binding.email} readonly />\n              </div>\n\n              <div field>\n                <label for=\"status\">status</label>\n                <input id=\"status\" type=\"text\" .value=${binding.status} readonly />\n              </div>\n\n              <div field>\n                <label for=\"scope\">scope</label>\n                <input id=\"scope\" type=\"text\" .value=${binding.scope} readonly />\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <div fieldset-container>\n          <fieldset>\n            <legend>binding credential</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"access-token\">access token</label>\n                <input id=\"access-token\" type=\"text\" .value=${this.accessToken || ''} readonly />\n                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n                ${accessTokenExp\n                  ? html`<div input-hint>\n                      expired in ${new Date(accessTokenExp).toLocaleString()} :\n                      ${asyncReplace(this.expTimer(accessTokenExp))}\n                    </div>`\n                  : html``}\n              </div>\n\n              <div field grid-span>\n                <label for=\"refresh-token\">refresh token</label>\n                <input id=\"refresh-token\" type=\"text\" .value=${binding.refreshToken || ''} readonly />\n                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n                ${refreshTokenExp\n                  ? html`<div input-hint>\n                      expired in ${new Date(refreshTokenExp).toLocaleString()} :\n                      ${asyncReplace(this.expTimer(refreshTokenExp))}\n                    </div>`\n                  : html``}\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <button @click=${this.deleteAppBinding.bind(this)}>delete this application binding</button>\n        <button @click=${this.renewApplicationAccessToken.bind(this)}>renew access token</button>\n      </form>\n    `\n  }\n\n  async *expTimer(exp) {\n    const DAY = 24 * 60 * 60\n    const HOUR = 60 * 60\n    const MIN = 60\n\n    while (this.active) {\n      var remain = Math.floor(Number(exp) - Date.now() / 1000)\n      const days = Math.floor(remain / DAY)\n      remain -= days * DAY\n      const hours = Math.floor(remain / HOUR)\n      remain -= hours * HOUR\n      const mins = Math.floor(remain / MIN)\n      const secs = remain - mins * MIN\n\n      yield `${days} days ${hours} hours ${mins} mins ${secs} seconds remain`\n\n      await sleep(1000)\n    }\n  }\n\n  firstUpdated() {\n    const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]')\n\n    this.clipboard = new Clipboard(copybuttons, {\n      target: (trigger => trigger.parentElement.querySelector('input')) as any\n    })\n  }\n\n  updated(changes) {\n    /*\n     * If this page properties are changed, this callback will be invoked.\n     * This callback will be called back only when this page is activated.\n     */\n    if (changes.has('appbinding')) {\n      const { refreshToken } = this.appbinding || {}\n      this._refreshTokenInfo = refreshToken ? parseJwt(refreshToken) : {}\n    }\n\n    if (changes.has('accessToken')) {\n      this._accessTokenInfo = this.accessToken ? parseJwt(this.accessToken) : {}\n    }\n  }\n\n  async pageUpdated(changes, lifecycle, before) {\n    if (this.active) {\n      /*\n       * this page is activated\n       */\n      await this.fetchAppBinding()\n    } else {\n      /* this page is deactivated */\n    }\n  }\n\n  async fetchAppBinding() {\n    const response = await client.query({\n      query: gql`\n        query ($id: String!) {\n          appBinding(id: $id) {\n            id\n            name\n            description\n            email\n            scope\n            status\n            application {\n              id\n              name\n              description\n              email\n              icon\n            }\n            refreshToken\n          }\n        }\n      `,\n      variables: {\n        id: this.lifecycle.resourceId\n      }\n    })\n\n    this.appbinding = response.data.appBinding\n  }\n\n  async deleteAppBinding(e) {\n    e.preventDefault()\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($id: String!) {\n          deleteAppBinding(id: $id)\n        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    const result = response.data.deleteAppBinding\n    if (result) {\n      console.log('delete sucess')\n      navigate(`app-bindings`)\n    } else {\n      console.error('delete fail')\n    }\n  }\n\n  async renewApplicationAccessToken(e) {\n    e.preventDefault()\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($id: String!) {\n          renewApplicationAccessToken(id: $id) {\n            accessToken\n            refreshToken\n          }\n        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    if (response.errors) {\n      console.error('renew application access token fail')\n    } else {\n      const { accessToken, refreshToken } = response.data.renewApplicationAccessToken\n      this.accessToken = accessToken\n      this.appbinding = {\n        ...this.appbinding,\n        refreshToken\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"app-binding.js","sourceRoot":"","sources":["../../../client/pages/app-binding/app-binding.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\nimport { parseJwt, sleep } from '@operato/utils'\n\n@customElement('app-binding-page')\nclass AppBinding extends connect(store)(PageView) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow-y: auto;\n\n        position: relative;\n\n        background-color: var(--md-sys-color-background);\n        padding: var(--spacing-large);\n      }\n\n      h2 {\n        margin: var(--title-margin);\n        font: var(--title-font);\n        color: var(--title-text-color);\n      }\n\n      [page-description] {\n        margin: var(--page-description-margin);\n        font: var(--page-description-font);\n        color: var(--page-description-color);\n      }\n\n      [icon] {\n        position: absolute;\n        top: 10px;\n        right: 10px;\n\n        max-width: 80px;\n      }\n\n      [icon] img {\n        max-width: 100%;\n        max-height: 100%;\n      }\n\n      [fieldset-container] {\n        background-color: var(--md-sys-color-surface);\n        margin: var(--spacing-large) 0 var(--spacing-medium) 0;\n        padding: var(--spacing-medium);\n        border-radius: var(--border-radius);\n        box-shadow: var(--box-shadow);\n\n        label {\n          font: var(--label-font);\n          color: var(--label-color, var(--md-sys-color-on-surface));\n          text-transform: var(--label-text-transform);\n        }\n        input {\n          border: var(--border-dim-color);\n          border-radius: var(--border-radius);\n          margin: var(--input-margin);\n          padding: var(--input-padding);\n          font: var(--input-font);\n\n          flex: 1;\n        }\n        select:focus,\n        input:focus,\n        button {\n          outline: none;\n        }\n        form {\n          max-width: var(--content-container-max-width);\n        }\n      }\n\n      [fieldset-container] fieldset {\n        margin: 0;\n        margin-top: -15px;\n      }\n\n      fieldset {\n        border-radius: var(--border-radius);\n        border: var(--border-dim-color);\n        margin: var(--fieldset-margin);\n        padding: var(--fieldset-padding);\n      }\n\n      legend {\n        padding: var(--legend-padding);\n        font-weight: bold;\n        color: var(--legend-color);\n      }\n\n      [field-2column] {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        grid-gap: 15px;\n      }\n\n      [field] {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n      }\n\n      [grid-span] {\n        grid-column: span 2;\n      }\n\n      button,\n      [button-in-field] {\n        background-color: var(--button-background-color);\n        border: var(--button-border);\n        border-radius: var(--button-border-radius);\n        padding: var(--button-padding);\n        color: var(--button-color);\n        font: var(--button-font);\n        text-transform: var(--button-text-transform);\n\n        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);\n        float: right;\n        text-decoration: none;\n      }\n\n      button:hover {\n        border: var(--button-activ-border);\n        box-shadow: var(--button-active-box-shadow);\n      }\n\n      [button-in-field] {\n        border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;\n        position: absolute;\n        top: 12px;\n        right: 0;\n        max-height: 36px;\n      }\n\n      [input-hint] {\n        font: var(--input-hint-font);\n        color: var(--input-hint-color);\n      }\n\n      @media screen and (max-width: 480px) {\n        [field] {\n          grid-column: span 2;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) appbinding: any\n  @property({ type: String }) accessToken?: string\n\n  @state() _refreshTokenInfo: any\n  @state() _accessTokenInfo: any\n\n  private clipboard?: Clipboard\n\n  get context() {\n    return {\n      title: {\n        icon: 'link',\n        text: this.appbinding.name\n      }\n    }\n  }\n\n  render() {\n    var binding = this.appbinding || {}\n    var app = this.appbinding?.application || {}\n    var refreshTokenExp = this._refreshTokenInfo?.exp\n    var accessTokenExp = this._accessTokenInfo?.exp\n\n    return html`\n      <div>\n        <h2><md-icon>link</md-icon>&nbsp;${app.name}</h2>\n        <p page-description>${app.description}</p>\n      </div>\n\n      ${app.icon\n        ? html`\n            <div icon>\n              <img src=${app.icon} />\n            </div>\n          `\n        : html``}\n\n      <form>\n        <div fieldset-container>\n          <fieldset>\n            <legend>application</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"app-name\">app name</label>\n                <input id=\"app-name\" type=\"text\" .value=${app.name} readonly />\n              </div>\n\n              <div field grid-span>\n                <label for=\"app-description\">description</label>\n                <input id=\"app-description\" type=\"text\" .value=${app.description} readonly />\n              </div>\n\n              <div field>\n                <label for=\"contact-email\">contact email</label>\n                <input id=\"contact-email\" type=\"text\" .value=${app.email} readonly />\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <div fieldset-container>\n          <fieldset>\n            <legend>binding</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"id\">id</label>\n                <input id=\"id\" type=\"text\" .value=${binding.id} readonly />\n              </div>\n\n              <div field grid-span>\n                <label for=\"name\">name</label>\n                <input id=\"name\" type=\"text\" .value=${binding.email} readonly />\n              </div>\n\n              <div field>\n                <label for=\"status\">status</label>\n                <input id=\"status\" type=\"text\" .value=${binding.status} readonly />\n              </div>\n\n              <div field>\n                <label for=\"scope\">scope</label>\n                <input id=\"scope\" type=\"text\" .value=${binding.scope} readonly />\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <div fieldset-container>\n          <fieldset>\n            <legend>binding credential</legend>\n            <div field-2column>\n              <div field grid-span>\n                <label for=\"access-token\">access token</label>\n                <input id=\"access-token\" type=\"text\" .value=${this.accessToken || ''} readonly />\n                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n                ${accessTokenExp\n                  ? html`<div input-hint>\n                      expired in ${new Date(accessTokenExp).toLocaleString()} :\n                      ${asyncReplace(this.expTimer(accessTokenExp))}\n                    </div>`\n                  : html``}\n              </div>\n\n              <div field grid-span>\n                <label for=\"refresh-token\">refresh token</label>\n                <input id=\"refresh-token\" type=\"text\" .value=${binding.refreshToken || ''} readonly />\n                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n                ${refreshTokenExp\n                  ? html`<div input-hint>\n                      expired in ${new Date(refreshTokenExp).toLocaleString()} :\n                      ${asyncReplace(this.expTimer(refreshTokenExp))}\n                    </div>`\n                  : html``}\n              </div>\n            </div>\n          </fieldset>\n        </div>\n\n        <button @click=${this.deleteAppBinding.bind(this)}>delete this application binding</button>\n        <button @click=${this.renewApplicationAccessToken.bind(this)}>renew access token</button>\n      </form>\n    `\n  }\n\n  async *expTimer(exp) {\n    const DAY = 24 * 60 * 60\n    const HOUR = 60 * 60\n    const MIN = 60\n\n    while (this.active) {\n      var remain = Math.floor(Number(exp) - Date.now() / 1000)\n      const days = Math.floor(remain / DAY)\n      remain -= days * DAY\n      const hours = Math.floor(remain / HOUR)\n      remain -= hours * HOUR\n      const mins = Math.floor(remain / MIN)\n      const secs = remain - mins * MIN\n\n      yield `${days} days ${hours} hours ${mins} mins ${secs} seconds remain`\n\n      await sleep(1000)\n    }\n  }\n\n  firstUpdated() {\n    const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]')\n\n    this.clipboard = new Clipboard(copybuttons, {\n      target: (trigger => trigger.parentElement.querySelector('input')) as any\n    })\n  }\n\n  updated(changes) {\n    /*\n     * If this page properties are changed, this callback will be invoked.\n     * This callback will be called back only when this page is activated.\n     */\n    if (changes.has('appbinding')) {\n      const { refreshToken } = this.appbinding || {}\n      this._refreshTokenInfo = refreshToken ? parseJwt(refreshToken) : {}\n    }\n\n    if (changes.has('accessToken')) {\n      this._accessTokenInfo = this.accessToken ? parseJwt(this.accessToken) : {}\n    }\n  }\n\n  async pageUpdated(changes, lifecycle, before) {\n    if (this.active) {\n      /*\n       * this page is activated\n       */\n      await this.fetchAppBinding()\n    } else {\n      /* this page is deactivated */\n    }\n  }\n\n  async fetchAppBinding() {\n    const response = await client.query({\n      query: gql`\n        query ($id: String!) {\n          appBinding(id: $id) {\n            id\n            name\n            description\n            email\n            scope\n            status\n            application {\n              id\n              name\n              description\n              email\n              icon\n            }\n            refreshToken\n          }\n        }\n      `,\n      variables: {\n        id: this.lifecycle.resourceId\n      }\n    })\n\n    this.appbinding = response.data.appBinding\n  }\n\n  async deleteAppBinding(e) {\n    e.preventDefault()\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($id: String!) {\n          deleteAppBinding(id: $id)\n        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    const result = response.data.deleteAppBinding\n    if (result) {\n      console.log('delete sucess')\n      navigate(`app-bindings`)\n    } else {\n      console.error('delete fail')\n    }\n  }\n\n  async renewApplicationAccessToken(e) {\n    e.preventDefault()\n\n    const id = this.lifecycle.resourceId\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($id: String!) {\n          renewApplicationAccessToken(id: $id) {\n            accessToken\n            refreshToken\n          }\n        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    if (response.errors) {\n      console.error('renew application access token fail')\n    } else {\n      const { accessToken, refreshToken } = response.data.renewApplicationAccessToken\n      this.accessToken = accessToken\n      this.appbinding = {\n        ...this.appbinding,\n        refreshToken\n      }\n    }\n  }\n}\n"]}

package/dist-client/pages/app-binding/app-bindings.d.ts

@@ -1 +1,2 @@
-export {};
+import '@material/web/button/elevated-button.js';
+import '@material/web/button/outlined-button.js';

package/dist-client/pages/app-binding/app-bindings.js

@@ -1,4 +1,6 @@
 import { __decorate, __metadata } from "tslib";
+import '@material/web/button/elevated-button.js';
+import '@material/web/button/outlined-button.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -41,7 +43,7 @@ let AppBindings = class AppBindings extends connect(store)(PageView) {
             </tr>
           `)}
       </table>
-      <mwc-button raised @click=${e => navigate('applications')} label="registered applications .."></mwc-button>
+      <md-elevated-button @click=${e => navigate('applications')}>registered applications ..</md-elevated-button>
     `;
     }
     async pageUpdated(changes, lifecycle, before) {
@@ -77,20 +79,28 @@ let AppBindings = class AppBindings extends connect(store)(PageView) {
 AppBindings.styles = [
     css `
       :host {
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
 
         overflow: auto;
       }
-      mwc-button {
-        margin-right: 0;
+
+      md-elevated-button {
+        text-transform: capitalize;
+      }
+
+      md-outlined-button {
         float: right;
+        margin-top: var(--spacing-medium);
+        text-transform: capitalize;
       }
+
       h2 {
         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
       }
+
       [page-description] {
         margin: var(--page-description-margin);
         font: var(--page-description-font);
@@ -99,18 +109,22 @@ AppBindings.styles = [
 
       table {
         width: 100%;
-        margin: var(--margin-wide) 0;
+        margin: var(--spacing-large) 0;
         border-collapse: collapse;
       }
+
       tr {
         background-color: var(--tr-background-color);
       }
+
       tr:nth-child(odd) {
         background-color: var(--tr-background-odd-color);
       }
+
       tr:hover {
         background-color: var(--tr-background-hover-color);
       }
+
       th {
         border-top: var(--th-border-top);
         border-bottom: var(--td-border-bottom);
@@ -121,22 +135,26 @@ AppBindings.styles = [
         text-transform: var(--th-text-transform);
         text-align: left;
       }
+
       td {
         padding: var(--td-padding);
         border-bottom: var(--td-border-bottom);
         font: var(--td-font);
         color: var(--td-color);
       }
+
       td a {
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
         font: bold 16px var(--theme-font);
 
         display: block;
         text-decoration: none;
       }
+
       .text-align-center {
         text-align: center;
       }
+
       .text-align-right {
         text-align: right;
       }

package/dist-client/pages/app-binding/app-bindings.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-bindings.js","sourceRoot":"","sources":["../../../client/pages/app-binding/app-bindings.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG1D,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IAAlD;;QAsE6B,gBAAW,GAAU,EAAE,CAAA;IAwEpD,CAAC;IAtEC,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,sBAAsB;YAC7B,IAAI,EAAE,kBAAkB;SACzB,CAAA;IACH,CAAC;IAED,MAAM;QACJ,IAAI,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,EAAE,CAAA;QAExC,OAAO,IAAI,CAAA;;;;;;;;;;;;UAYL,WAAW,CAAC,GAAG,CACf,UAAU,CAAC,EAAE,CAAC,IAAI,CAAA;;;0BAGF,eAAe,UAAU,CAAC,EAAE,EAAE,IAAI,UAAU,CAAC,IAAI;kBACzD,UAAU,CAAC,WAAW;;oBAEpB,UAAU,CAAC,KAAK;oBAChB,UAAU,CAAC,MAAM;;WAE1B,CACF;;kCAEyB,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC;KAC1D,CAAA;IACH,CAAC;IAED,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QAC1C,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,WAAW,GAAG,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,KAAK,CAAA;SACzD;IACH,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;OAgBT;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YACpB,OAAO,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAA;SACjC;IACH,CAAC;;AA5IM,kBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiEF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;gDAAwB;AAtE9C,WAAW;IADhB,aAAa,CAAC,mBAAmB,CAAC;GAC7B,WAAW,CA8IhB","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\n\n@customElement('app-bindings-page')\nclass AppBindings extends connect(store)(PageView) {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--main-section-background-color);\n        padding: var(--padding-wide);\n\n        overflow: auto;\n      }\n      mwc-button {\n        margin-right: 0;\n        float: right;\n      }\n      h2 {\n        margin: var(--title-margin);\n        font: var(--title-font);\n        color: var(--title-text-color);\n      }\n      [page-description] {\n        margin: var(--page-description-margin);\n        font: var(--page-description-font);\n        color: var(--page-description-color);\n      }\n\n      table {\n        width: 100%;\n        margin: var(--margin-wide) 0;\n        border-collapse: collapse;\n      }\n      tr {\n        background-color: var(--tr-background-color);\n      }\n      tr:nth-child(odd) {\n        background-color: var(--tr-background-odd-color);\n      }\n      tr:hover {\n        background-color: var(--tr-background-hover-color);\n      }\n      th {\n        border-top: var(--th-border-top);\n        border-bottom: var(--td-border-bottom);\n        padding: var(--th-padding);\n\n        font: var(--th-font);\n        color: var(--th-color);\n        text-transform: var(--th-text-transform);\n        text-align: left;\n      }\n      td {\n        padding: var(--td-padding);\n        border-bottom: var(--td-border-bottom);\n        font: var(--td-font);\n        color: var(--td-color);\n      }\n      td a {\n        color: var(--primary-color);\n        font: bold 16px var(--theme-font);\n\n        display: block;\n        text-decoration: none;\n      }\n      .text-align-center {\n        text-align: center;\n      }\n      .text-align-right {\n        text-align: right;\n      }\n    `\n  ]\n\n  @property({ type: Array }) appBindings: any[] = []\n\n  get context() {\n    return {\n      title: `application bindings`,\n      help: 'auth/application'\n    }\n  }\n\n  render() {\n    var appBindings = this.appBindings || []\n\n    return html`\n      <div>\n        <h2>Bound Applications</h2>\n        <p page-description>Bound Applications goes here</p>\n      </div>\n\n      <table>\n        <tr>\n          <th>app name</th>\n          <th>Scope</th>\n          <th>status</th>\n        </tr>\n        ${appBindings.map(\n          appBinding => html`\n            <tr>\n              <td>\n                <a href=${`app-binding/${appBinding.id}`}>${appBinding.name}</a>\n                ${appBinding.description}\n              </td>\n              <td>${appBinding.scope}</td>\n              <td>${appBinding.status}</td>\n            </tr>\n          `\n        )}\n      </table>\n      <mwc-button raised @click=${e => navigate('applications')} label=\"registered applications ..\"></mwc-button>\n    `\n  }\n\n  async pageUpdated(changes, lifecycle, before) {\n    if (this.active) {\n      this.appBindings = (await this.fetchAppBindings()).items\n    }\n  }\n\n  async fetchAppBindings() {\n    const response = await client.query({\n      query: gql`\n        query {\n          appBindings {\n            items {\n              id\n              name\n              application {\n                id\n                name\n              }\n              scope\n              status\n            }\n            total\n          }\n        }\n      `\n    })\n\n    if (!response.errors) {\n      return response.data.appBindings\n    }\n  }\n}\n"]}
+{"version":3,"file":"app-bindings.js","sourceRoot":"","sources":["../../../client/pages/app-binding/app-bindings.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG1D,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IAAlD;;QAsF6B,gBAAW,GAAU,EAAE,CAAA;IAwEpD,CAAC;IAtEC,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,sBAAsB;YAC7B,IAAI,EAAE,kBAAkB;SACzB,CAAA;IACH,CAAC;IAED,MAAM;QACJ,IAAI,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,EAAE,CAAA;QAExC,OAAO,IAAI,CAAA;;;;;;;;;;;;UAYL,WAAW,CAAC,GAAG,CACf,UAAU,CAAC,EAAE,CAAC,IAAI,CAAA;;;0BAGF,eAAe,UAAU,CAAC,EAAE,EAAE,IAAI,UAAU,CAAC,IAAI;kBACzD,UAAU,CAAC,WAAW;;oBAEpB,UAAU,CAAC,KAAK;oBAChB,UAAU,CAAC,MAAM;;WAE1B,CACF;;mCAE0B,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC;KAC3D,CAAA;IACH,CAAC;IAED,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QAC1C,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,WAAW,GAAG,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,KAAK,CAAA;QAC1D,CAAC;IACH,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;OAgBT;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YACrB,OAAO,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAA;QAClC,CAAC;IACH,CAAC;;AA5JM,kBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiFF;CACF,AAnFY,CAmFZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;gDAAwB;AAtF9C,WAAW;IADhB,aAAa,CAAC,mBAAmB,CAAC;GAC7B,WAAW,CA8JhB","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/button/outlined-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\n\n@customElement('app-bindings-page')\nclass AppBindings extends connect(store)(PageView) {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--md-sys-color-background);\n        padding: var(--spacing-large);\n\n        overflow: auto;\n      }\n\n      md-elevated-button {\n        text-transform: capitalize;\n      }\n\n      md-outlined-button {\n        float: right;\n        margin-top: var(--spacing-medium);\n        text-transform: capitalize;\n      }\n\n      h2 {\n        margin: var(--title-margin);\n        font: var(--title-font);\n        color: var(--title-text-color);\n      }\n\n      [page-description] {\n        margin: var(--page-description-margin);\n        font: var(--page-description-font);\n        color: var(--page-description-color);\n      }\n\n      table {\n        width: 100%;\n        margin: var(--spacing-large) 0;\n        border-collapse: collapse;\n      }\n\n      tr {\n        background-color: var(--tr-background-color);\n      }\n\n      tr:nth-child(odd) {\n        background-color: var(--tr-background-odd-color);\n      }\n\n      tr:hover {\n        background-color: var(--tr-background-hover-color);\n      }\n\n      th {\n        border-top: var(--th-border-top);\n        border-bottom: var(--td-border-bottom);\n        padding: var(--th-padding);\n\n        font: var(--th-font);\n        color: var(--th-color);\n        text-transform: var(--th-text-transform);\n        text-align: left;\n      }\n\n      td {\n        padding: var(--td-padding);\n        border-bottom: var(--td-border-bottom);\n        font: var(--td-font);\n        color: var(--td-color);\n      }\n\n      td a {\n        color: var(--md-sys-color-primary);\n        font: bold 16px var(--theme-font);\n\n        display: block;\n        text-decoration: none;\n      }\n\n      .text-align-center {\n        text-align: center;\n      }\n\n      .text-align-right {\n        text-align: right;\n      }\n    `\n  ]\n\n  @property({ type: Array }) appBindings: any[] = []\n\n  get context() {\n    return {\n      title: `application bindings`,\n      help: 'auth/application'\n    }\n  }\n\n  render() {\n    var appBindings = this.appBindings || []\n\n    return html`\n      <div>\n        <h2>Bound Applications</h2>\n        <p page-description>Bound Applications goes here</p>\n      </div>\n\n      <table>\n        <tr>\n          <th>app name</th>\n          <th>Scope</th>\n          <th>status</th>\n        </tr>\n        ${appBindings.map(\n          appBinding => html`\n            <tr>\n              <td>\n                <a href=${`app-binding/${appBinding.id}`}>${appBinding.name}</a>\n                ${appBinding.description}\n              </td>\n              <td>${appBinding.scope}</td>\n              <td>${appBinding.status}</td>\n            </tr>\n          `\n        )}\n      </table>\n      <md-elevated-button @click=${e => navigate('applications')}>registered applications ..</md-elevated-button>\n    `\n  }\n\n  async pageUpdated(changes, lifecycle, before) {\n    if (this.active) {\n      this.appBindings = (await this.fetchAppBindings()).items\n    }\n  }\n\n  async fetchAppBindings() {\n    const response = await client.query({\n      query: gql`\n        query {\n          appBindings {\n            items {\n              id\n              name\n              application {\n                id\n                name\n              }\n              scope\n              status\n            }\n            total\n          }\n        }\n      `\n    })\n\n    if (!response.errors) {\n      return response.data.appBindings\n    }\n  }\n}\n"]}

package/dist-client/pages/appliance/appliance.d.ts

@@ -1 +1 @@
-export {};
+import '@material/web/icon/icon.js';