@webority/theme 0.21.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "Webority shared design system — Bootstrap 5.3 SCSS overrides, --wui-* tokens, and shared component CSS. The single source of brand chrome for React portals and Razor sites.",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {

package/scss/_wui-components.scss

@@ -50,6 +50,7 @@
 @import "wui/shell";
 @import "wui/dock";
 @import "wui/consent-banner";
+@import "wui/file-viewer";
 @import "wui/toolbar";
 @import "wui/theme-toggle";
 // After `overlays`: anchors the shared modal shell to the top when it holds the palette card.

package/scss/wui/_file-viewer.scss

@@ -0,0 +1,502 @@
+// ── File viewer ──
+// AppFileViewer / <app-file-viewer> / <wui-file-viewer>: a file shown inside the page, with a
+// toolbar above it. The element builds the markup and the PDF pages; everything visual is here.
+//
+// Part of the wui-components layer: see _wui-components.scss for load order.
+
+wui-file-viewer {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 70vh;
+    min-height: 420px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-lg);
+    overflow: hidden;
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+// Full screen fills the screen edge to edge.
+wui-file-viewer:fullscreen {
+    border: 0;
+    border-radius: 0;
+}
+
+// In a narrow viewer the name gives way first, down to a short ellipsis; past that the page and
+// zoom controls wrap onto a second row instead of shrinking over one another.
+.wui-file-viewer-toolbar {
+    flex: 0 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px 12px;
+    padding: 8px 12px;
+    background: var(--color-surface);
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-file-viewer-group {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+}
+.wui-file-viewer-start {
+    flex: 1 1 140px;
+}
+.wui-file-viewer-center,
+.wui-file-viewer-end {
+    flex: 0 0 auto;
+}
+.wui-file-viewer-end {
+    justify-content: flex-end;
+}
+.wui-file-viewer-center:empty,
+.wui-file-viewer-view-end:empty,
+.wui-file-viewer-actions:empty {
+    display: none;
+}
+.wui-file-viewer-actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.wui-file-viewer-actions[hidden],
+.wui-file-viewer-download[hidden],
+.wui-file-viewer-fullscreen[hidden] {
+    display: none;
+}
+.wui-file-viewer-name {
+    min-width: 0;
+    max-width: 320px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 13px;
+    font-weight: 500;
+}
+.wui-file-viewer-page {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: var(--color-text-subtle);
+}
+.wui-file-viewer-page-input {
+    width: 40px;
+    height: 30px;
+    text-align: center;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-sm);
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+    font-size: 13px;
+    font-weight: 600;
+}
+.wui-file-viewer-page-input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    background: var(--color-surface);
+}
+.wui-file-viewer-page-input:focus-visible {
+    box-shadow: 0 0 0 2px var(--color-primary);
+}
+.wui-file-viewer-page-total {
+    white-space: nowrap;
+}
+// The zoom level, which opens the zoom menu.
+.wui-file-viewer-zoom {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    min-width: 58px;
+    height: 30px;
+    padding: 0 6px;
+    border: 0;
+    border-radius: var(--wui-radius-sm);
+    background: transparent;
+    color: var(--color-text);
+    font-size: 13px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+}
+.wui-file-viewer-zoom:hover {
+    background: var(--color-bg-subtle);
+}
+.wui-file-viewer-zoom:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 1px;
+}
+// The zoom menu, placed against its button by the element (position: fixed).
+.wui-file-viewer-menu {
+    z-index: var(--wui-z-dropdown);
+    min-width: 150px;
+}
+.wui-file-viewer-menu .dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+// Keeps an unticked choice's label in line with the ticked one's.
+.wui-file-viewer-menu-tick {
+    display: inline-flex;
+    width: 16px;
+}
+.wui-file-viewer-divider {
+    width: 1px;
+    height: 22px;
+    margin: 0 2px;
+    background: var(--color-border);
+}
+
+// The search row: a full-width second row of the toolbar while search is open.
+.wui-file-viewer-search {
+    flex: 1 0 100%;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+}
+.wui-file-viewer-search[hidden] {
+    display: none;
+}
+.wui-file-viewer-search-field {
+    flex: 0 1 320px;
+    min-width: 0;
+}
+.wui-file-viewer-search-count {
+    min-width: 72px;
+    font-size: 13px;
+    color: var(--color-text-subtle);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.wui-file-viewer-body {
+    flex: 1 1 auto;
+    display: flex;
+    min-height: 0;
+}
+.wui-file-viewer-status {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    width: 100%;
+    padding: 48px;
+    font-size: 14px;
+    color: var(--color-text-subtle);
+    text-align: center;
+}
+.wui-file-viewer-status p {
+    margin: 0;
+}
+
+.wui-file-viewer-thumbs {
+    flex: 0 0 auto;
+    width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: var(--color-surface);
+    border-right: 1px solid transparent;
+    opacity: 0;
+    transition:
+        width 0.24s var(--wui-ease-ui),
+        padding 0.24s var(--wui-ease-ui),
+        opacity 0.2s ease 0.04s;
+}
+.wui-file-viewer-thumbs.open {
+    width: 210px;
+    padding: 18px 0;
+    border-right-color: var(--color-border);
+    opacity: 1;
+}
+.wui-file-viewer-thumb {
+    display: block;
+    flex: none;
+    width: calc(100% - 36px);
+    margin-bottom: 18px;
+    padding: 0;
+    border: 2px solid transparent;
+    border-radius: var(--wui-radius-sm);
+    background: transparent;
+    cursor: pointer;
+    line-height: 0;
+}
+.wui-file-viewer-thumb.active {
+    border-color: var(--color-primary);
+}
+.wui-file-viewer-thumb-frame {
+    display: block;
+    width: 100%;
+    background: #fff;
+}
+.wui-file-viewer-thumb-frame canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+.wui-file-viewer-thumb-no {
+    display: block;
+    padding: 3px 0 1px;
+    font-size: 11px;
+    line-height: 1.2;
+    color: var(--color-text-subtle);
+    text-align: center;
+}
+
+.wui-file-viewer-scroll {
+    flex: 1 1 auto;
+    overflow: auto;
+    min-width: 0;
+    // The pages fit the width; a scrollbar appearing must not change that width and set off a
+    // second fit.
+    scrollbar-gutter: stable;
+}
+.wui-file-viewer-scroll:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+}
+// Grab-to-pan: while a drag is active the cursor becomes a fist and selection is suppressed, so
+// dragging across the text pans instead of selecting.
+.wui-file-viewer-scroll.wui-file-viewer-panning {
+    cursor: grabbing;
+    user-select: none;
+}
+// The element places rows from this padding and gap (PAGE_PAD, PAGE_GAP in fileViewerPdf.js);
+// change both together.
+.wui-file-viewer-pages {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    padding: 12px;
+    // Shrink-wraps to the widest page but never below the viewer, so a zoomed page centred by
+    // align-items can still be scrolled to both of its edges.
+    width: max-content;
+    min-width: 100%;
+    margin-inline: auto;
+}
+.wui-file-viewer-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+}
+// Sized by the element to the page's drawn size, so a page outside the drawn window keeps its place.
+.wui-file-viewer-sheet {
+    --user-unit: 1;
+    --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
+    --scale-round-x: 1px;
+    --scale-round-y: 1px;
+    position: relative;
+    flex: none;
+    box-shadow: var(--wui-shadow-card);
+    border-radius: 2px;
+    background: #fff;
+    line-height: 0;
+}
+.wui-file-viewer-canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+.wui-file-viewer-skeleton {
+    width: 100%;
+    height: 100%;
+    background: var(--color-bg-muted);
+}
+
+// The text layer: transparent text laid over the drawing for selecting, copying and searching.
+// From pdf.js's own text layer rules (Apache-2.0, Mozilla Foundation).
+.wui-file-viewer-text {
+    --min-font-size: 1;
+    --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
+    --min-font-size-inv: calc(1 / var(--min-font-size));
+    position: absolute;
+    inset: 0;
+    overflow: clip;
+    z-index: 0;
+    opacity: 1;
+    line-height: 1;
+    text-align: initial;
+    text-size-adjust: none;
+    forced-color-adjust: none;
+    transform-origin: 0 0;
+    caret-color: CanvasText;
+    color-scheme: only light;
+}
+.wui-file-viewer-text :is(span, br) {
+    position: absolute;
+    margin: 0;
+    color: transparent;
+    white-space: pre;
+    cursor: text;
+    transform-origin: 0 0;
+}
+// pdf.js wraps tagged runs in span.markedContent; matched by attribute, since that class is
+// pdf.js's name, not ours.
+.wui-file-viewer-text > :not([class~="markedContent"]),
+.wui-file-viewer-text [class~="markedContent"] span:not([class~="markedContent"]) {
+    --font-height: 0;
+    --scale-x: 1;
+    --rotate: 0deg;
+    z-index: 1;
+    font-size: calc(var(--text-scale-factor) * var(--font-height));
+    transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
+}
+.wui-file-viewer-text [class~="markedContent"] {
+    display: contents;
+}
+.wui-file-viewer-text ::selection {
+    background: color-mix(in srgb, var(--color-primary) 25%, transparent);
+}
+.wui-file-viewer-text br::selection {
+    background: transparent;
+}
+// A search hit inside a text run sits in the run's flow, not positioned like the runs themselves.
+// The text is transparent over the drawing, so the hit is a see-through tint: an opaque one
+// would hide the words it marks.
+.wui-file-viewer-text mark.wui-file-viewer-hit {
+    position: static;
+    margin: -1px;
+    padding: 1px;
+    border-radius: 2px;
+    color: transparent;
+    background: color-mix(in srgb, var(--color-warning) 40%, transparent);
+}
+.wui-file-viewer-text mark.wui-file-viewer-hit-current {
+    background: color-mix(in srgb, var(--color-primary) 45%, transparent);
+    box-shadow: 0 0 0 1px var(--color-primary);
+}
+
+// Links on the page: invisible boxes over the drawn link, a pointer cursor saying they are links.
+.wui-file-viewer-links {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    pointer-events: none;
+}
+.wui-file-viewer-links a {
+    position: absolute;
+    pointer-events: auto;
+}
+.wui-file-viewer-links a:focus-visible {
+    outline: 2px solid var(--color-primary);
+}
+
+// The hidden frame Print fills with page images. Kept in the layout at no size rather than
+// display: none, which can stop a frame's document from laying out and print blank.
+.wui-file-viewer-print-frame {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    width: 0;
+    height: 0;
+    border: 0;
+    opacity: 0;
+    pointer-events: none;
+}
+
+// The wrapper React and Razor put a page's own controls in: it takes no part in the layout, so
+// the controls sit in the actions row like its direct children.
+.wui-file-viewer-slot {
+    display: contents;
+}
+
+// The image view: the stage takes the image's turned size and sits centred while it fits, and
+// scrolls from its edges once zoomed past the view. The image is turned about the stage's centre.
+.wui-file-viewer-image-scroll {
+    display: flex;
+    padding: 16px;
+}
+.wui-file-viewer-image-stage {
+    position: relative;
+    flex: none;
+    margin: auto;
+}
+.wui-file-viewer-image {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    max-width: none;
+    user-select: none;
+    // A checkerboard behind transparent pixels, so a transparent PNG or SVG reads as transparent.
+    background: repeating-conic-gradient(var(--color-bg-muted) 0% 25%, var(--color-surface) 0% 50%) 50% / 16px 16px;
+}
+
+// The video and audio player: the picture (or, for audio, a music mark) fills the body, and the
+// controls run along the bottom. The browser's own controls are never shown.
+.wui-file-viewer-player {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+}
+.wui-file-viewer-stage {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 0;
+    background: #000;
+}
+.wui-file-viewer-stage:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+}
+.wui-file-viewer-video {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    cursor: pointer;
+}
+.wui-file-viewer-player-audio .wui-file-viewer-stage {
+    background: var(--color-bg-muted);
+}
+.wui-file-viewer-audio-art {
+    display: grid;
+    place-items: center;
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    color: var(--color-primary);
+}
+.wui-file-viewer-controls {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: var(--color-surface);
+    border-top: 1px solid var(--color-border);
+}
+.wui-file-viewer-time {
+    flex: none;
+    font-size: 13px;
+    color: var(--color-text-subtle);
+    font-variant-numeric: tabular-nums;
+}
+.wui-file-viewer-seek {
+    flex: 1 1 auto;
+    min-width: 60px;
+}
+// On a phone the volume slider gives way; the mute button stays.
+.wui-file-viewer-volume {
+    display: none;
+    flex: 0 0 90px;
+}
+@include media-breakpoint-up(sm) {
+    .wui-file-viewer-volume {
+        display: block;
+    }
+}
+.wui-file-viewer-speed {
+    min-width: 48px;
+}
+