npm - @things-factory/auth-ui - Versions diffs - 7.0.1-rc.0 → 7.0.1-rc.10 - Mend

@things-factory/auth-ui 7.0.1-rc.0 → 7.0.1-rc.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

package/client/pages/appliance/appliance.ts CHANGED Viewed

@@ -20,79 +20,131 @@ class Appliance extends connect(store)(PageView) {
         display: flex;
         flex-direction: column;
         overflow-y: auto;
+        position: relative;
         background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
       }
       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);
       }
-      label {
-        font: var(--label-font);
-        color: var(--label-color, var(--md-sys-color-on-surface));
-        text-transform: var(--label-text-transform);
+      [icon] {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        max-width: 80px;
       }
-      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;
+      [icon] img {
+        max-width: 100%;
+        max-height: 100%;
       }
-      select:focus,
-      input:focus,
-      button {
-        outline: none;
+      [button-primary] {
+        background-color: var(--button-primary-background-color);
+        border: var(--button-border);
+        border-radius: var(--button-border-radius);
+        margin: var(--button-margin);
+        padding: var(--button-primary-padding);
+        color: var(--button-primary-color);
+        font: var(--button-primary-font);
+        text-transform: var(--button-text-transform);
+        text-decoration: none;
       }
-      form {
-        max-width: var(--content-container-max-width);
+      [button-primary]:hover {
+        background-color: var(--button-primary-active-background-color);
+        box-shadow: var(--button-active-box-shadow);
       }
       [fieldset-container] {
         background-color: var(--md-sys-color-surface);
         margin: var(--margin-wide) 0 var(--margin-default) 0;
         padding: var(--padding-default);
         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,
+        select {
+          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-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 {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small);
+      }
       button,
+      input[type='submit'],
       [button-in-field] {
         background-color: var(--button-background-color);
         border: var(--button-border);
@@ -106,10 +158,13 @@ class Appliance extends connect(store)(PageView) {
         float: right;
         text-decoration: none;
       }
-      button:hover {
+      button:hover,
+      input[type='submit']: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;
@@ -117,10 +172,12 @@ class Appliance extends connect(store)(PageView) {
         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/client/pages/appliance/home.ts CHANGED Viewed

@@ -1,3 +1,6 @@
+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'
@@ -17,11 +20,22 @@ class Appliances extends connect(store)(PageView) {
         overflow: auto;
       }
+      md-elevated-button {
+        text-transform: capitalize;
+      }
+      md-outlined-button {
+        float: right;
+        margin-top: var(--margin-default);
+        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);
@@ -33,15 +47,19 @@ class Appliances extends connect(store)(PageView) {
         margin: var(--margin-wide) 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);
@@ -52,22 +70,26 @@ class Appliances extends connect(store)(PageView) {
         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(--secondary-text-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/client/pages/application/application.ts CHANGED Viewed

@@ -10,111 +10,172 @@ import { APPLICATION_TYPES } from '../../constants/application'
 import { client } from '@operato/graphql'
 import { navigate, PageView, store } from '@operato/shell'
-import { ButtonContainerStyles } from '@operato/styles'
 @customElement('application-page')
 class Application extends connect(store)(PageView) {
   static styles = [
-    ButtonContainerStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
         overflow-y: auto;
         position: relative;
         background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
       }
       h2 {
-        display: flex;
-        align-items: center;
         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;
         right: 10px;
         max-width: 80px;
       }
       [icon] img {
         max-width: 100%;
         max-height: 100%;
       }
-      label {
-        font: var(--label-font);
-        color: var(--label-color, var(--md-sys-color-on-surface));
-        text-transform: var(--label-text-transform);
-      }
-      input,
-      select {
-        border: var(--border-dim-color);
-        border-radius: var(--border-radius);
-        margin: var(--input-margin);
-        padding: 9px;
-        font: var(--input-font);
-        flex: 1;
+      [button-primary] {
+        background-color: var(--button-primary-background-color);
+        border: var(--button-border);
+        border-radius: var(--button-border-radius);
+        margin: var(--button-margin);
+        padding: var(--button-primary-padding);
+        color: var(--button-primary-color);
+        font: var(--button-primary-font);
+        text-transform: var(--button-text-transform);
+        text-decoration: none;
       }
-      select:focus,
-      input:focus,
-      form {
-        max-width: var(--content-container-max-width);
+      [button-primary]:hover {
+        background-color: var(--button-primary-active-background-color);
+        box-shadow: var(--button-active-box-shadow);
       }
       [fieldset-container] {
         background-color: var(--md-sys-color-surface);
         margin: var(--margin-wide) 0 var(--margin-default) 0;
         padding: var(--padding-default);
         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,
+        select {
+          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-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 {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small);
+      }
+      button,
+      input[type='submit'],
+      [button-in-field] {
+        background-color: var(--button-background-color);
+        border: var(--button-border);
+        border-radius: var(--button-border-radius);
+        padding: var(--button-padding);
+        color: var(--button-color);
+        font: var(--button-font);
+        text-transform: var(--button-text-transform);
+        margin: var(--margin-default) 0 var(--margin-default) var(--margin-default);
+        float: right;
+        text-decoration: none;
+      }
+      button:hover,
+      input[type='submit']: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;
-        top: 16px;
-        right: 2px;
-        padding: 0;
-        border-radius: 0;
+        top: 12px;
+        right: 0;
+        max-height: 36px;
       }
       [input-hint] {
         font: var(--input-hint-font);
         color: var(--input-hint-color);
       }
-      [danger] {
-        --md-theme-primary: var(--md-danger-button-primary-color);
-      }
       @media screen and (max-width: 480px) {
         [field] {
@@ -208,18 +269,14 @@ class Application extends connect(store)(PageView) {
               <div field grid-span>
                 <label for="auth-url">auth URL</label>
                 <input id="auth-url" type="text" .value=${app.authUrl} readonly />
-                <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}
-                  >copy</md-text-button
-                >
+                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
                 The endpoint for authorization server. This is used to get the authorization code.
               </div>
               <div field grid-span>
                 <label for="access-token-url">access token URL</label>
                 <input id="access-token-url" type="text" .value=${app.accessTokenUrl} readonly />
-                <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}
-                  >copy</md-text-button
-                >
+                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
                 The endpoint for authentication server. This is used to exchange the authorization code for an access
                 token.
               </div>
@@ -234,17 +291,13 @@ class Application extends connect(store)(PageView) {
               <div field grid-span>
                 <label for="app-key">appKey</label>
                 <input id="app-key" type="text" .value=${app.appKey} readonly />
-                <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}
-                  >copy</md-text-button
-                >
+                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
               </div>
               <div field grid-span>
                 <label for="app-secret">appSecret</label>
                 <input id="app-secret" type="text" .value=${app.appSecret} readonly />
-                <md-text-button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}
-                  >copy</md-text-button
-                >
+                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
               </div>
             </div>
           </fieldset>

package/client/pages/application/applications.ts CHANGED Viewed

@@ -1,3 +1,6 @@
+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'
@@ -17,9 +20,14 @@ class Applications extends connect(store)(PageView) {
         overflow: auto;
       }
+      md-elevated-button {
+        text-transform: capitalize;
+      }
       md-outlined-button {
         float: right;
         margin-top: var(--margin-default);
+        text-transform: capitalize;
       }
       h2 {
@@ -27,25 +35,31 @@ class Applications extends connect(store)(PageView) {
         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);
       }
       table {
         margin: var(--margin-wide) 0;
         width: 100%;
         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);
@@ -56,19 +70,21 @@ class Applications extends connect(store)(PageView) {
         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 {
         font: var(--td-font);
         text-decoration: none;
         color: var(--md-sys-color-on-surface);
       }
       td a strong {
-        color: var(--secondary-text-color);
         font: bold 16px var(--theme-font);
         display: block;
@@ -78,6 +94,7 @@ class Applications extends connect(store)(PageView) {
       .text-align-center {
         text-align: center;
       }
       .text-align-right {
         text-align: right;
       }
@@ -102,6 +119,7 @@ class Applications extends connect(store)(PageView) {
         <p page-description>
           What type of app are you building?<br />Choose the app type that best suits the audience you’re building for.
         </p>
         <md-elevated-button @click=${e => navigate('application-register')}
           >register new application</md-elevated-button
         >

package/dist-client/auth-style-sign.js CHANGED Viewed

@@ -2,7 +2,8 @@ import { css } from 'lit';
 export const AUTH_STYLE_SIGN = css `
   :host {
     display: flex;
-    background-color: var(--auth-background, var(--md-sys-color-primary));
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
   }
   :host *:focus {

package/dist-client/auth-style-sign.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"auth-style-sign.js","sourceRoot":"","sources":["../client/auth-style-sign.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LjC~~,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const AUTH_STYLE_SIGN = css`\n :host {\n display: flex;\n background-color: var(--~~auth~~-~~background,~~ var(--md-sys-color-primary));\n }\n\n :host :focus {\n outline: none;\n }\n\n :host {\n box-sizing: border-box;\n }\n\n .wrap {\n display: block;\n width: 450px;\n min-width: 350px;\n margin: 0 auto;\n padding-bottom: 100px;\n text-align: center;\n }\n\n .auth-brand {\n color: var(--md-sys-color-on-primary);\n }\n\n .auth-brand img {\n margin: 15% auto 5px auto;\n width: 100px;\n border: 3px solid var(--md-sys-color-on-primary);\n border-radius: 25px;\n box-shadow: var(--box-shadow);\n }\n .name {\n display: block;\n font: var(--auth-brand-name);\n text-shadow: var(--auth-brand-name-shadow);\n }\n .auth-brand .welcome-msg {\n font: var(--auth-brand-welcome-msg);\n }\n .auth-form {\n display: grid;\n grid-gap: var(--margin-default);\n grid-template-columns: 1fr 1fr;\n }\n\n form {\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: var(--margin-default);\n align-items: center;\n }\n\n h3 {\n grid-column: 1 / -1;\n margin: 50px 0 0 0;\n font: var(--auth-title-font);\n color: var(--auth-title-color, var(--md-sys-color-on-primary));\n text-transform: uppercase;\n }\n\n .field {\n grid-column: 1 / -1;\n text-align: left;\n }\n\n .submit-buttons-container {\n grid-column: 1 / -1;\n text-align: center;\n\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .fingerprint {\n color: var(--md-sys-color-on-primary);\n border: 1.5px solid var(--md-sys-color-on-primary);\n border-radius: 20%;\n width: 36px;\n height: 36px;\n }\n\n .field md-filled-text-field {\n grid-column: 1 / -1;\n width: 100%;\n }\n\n md-text-button,\n md-elevated-button {\n grid-column: 1 / -1;\n flex: 1;\n }\n\n .wrap .link {\n text-decoration: none;\n justify-self: flex-start;\n }\n\n .wrap .link md-text-button {\n --md-text-button-label-text-color: var(--md-sys-color-on-primary);\n --md-text-button-focus-label-text-color: var(--md-sys-color-on-primary);\n --md-text-button-hover-label-text-color: var(--md-sys-color-on-primary);\n }\n\n .wrap .link md-icon {\n color: var(--md-sys-color-on-primary);\n }\n\n #locale-area {\n display: flex;\n grid-column: 1 / -1;\n padding: 0 var(--padding-default);\n }\n\n #locale-area > label {\n display: flex;\n align-items: center;\n color: var(--md-sys-color-on-primary);\n --md-icon-size: 16px;\n }\n\n #locale-selector {\n font-size: 16px;\n width: 100%;\n }\n\n #locale-selector {\n --i18n-selector-field-border: none;\n --i18n-selector-field-background-color: none;\n --i18n-selector-field-font-size: 14px;\n --i18n-selector-field-color: var(--md-sys-color-on-primary);\n }\n\n .lottie-container {\n width: 100%;\n height: 300px;\n position: absolute;\n left: 0;\n bottom: 0;\n pointer-events: none;\n }\n .lottie-container lottie-player {\n position: absolute;\n bottom: -6%;\n width: 100%;\n height: auto;\n }\n\n @media (max-width: 450px) {\n .wrap {\n width: 85%;\n min-width: 320px;\n }\n .auth-form {\n grid-template-columns: 1fr;\n }\n .auth-brand img {\n margin: 12% auto 5px auto;\n width: 75px;\n }\n h3 {\n margin: 15px 0 0 0;\n }\n .lottie-container {\n overflow: hidden;\n height: 200px;\n pointer-events: none;\n }\n .lottie-container lottie-player {\n width: 1200px;\n left: -30%;\n }\n }\n\n @media screen and (min-width: 1400px) {\n .wrap {\n padding-bottom: 150px;\n }\n }\n @media screen and (min-width: 2500px) {\n .wrap {\n padding-bottom: 280px;\n }\n }\n`\n"]}
1	+ {"version":3,"file":"auth-style-sign.js","sourceRoot":"","sources":["../client/auth-style-sign.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LjC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const AUTH_STYLE_SIGN = css`\n :host {\n display: flex;\n background-color: var(--md-sys-color-primary);\n color: var(--md-sys-color-on-primary);\n }\n\n :host :focus {\n outline: none;\n }\n\n :host {\n box-sizing: border-box;\n }\n\n .wrap {\n display: block;\n width: 450px;\n min-width: 350px;\n margin: 0 auto;\n padding-bottom: 100px;\n text-align: center;\n }\n\n .auth-brand {\n color: var(--md-sys-color-on-primary);\n }\n\n .auth-brand img {\n margin: 15% auto 5px auto;\n width: 100px;\n border: 3px solid var(--md-sys-color-on-primary);\n border-radius: 25px;\n box-shadow: var(--box-shadow);\n }\n .name {\n display: block;\n font: var(--auth-brand-name);\n text-shadow: var(--auth-brand-name-shadow);\n }\n .auth-brand .welcome-msg {\n font: var(--auth-brand-welcome-msg);\n }\n .auth-form {\n display: grid;\n grid-gap: var(--margin-default);\n grid-template-columns: 1fr 1fr;\n }\n\n form {\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: var(--margin-default);\n align-items: center;\n }\n\n h3 {\n grid-column: 1 / -1;\n margin: 50px 0 0 0;\n font: var(--auth-title-font);\n color: var(--auth-title-color, var(--md-sys-color-on-primary));\n text-transform: uppercase;\n }\n\n .field {\n grid-column: 1 / -1;\n text-align: left;\n }\n\n .submit-buttons-container {\n grid-column: 1 / -1;\n text-align: center;\n\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .fingerprint {\n color: var(--md-sys-color-on-primary);\n border: 1.5px solid var(--md-sys-color-on-primary);\n border-radius: 20%;\n width: 36px;\n height: 36px;\n }\n\n .field md-filled-text-field {\n grid-column: 1 / -1;\n width: 100%;\n }\n\n md-text-button,\n md-elevated-button {\n grid-column: 1 / -1;\n flex: 1;\n }\n\n .wrap .link {\n text-decoration: none;\n justify-self: flex-start;\n }\n\n .wrap .link md-text-button {\n --md-text-button-label-text-color: var(--md-sys-color-on-primary);\n --md-text-button-focus-label-text-color: var(--md-sys-color-on-primary);\n --md-text-button-hover-label-text-color: var(--md-sys-color-on-primary);\n }\n\n .wrap .link md-icon {\n color: var(--md-sys-color-on-primary);\n }\n\n #locale-area {\n display: flex;\n grid-column: 1 / -1;\n padding: 0 var(--padding-default);\n }\n\n #locale-area > label {\n display: flex;\n align-items: center;\n color: var(--md-sys-color-on-primary);\n --md-icon-size: 16px;\n }\n\n #locale-selector {\n font-size: 16px;\n width: 100%;\n }\n\n #locale-selector {\n --i18n-selector-field-border: none;\n --i18n-selector-field-background-color: none;\n --i18n-selector-field-font-size: 14px;\n --i18n-selector-field-color: var(--md-sys-color-on-primary);\n }\n\n .lottie-container {\n width: 100%;\n height: 300px;\n position: absolute;\n left: 0;\n bottom: 0;\n pointer-events: none;\n }\n .lottie-container lottie-player {\n position: absolute;\n bottom: -6%;\n width: 100%;\n height: auto;\n }\n\n @media (max-width: 450px) {\n .wrap {\n width: 85%;\n min-width: 320px;\n }\n .auth-form {\n grid-template-columns: 1fr;\n }\n .auth-brand img {\n margin: 12% auto 5px auto;\n width: 75px;\n }\n h3 {\n margin: 15px 0 0 0;\n }\n .lottie-container {\n overflow: hidden;\n height: 200px;\n pointer-events: none;\n }\n .lottie-container lottie-player {\n width: 1200px;\n left: -30%;\n }\n }\n\n @media screen and (min-width: 1400px) {\n .wrap {\n padding-bottom: 150px;\n }\n }\n @media screen and (min-width: 2500px) {\n .wrap {\n padding-bottom: 280px;\n }\n }\n`\n"]}

package/dist-client/components/abstract-sign.d.ts CHANGED Viewed

@@ -4,5 +4,5 @@ export declare abstract class AbstractSign extends AbstractAuthPage {
     submit(): Promise<void>;
     updated(changed: any): void;
     get formfields(): import("lit-html").TemplateResult<1>;
-    signinWithAuthn(): Promise<void>;
+    authenticateUser(): Promise<void>;
 }