@vaadin-component-factory/vcf-pdf-viewer 3.1.0 → 4.0.0

package/theme/base/vcf-pdf-viewer-styles.js

@@ -0,0 +1,144 @@
+import {
+  registerStyles,
+  css,
+} from "@vaadin/vaadin-themable-mixin/register-styles.js";
+
+registerStyles(
+  "vcf-pdf-viewer",
+  css`
+    :host {
+      --pdf-viewer-background-color: var(--vaadin-background-color);
+      --pdf-viewer-container-background-color: var(--vaadin-background-container);
+      --pdf-viewer-border-color: var(--vaadin-border-color);
+      --pdf-viewer-border-radius: var(--vaadin-radius-m);
+      --pdf-viewer-box-shadow-color: var(--vaadin-focus-ring-color);
+      
+      --pdf-viewer-previous-page-button-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4.5 15.75L12 8.25L19.5 15.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
+      --pdf-viewer-next-page-button-icon: var(--_vaadin-icon-chevron-down);
+      --pdf-viewer-toggle-button-icon-closed: var(--_vaadin-icon-menu);
+      --pdf-viewer-toggle-button-icon-open: var(--_vaadin-icon-menu);
+
+      --vaadin-focus-ring-width: 2px;
+      background-color: var(--pdf-viewer-background-color);
+      border: 1px solid var(--pdf-viewer-border-color);
+      border-radius: var(--pdf-viewer-border-radius);
+      position: relative;
+    }
+
+    :host([data-application-theme="lumo"]) {
+      --pdf-viewer-background-color: var(--lumo-base-color);
+      --pdf-viewer-container-background-color: var(--lumo-contrast-5pct);
+      --pdf-viewer-border-color: var(--lumo-contrast-10pct);
+      --pdf-viewer-border-radius: var(--lumo-border-radius-m);
+      --pdf-viewer-font-family: var(--lumo-font-family);
+      --pdf-viewer-box-shadow-color: var(--lumo-primary-color-50pct);
+
+      --pdf-viewer-icon-font-family: "lumo-icons";
+      --pdf-viewer-previous-page-button-icon: var(--lumo-icons-angle-up);
+      --pdf-viewer-next-page-button-icon: var(--lumo-icons-angle-down);
+      --pdf-viewer-toggle-button-icon-closed: var(--lumo-icons-chevron-right);
+      --pdf-viewer-toggle-button-icon-open: var(--lumo-icons-chevron-left);
+    }
+
+    [part~="viewer-container"] {
+      background-color: var(--pdf-viewer-container-background-color);
+      outline: none;
+    }
+
+    [part~="viewer-container"][focus-ring] {
+      box-shadow: 0 0 0 var(--vaadin-focus-ring-width) var(--pdf-viewer-box-shadow-color);
+    }
+
+    [part~="toolbar"] {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      border-bottom: 1px solid var(--pdf-viewer-border-color);
+      padding-left: var(--vaadin-padding-xs);
+      padding-right: var(--vaadin-padding-m);
+      gap: var(--vaadin-gap-s);
+      z-index: 2;
+    }
+
+    [part~="toolbar-pages"] {
+      display: flex;
+      flex-direction: row;
+      flex: 1;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    ::slotted(.toolbar-current-page) {
+      width: 3.25em;
+    }
+
+    [part~="toolbar-page-separator"] {
+      padding: 0 var(--vaadin-padding-xs);
+    }
+
+    [part~="toolbar-total-pages"] {
+      padding-right: var(--vaadin-padding-m);
+    }
+
+    [part~="toolbar-title"] {
+      line-height: 2.25rem;
+      display: inline-block;
+      color: var(--lumo-header-title-color, var(--vaadin-text-color));
+      padding: var(--vaadin-padding-xs) 0;
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .page {
+      padding: var(--vaadin-padding-m);
+      padding-bottom: 0;
+    }
+
+    .page:last-child {
+      padding-bottom: var(--vaadin-padding-m);
+    }
+
+    .textLayer {
+      top: var(--vaadin-padding-m);
+      right: var(--vaadin-padding-m);
+      bottom: var(--vaadin-padding-m);
+      left: var(--vaadin-padding-m);
+      opacity: 0.2;
+    }
+
+    .textLayer ::-moz-selection {
+      background: rgb(0, 0, 255);
+    }
+
+    .textLayer ::selection {
+      background: rgb(0, 0, 255);
+    }
+
+    .textLayer .highlight {
+      background-color: rgb(180, 0, 170);
+      border-radius: 4px;
+    }
+
+    .textLayer .highlight.selected {
+      background-color: rgb(0, 100, 0);
+    }
+
+    [part~="toolbar"].small-size [part~="toolbar-pages"] {
+      flex: none;
+    }
+
+    [part~="toolbar"].small-size ::slotted(.toolbar-zoom) {
+      position: absolute;
+      bottom: var(--vaadin-padding-s);
+      left: 50%;
+      margin-left: -100px;
+      background-color: white;
+      box-shadow: var(--lumo-box-shadow-m);
+      padding: var(--vaadin-padding-xs);
+      z-index: 99;
+    }
+  `,
+  { moduleId: "lumo-vcf-pdf-viewer" },
+);

package/theme/base/vcf-pdf-viewer-toolbar-icons-styles.js

@@ -0,0 +1,39 @@
+import {
+  registerStyles,
+  css,
+} from "@vaadin/vaadin-themable-mixin/register-styles.js";
+
+registerStyles(
+  "vaadin-icon",
+  css`
+    :host::before {
+      font-size: var(--vaadin-icon-size);
+      font-family: var(--pdf-viewer-icon-font-family);
+      line-height: 1;
+    }
+
+    :host(.previous-page-button-icon) svg,
+    :host(.next-page-button-icon) svg,
+    :host(.toggle-button-icon) svg,
+    :host(.sidebarOpen.toggle-button-icon) svg {
+      display: none;
+    }
+
+    :host(.previous-page-button-icon)::before {
+      content: var(--pdf-viewer-previous-page-button-icon);
+    }
+
+    :host(.next-page-button-icon)::before {
+      content: var(--pdf-viewer-next-page-button-icon);
+    }
+
+    :host(.toggle-button-icon)::before {
+      content: var(--pdf-viewer-toggle-button-icon-closed);
+    }
+
+    :host(.sidebarOpen.toggle-button-icon)::before {
+      content: var(--pdf-viewer-toggle-button-icon-open);
+    }
+  `,
+  { moduleId: "base-vcf-pdf-viewer-toolbar-icons" },
+);

package/theme/base/vcf-pdf-viewer.js

@@ -0,0 +1,3 @@
+import './vcf-pdf-viewer-styles.js';
+import './vcf-pdf-viewer-toolbar-icons-styles.js';
+import '../../src/vcf-pdf-viewer.js';

package/vcf-pdf-viewer.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vcf-pdf-viewer.js';
+import './theme/base/vcf-pdf-viewer.js';
 export * from './src/vcf-pdf-viewer.js';

package/theme/lumo/vcf-pdf-viewer-styles.js

@@ -1,153 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-
-import '@vaadin/select/theme/lumo/vaadin-select-styles.js';
-import '@vaadin/list-box/theme/lumo/vaadin-list-box-styles.js';
-import '@vaadin/item/theme/lumo/vaadin-item-styles.js';
-
-registerStyles(
-    'vcf-pdf-viewer',
-    css`
-      :host {
-        background-color: var(--lumo-base-color);
-        border: 1px solid var(--lumo-contrast-10pct);
-        border-radius: var(--lumo-border-radius, var(--lumo-border-radius-m));
-        font-family: var(--lumo-font-family);
-        position: relative;
-      }
-
-      [part~="viewer-container"] {
-        background-color: var(--lumo-contrast-5pct);
-        outline: none;
-      }
-
-      [part~="viewer-container"][focus-ring] {
-        box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
-      }
-
-      [part~="toolbar"] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        border-bottom: 1px solid var(--lumo-contrast-10pct);
-        padding: 0 var(--lumo-space-m);
-        z-index: 2;
-      }
-
-      [part~="toolbar-pages"] {
-        display: flex;
-        flex-direction: row;
-        flex: 1;
-        align-items: center;
-        justify-content: flex-end;
-      }
-
-      ::slotted(.toolbar-current-page) {
-        width: 3.25em;
-      }
-
-      [part~="toolbar-page-separator"] {
-        padding: 0 var(--lumo-space-xs);
-      }
-
-      [part~="toolbar-total-pages"] {
-        padding-right: var(--lumo-space-m);
-      }
-
-      [part~="toolbar-title"] {
-        line-height: 2.25rem;
-        display: inline-block;
-        color: var(--lumo-contrast-80pct);
-        padding: var(--lumo-space-xs) 0;
-        flex: 1;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      ::slotted(.toolbar-button) {
-        height: var(--lumo-size-m);
-        border-radius: var(--lumo-border-radius, var(--lumo-border-radius-m));
-        color: var(--lumo-contrast-80pct);
-        transition: background-color 100ms, color 100ms;
-        margin: var(--lumo-space-xs);
-        background: transparent;
-        border: none;
-      }
-
-      ::slotted(.toolbar-button[disabled]) {
-        color: var(--lumo-contrast-40pct);
-      }
-
-      ::slotted(.toolbar-button:hover) {
-        background-color: var(--lumo-contrast-5pct);
-        color: var(--lumo-contrast-80pct);
-      }
-
-      ::slotted(.toolbar-button[disabled]:hover) {
-        background-color: transparent;
-        color: var(--lumo-contrast-40pct);
-      }
-
-      ::slotted(.toolbar-button:focus) {
-        outline: none;
-        box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
-      }
-
-      .page {
-        padding: var(--lumo-space-m);
-        padding-bottom: 0;
-      }
-
-      .page:last-child {
-        padding-bottom: var(--lumo-space-m);
-      }
-
-      .textLayer {
-        top: var(--lumo-space-m);
-        right: var(--lumo-space-m);
-        bottom: var(--lumo-space-m);
-        left: var(--lumo-space-m);
-        opacity: 0.2;
-      }
-
-      .textLayer ::-moz-selection {
-        background: rgb(0, 0, 255);
-      }
-
-      .textLayer ::selection {
-        background: rgb(0, 0, 255);
-      }
-
-      .textLayer .highlight {
-        background-color: rgb(180, 0, 170);
-        border-radius: 4px;
-      }
-
-      .textLayer .highlight.selected {
-        background-color: rgb(0, 100, 0);
-      }
-
-      [part~="toolbar"].small-size [part~="toolbar-pages"] {
-        flex: none;
-      }
-
-      [part~="toolbar"].small-size ::slotted(.toolbar-zoom) {
-        position: absolute;
-        bottom: var(--lumo-space-s);
-        left: 50%;
-        margin-left: -100px;
-        background-color: white;
-        box-shadow: var(--lumo-box-shadow-m);
-        padding: var(--lumo-space-xs);
-        z-index: 99;
-      }
-     `,
-    { moduleId: 'lumo-vcf-pdf-viewer' }
-  );
-  

package/theme/lumo/vcf-pdf-viewer-toolbar-icons-styles.js

@@ -1,35 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-
-import '@vaadin/icon/theme/lumo/vaadin-icon-styles.js';
-
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-
-registerStyles(
-    'vaadin-icon',
-    css`
-      :host::before {
-        font-size: var(--lumo-icon-size-m);
-        font-family: 'lumo-icons';
-        line-height: 1;        
-      }
-
-      :host(.previous-page-button-icon)::before {
-        content: var(--pdf-viewer-previous-page-button-icon, var(--lumo-icons-angle-up));
-      }
-
-      :host(.next-page-button-icon)::before {
-        content: var(--pdf-viewer-next-page-button-icon, var(--lumo-icons-angle-down));
-      }
-
-      :host(.toggle-button-icon)::before {
-        content: var(--pdf-viewer-toggle-button-icon, var(--lumo-icons-chevron-right));
-      }
-   
-      :host(.sidebarOpen.toggle-button-icon)::before {
-        content:var(--pdf-viewer-toggle-button-icon, var(--lumo-icons-chevron-left));
-      } 
-   
-     `,
-    { moduleId: 'lumo-vcf-pdf-viewer-toolbar-icons' }
-  );
-  

package/theme/lumo/vcf-pdf-viewer.js

@@ -1,3 +0,0 @@
-import '../../src/vcf-pdf-viewer.js';
-import './vcf-pdf-viewer-styles.js';
-import './vcf-pdf-viewer-toolbar-icons-styles.js';

package/theme/material/baseline-keyboard_arrow_down-24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>

package/theme/material/baseline-keyboard_arrow_up-24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

package/theme/material/vcf-pdf-viewer-styles.js

@@ -1,123 +0,0 @@
-
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-
-import '@vaadin/text-field/theme/material/vaadin-text-field-styles.js';
-import '@vaadin/select/theme/material/vaadin-select-styles.js';
-import '@vaadin/list-box/theme/material/vaadin-list-box-styles.js';
-import '@vaadin/item/theme/material/vaadin-item-styles.js';
-
-registerStyles(
-  'vcf-pdf-viewer',
-  css`
-      :host {
-        font-family: var(--material-font-family);
-        position: relative;
-      }
-
-      [part~="viewer-container"] {
-        background-color: var(--material-secondary-background-color);
-        border: 1px solid rgba(0, 0, 0, 0.12);
-        outline: none;
-      }
-
-      [part~="viewer-container"][focus-ring] {
-        box-shadow: 0 0 0 2px var(--material-primary-color);
-      }
-
-      [part~="toolbar"] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: 0 8px;
-        z-index: 2;
-      }
-
-      [part~="toolbar-pages"] {
-        display: flex;
-        flex-direction: row;
-        flex: 1;
-        align-items: center;
-        justify-content: flex-end;
-      }
-
-      [part~="toolbar-current-page"] {
-        width: 3.25em;
-      }
-
-      [part~="toolbar-page-separator"] {
-        padding: 0 4px;
-      }
-
-      [part~="toolbar-total-pages"] {
-        padding-right: 4px;
-      }
-
-      [part~="toolbar-title"] {
-        line-height: 2.25rem;
-        display: inline-block;
-        padding: 4px 0;
-        flex: 1;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      [part~="toolbar-button"] {
-        width: 32px;
-        height: 32px;
-        color: black;
-        margin: 2px;
-        background: transparent;
-        border: none;
-        opacity: 0.7;
-      }
-
-      [part~="toolbar-button"][disabled] {
-        opacity: 0.4;
-      }
-
-      [part~="toolbar-button"]:hover {
-        opacity: 1;
-      }
-
-      [part~="toolbar-button"][disabled]:hover {
-        opacity: 0.4;
-      }
-
-      [part~="previous-page-button-icon"]::before {
-        content: url('baseline-keyboard_arrow_up-24px.svg');
-      }
-
-      [part~="next-page-button-icon"]::before {
-        content: url('baseline-keyboard_arrow_down-24px.svg');
-      }
-
-      .page {
-        padding: 8px;
-        padding-bottom: 0;
-      }
-
-      .page:last-child {
-        padding-bottom: 8px;
-      }
-
-      [part~="toolbar"].small-size [part~="toolbar-pages"] {
-        flex: none;
-      }
-
-      [part~="toolbar"].small-size [part~="toolbar-zoom"] {
-        position: absolute;
-        bottom: 8px;
-        left: 50%;
-        margin-left: -100px;
-        background-color: white;
-        border: 1px solid rgba(0, 0, 0, 0.12);
-        padding: 0 4px;
-        z-index: 99;
-      }
-      `,
-  { moduleId: 'material-vcf-pdf-viewer' }
-);

package/theme/material/vcf-pdf-viewer.js

@@ -1,2 +0,0 @@
-import '../../src/vcf-pdf-viewer.js';
-import './vcf-pdf-viewer-styles.js';