design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(structure): group components into groups inside the repo

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-08 12:04:01 +00:00
parent f67be189eb
commit 8f8aedc6b0
258 changed files with 675 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1023
ts_web/elements/00group-pdf/dees-pdf-viewer/component.ts Normal file
View File

File diff suppressed because it is too large Load Diff

69
ts_web/elements/00group-pdf/dees-pdf-viewer/demo.ts Normal file
View File

@@ -0,0 +1,69 @@
import { html } from '@design.estate/dees-element';
export const demo = () => html`
<style>
.demo-container {
padding: 40px;
background: #f5f5f5;
}
.demo-section {
margin-bottom: 40px;
}
h3 {
margin-bottom: 20px;
font-size: 18px;
font-weight: 600;
}
dees-pdf-viewer {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
}
.viewer-tall {
height: 800px;
}
.viewer-compact {
height: 500px;
}
</style>
<div class="demo-container">
<div class="demo-section">
<h3>Full Featured PDF Viewer with Toolbar</h3>
<dees-pdf-viewer
class="viewer-tall"
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
showToolbar="true"
showSidebar="false"
initialZoom="page-fit"
></dees-pdf-viewer>
</div>
<div class="demo-section">
<h3>PDF Viewer with Sidebar Navigation</h3>
<dees-pdf-viewer
class="viewer-tall"
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
showToolbar="true"
showSidebar="true"
initialZoom="page-width"
></dees-pdf-viewer>
</div>
<div class="demo-section">
<h3>Compact Viewer without Controls</h3>
<dees-pdf-viewer
class="viewer-compact"
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
showToolbar="false"
showSidebar="false"
initialZoom="auto"
></dees-pdf-viewer>
</div>
</div>
`;

1
ts_web/elements/00group-pdf/dees-pdf-viewer/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './component.js';

291
ts_web/elements/00group-pdf/dees-pdf-viewer/styles.ts Normal file
View File

@@ -0,0 +1,291 @@
import { css, cssManager } from '@design.estate/dees-element';
export const viewerStyles = [
cssManager.defaultStyles,
css`
:host {
display: block;
width: 100%;
height: 600px;
position: relative;
font-family: 'Geist Sans', sans-serif;
contain: layout style;
}
.pdf-viewer {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(215 20% 10%)')};
position: relative;
overflow: hidden;
}
.toolbar {
height: 48px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 15%)')};
border-bottom: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
display: flex;
align-items: center;
padding: 0 16px;
gap: 16px;
flex-shrink: 0;
}
.toolbar-group {
display: flex;
align-items: center;
gap: 4px;
}
.toolbar-group--end {
margin-left: auto;
}
.toolbar-button {
width: 32px;
height: 32px;
border-radius: 6px;
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease;
color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
}
.toolbar-button:hover:not(:disabled) {
background: ${cssManager.bdTheme('hsl(214 31% 92%)', 'hsl(217 25% 22%)')};
}
.toolbar-button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.toolbar-button dees-icon {
font-size: 16px;
}
.page-info {
display: flex;
align-items: center;
gap: 8px;
padding: 0 8px;
font-size: 14px;
color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
}
.page-input {
width: 48px;
height: 28px;
border-radius: 4px;
border: 1px solid ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 28%)')};
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 12%)')};
color: ${cssManager.bdTheme('hsl(222 47% 11%)', 'hsl(210 20% 96%)')};
text-align: center;
font-size: 14px;
font-family: inherit;
outline: none;
}
.page-input:focus {
border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
}
.page-separator {
color: ${cssManager.bdTheme('hsl(215 16% 60%)', 'hsl(215 16% 50%)')};
}
.zoom-level {
font-size: 13px;
font-weight: 500;
min-width: 48px;
text-align: center;
}
.viewer-container {
flex: 1;
display: flex;
overflow: hidden;
position: relative;
min-height: 0;
}
.sidebar {
width: 200px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 15%)')};
border-right: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.sidebar-header {
height: 40px;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
font-size: 13px;
font-weight: 600;
color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
}
.sidebar-close {
width: 24px;
height: 24px;
border-radius: 4px;
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
transition: background 0.15s ease;
}
.sidebar-close:hover {
background: ${cssManager.bdTheme('hsl(214 31% 92%)', 'hsl(217 25% 22%)')};
}
.sidebar-close dees-icon {
font-size: 14px;
}
.sidebar-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 12px;
display: block;
overscroll-behavior: contain;
min-height: 0;
}
.thumbnail {
position: relative;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
transition: border-color 0.15s ease;
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(215 20% 18%)')};
display: block;
width: 100%;
margin-bottom: 12px;
/* Default A4 aspect ratio (297mm / 210mm ≈ 1.414) */
min-height: calc(176px * 1.414);
}
.thumbnail:last-child {
margin-bottom: 0;
}
.thumbnail:hover {
border-color: ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 35%)')};
}
.thumbnail.active {
border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
}
.thumbnail-canvas {
display: block;
width: 100%;
height: auto;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.thumbnail-number {
position: absolute;
bottom: 4px;
right: 4px;
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(0, 0, 0, 0.8)')};
color: white;
font-size: 11px;
font-weight: 500;
padding: 2px 6px;
border-radius: 4px;
}
.viewer-main {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 20px;
scroll-behavior: smooth;
overscroll-behavior: contain;
min-height: 0;
position: relative;
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 16px;
color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
}
.loading-spinner {
width: 32px;
height: 32px;
border-radius: 50%;
border: 3px solid ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 28%)')};
border-top-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.loading-text {
font-size: 14px;
font-weight: 500;
}
.pages-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.page-wrapper {
display: flex;
justify-content: center;
width: 100%;
}
.canvas-container {
background: white;
box-shadow: 0 2px 12px ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.3)')};
border-radius: 4px;
overflow: hidden;
display: inline-block;
}
.page-canvas {
display: block;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.pdf-viewer.with-sidebar .viewer-main {
margin-left: 0;
}
`,
];