@dbcdk/react-components 0.0.95 → 0.0.97

package/dist/components/page-layout/PageLayout.module.css

@@ -1,236 +0,0 @@
-/* Root shell */
-.root {
-  width: 100%;
-  max-width: 100%;
-  display: grid;
-  gap: 0;
-}
-
-/* Viewport handling:
-   - containScrolling => app-shell: lock to viewport and manage scroll in regions
-   - documentScrolling => let page scroll normally
-*/
-.containScrolling {
-  height: 100vh;
-  height: 100dvh;
-  overflow: hidden;
-}
-
-.documentScrolling {
-  min-height: 100vh;
-  min-height: 100dvh;
-  overflow: visible;
-}
-
-/* Orientation layouts */
-.vertical {
-  grid-template-columns: auto minmax(0, 1fr);
-}
-
-.horizontal {
-  grid-template-columns: minmax(0, 1fr);
-}
-
-/* Sidebar */
-.sidebar {
-  min-width: 0;
-  overflow: hidden;
-  background: var(--color-bg-surface);
-}
-
-.containScrolling .sidebar {
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-/* In document-scrolling vertical layouts, keep the sidebar pinned to the viewport
-   and let it manage its own scroll independently of body scrolling. */
-.documentScrolling.vertical .sidebar {
-  position: sticky;
-  top: 0;
-  align-self: start;
-  block-size: 100vh;
-  block-size: 100dvh;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-/* In horizontal orientation, sidebar becomes a top block if used */
-.horizontal .sidebar {
-  grid-column: 1 / -1;
-  border-right: none;
-  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
-}
-
-/* Main column:
-   Use flex so the "rest of space" logic works reliably.
-*/
-.mainColumn {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  background: var(--color-bg-surface);
-}
-
-/* In containScrolling mode, mainColumn must fill the viewport height
-   so the flex "remaining space" can be computed.
-*/
-.containScrolling .mainColumn {
-  height: 100%;
-  min-height: 0; /* important: allows children to shrink */
-}
-
-/* Regions */
-.header {
-  min-width: 0;
-  background: var(--color-bg-surface);
-  border-bottom: var(--border-width-thin) solid var(--color-border-default);
-  flex: 0 0 auto;
-}
-
-/* Sticky header only when the document is scrolling (body scroll) */
-.documentScrolling .header {
-  position: sticky;
-  top: 0;
-  z-index: var(--z-sticky);
-}
-
-.hero {
-  min-width: 0;
-  background: var(--color-bg-surface);
-  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
-  flex: 0 0 auto;
-}
-
-/* Scroll wrapper: contains content + footer */
-.mainScroll {
-  min-width: 0;
-  min-height: 0; /* CRITICAL for nested flex/scroll */
-  display: flex;
-  flex-direction: column;
-
-  /* This is the "take all remaining space" bit */
-  flex: 1 1 auto;
-
-  /* default: documentScrolling uses normal page flow */
-  overflow: visible;
-}
-
-/* Contained scrolling: mainScroll scrolls (includes footer) */
-.containScrolling .mainScroll {
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-/* Content area (not a scroll container anymore) */
-.content {
-  min-width: 0;
-  min-height: 0;
-  flex: 1 1 auto; /* take remaining space inside mainScroll */
-  display: flex; /* lets contentInner stretch */
-  flex-direction: column;
-  align-items: center;
-
-  background: var(--color-bg-surface);
-  padding: var(--spacing-lg) var(--spacing-md);
-  overflow: visible;
-}
-
-.footer {
-  min-width: 0;
-  background: var(--color-bg-surface-subtle);
-  display: flex;
-  justify-content: center;
-
-  /* When there is extra space (content is short), this pushes footer to the bottom.
-     When content is long, footer follows content normally and is reached by scrolling.
-  */
-  margin-top: auto;
-  flex: 0 0 auto;
-}
-
-/* Header slot wrappers */
-.headerContainer {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  padding-inline: var(--spacing-md);
-}
-
-.headerContent {
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.footerContent {
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.maxWidthMd {
-  max-width: 1600px;
-  margin-inline: auto;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.maxWidthSm {
-  margin-inline: auto;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-@media (min-width: 640px) {
-  .maxWidthSm {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-  .maxWidthSm {
-    max-width: 668px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .maxWidthSm {
-    max-width: 924px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .maxWidthSm {
-    max-width: 1180px;
-  }
-}
-
-/* Content slot inner wrapper (so maxWidth works without interfering with scroll) */
-.contentInner {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xl);
-  width: 100%;
-  box-sizing: border-box;
-  min-width: 0;
-
-  /* This is what makes your "main content" actually expand to fill */
-  flex: 1 1 auto;
-  min-height: 0;
-}
-
-/* Optional: for small viewport heights, avoid forced viewport locking */
-@media (max-height: 400px) {
-  .containScrolling {
-    height: auto;
-    overflow: visible;
-  }
-
-  /* In this mode, avoid forcing a nested scroll region */
-  .containScrolling .mainScroll {
-    overflow: visible;
-  }
-
-  .containScrolling .mainColumn {
-    height: auto;
-  }
-}

package/dist/components/page-layout/components/layout-footer/LayoutFooter.js

@@ -1,27 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Logo } from '../../../../assets/logo';
-import { Hyperlink } from '../../../../components/hyperlink/Hyperlink';
-import styles from './LayoutFooter.module.css';
-const DEFAULT_META_PARTS = [
-    'Tempovej 7-11',
-    'DK-2750 Ballerup',
-    '+45 44 86 77 11',
-    `© ${new Date().getFullYear()} DBC DIGITAL A/S`,
-];
-const DEFAULT_LINKS = [
-    {
-        label: 'Kundeservice',
-        href: 'https://kundeservice.dbc.dk',
-        external: true,
-    },
-    {
-        label: 'Cookies',
-        href: '/cookies',
-    },
-];
-export function LayoutFooter({ links = DEFAULT_LINKS, metaParts = DEFAULT_META_PARTS, extraLinks, }) {
-    return (_jsx("footer", { className: styles.footer, children: _jsxs("div", { className: styles.inner, children: [_jsxs("div", { className: styles.brand, children: [_jsx("div", { className: styles.logoRow, children: _jsx(Logo, {}) }), _jsx("address", { className: styles.meta, children: metaParts.map(part => (_jsx("span", { className: styles.part, children: part }, part))) })] }), _jsxs("nav", { className: styles.links, "aria-label": "Footer navigation", children: [extraLinks &&
-                            extraLinks.length > 0 &&
-                            (extraLinks === null || extraLinks === void 0 ? void 0 : extraLinks.map((link, index) => _jsx("span", { children: link }, index))), links.map(link => (_jsx("span", { children: _jsx(Hyperlink, { href: link.href, ...(link.external ? { target: '_blank', rel: 'noopener noreferrer' } : {}), children: link.label }) }, link.label)))] })] }) }));
-}

package/dist/components/page-layout/components/layout-footer/LayoutFooter.module.css

@@ -1,89 +0,0 @@
-.footer {
-  inline-size: 100%;
-  background: var(--color-bg-surface-subtle);
-  line-height: var(--line-height-normal);
-}
-
-.inner {
-  inline-size: 100%;
-  max-inline-size: var(--container-xl);
-  margin-inline: auto;
-  padding-block: var(--spacing-lg);
-  padding-inline: var(--spacing-md);
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: var(--spacing-2xl);
-}
-
-.brand {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  flex-shrink: 0;
-}
-
-.logoRow {
-  flex-shrink: 0;
-}
-
-.logoRow svg {
-  height: 24px;
-  width: auto;
-  color: var(--color-brand);
-  display: block;
-}
-
-.meta {
-  font-style: normal;
-  margin: 0;
-  color: var(--color-fg-subtle);
-  line-height: var(--line-height-normal);
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.part {
-  white-space: nowrap;
-}
-
-.links {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0;
-  line-height: var(--line-height-normal);
-}
-
-.linkGroup {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--spacing-2xs);
-}
-
-.linkGroup + .linkGroup {
-  margin-block-start: var(--spacing-sm);
-  padding-inline: 0;
-  border-inline-start: none;
-}
-
-.linkItem {
-  white-space: nowrap;
-}
-
-@media (max-width: 640px) {
-  .inner {
-    flex-direction: column;
-    gap: var(--spacing-md);
-  }
-
-  .linkGroup {
-    padding-inline: 0;
-  }
-
-  .linkGroup:first-child {
-    padding-inline-start: 0;
-  }
-}

package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import heroStyles from './PageLayoutHero.module.css';
-import layoutStyles from '../../PageLayout.module.css';
-function getMaxWidthClass(value) {
-    if (!value)
-        return '';
-    if (value === 'sm')
-        return layoutStyles.maxWidthSm;
-    return layoutStyles.maxWidthMd;
-}
-export const PageLayoutHero = ({ children, link, metaHeadline, headline, image, maxWidth = 'md', textBgColor = 'var(--color-primary-900)', }) => {
-    const content = (_jsx("div", { className: `${heroStyles.heroContainer} ${getMaxWidthClass(maxWidth)}`, children: _jsxs("div", { className: heroStyles.splitWrapper, children: [_jsx("div", { className: heroStyles.imageColumn, children: image }), _jsx("div", { className: heroStyles.textColumn, style: { backgroundColor: textBgColor }, children: _jsxs("div", { className: heroStyles.textInner, children: [metaHeadline && _jsx("div", { className: heroStyles.metaHeadline, children: metaHeadline }), headline && (_jsx("div", { className: heroStyles.headline, children: _jsx("h2", { children: headline }) })), children] }) })] }) }));
-    return link ? _jsx(_Fragment, { children: link(content) }) : _jsx(_Fragment, { children: content });
-};

package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.module.css

@@ -1,84 +0,0 @@
-.heroContainer {
-  width: 100%;
-  box-sizing: border-box;
-  background-color: var(--color-brand);
-}
-
-.splitWrapper {
-  display: flex;
-  width: 100%;
-  height: clamp(260px, 60vh, 540px);
-  overflow: hidden;
-}
-
-/* LEFT SIDE — IMAGE */
-.imageColumn {
-  flex: 0 0 60%;
-  position: relative;
-  overflow: hidden;
-}
-
-.imageColumn img,
-.imageColumn picture,
-.imageColumn video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-/* RIGHT SIDE — TEXT BLOCK */
-.textColumn {
-  flex: 0 0 40%;
-  color: var(--color-fg-on-brand);
-  display: flex;
-  align-items: flex-end;
-  padding: var(--spacing-lg);
-  position: relative;
-}
-
-.textInner {
-  z-index: 1;
-  max-width: 500px;
-}
-
-.metaHeadline {
-  text-transform: uppercase;
-  opacity: 0.9;
-  font-size: var(--font-size-lg);
-  font-weight: 400;
-  margin-bottom: var(--spacing-xs);
-}
-
-.metaHeadline::after {
-  content: '';
-  display: block;
-  width: 40px;
-  height: 3px;
-  background-color: var(--color-fg-on-brand);
-  margin-top: 4px;
-  border-radius: 2px;
-}
-
-.headline h2 {
-  margin: 0 0 var(--spacing-sm) 0;
-  font-size: var(--font-size-3xl);
-  color: var(--color-fg-on-brand);
-}
-
-@media (max-width: 900px) {
-  .splitWrapper {
-    flex-direction: column;
-    height: auto;
-  }
-
-  .imageColumn,
-  .textColumn {
-    flex: none;
-    width: 100%;
-  }
-
-  .textColumn {
-    padding: var(--spacing-xl) var(--spacing-lg);
-  }
-}

package/dist/components/pagination/Pagination.js

@@ -1,56 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowLeft, ArrowRight, ChevronDown, ChevronsLeft, ChevronsRight } from 'lucide-react';
-import { useMemo, useCallback, useRef } from 'react';
-import styles from './Pagination.module.css';
-import { Button } from '../button/Button';
-import { Menu } from '../menu/Menu';
-import { Popover } from '../popover/Popover';
-const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100];
-const NUMBER_LOCALE = 'da-DK';
-export function Pagination({ itemsCount = 0, skip = 0, take = DEFAULT_PAGE_SIZE_OPTIONS[1], onPageChange, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, showFirstLast = true, showGoToPage = true, }) {
-    const popoverRef = useRef(null);
-    const pageSizeRef = useRef(null);
-    const formatNumber = useCallback((value) => value.toLocaleString(NUMBER_LOCALE), []);
-    const totalPages = useMemo(() => Math.max(1, Math.ceil(itemsCount / Math.max(1, take))), [itemsCount, take]);
-    const currentPage = useMemo(() => {
-        const p = Math.floor(skip / Math.max(1, take)) + 1;
-        return Math.min(Math.max(1, p), totalPages);
-    }, [skip, take, totalPages]);
-    const emit = useCallback((page, nextTake = take) => {
-        const nextTotalPages = Math.max(1, Math.ceil(itemsCount / Math.max(1, nextTake)));
-        const clampedPage = Math.min(Math.max(1, page), nextTotalPages);
-        const nextSkip = (clampedPage - 1) * nextTake;
-        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange({
-            page: clampedPage,
-            take: nextTake,
-            skip: nextSkip,
-            totalPages: nextTotalPages,
-        });
-    }, [onPageChange, take, itemsCount]);
-    const firstPage = useCallback(() => emit(1), [emit]);
-    const lastPage = useCallback(() => emit(totalPages), [emit, totalPages]);
-    const prevPage = useCallback(() => emit(currentPage - 1), [emit, currentPage]);
-    const nextPage = useCallback(() => emit(currentPage + 1), [emit, currentPage]);
-    const goToPage = useCallback((page) => emit(page), [emit]);
-    const canPrev = currentPage > 1;
-    const canNext = currentPage < totalPages;
-    const rangeLabel = useMemo(() => {
-        if (itemsCount <= 0)
-            return '0 af 0';
-        const first = skip + 1;
-        const last = Math.min(skip + take, itemsCount);
-        return `${formatNumber(first)}\u2013${formatNumber(last)} af ${formatNumber(itemsCount)}`;
-    }, [formatNumber, itemsCount, skip, take]);
-    const pages = useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages]);
-    const handlePageSizeChange = useCallback((size) => emit(1, size), [emit]);
-    return (_jsxs("div", { className: styles.container, children: [showFirstLast && (_jsx(Button, { size: "sm", icon: _jsx(ChevronsLeft, {}), disabled: !canPrev, onClick: firstPage, "aria-label": "First page" })), _jsx(Button, { size: "sm", icon: _jsx(ArrowLeft, {}), disabled: !canPrev, onClick: prevPage, "aria-label": "Previous page" }), _jsx("div", { className: styles.range, "aria-live": "polite", children: rangeLabel }), _jsx(Button, { size: "sm", icon: _jsx(ArrowRight, {}), disabled: !canNext, onClick: nextPage, "aria-label": "Next page" }), showFirstLast && (_jsx(Button, { size: "sm", icon: _jsx(ChevronsRight, {}), disabled: !canNext, onClick: lastPage, "aria-label": "Last page" })), showGoToPage && (_jsx(Popover, { ref: popoverRef, trigger: open => (_jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: ["Side ", formatNumber(currentPage), "/", formatNumber(totalPages), " ", _jsx(ChevronDown, { size: 16 })] })), children: _jsx(Menu, { children: pages === null || pages === void 0 ? void 0 : pages.map(page => (_jsx(Menu.Item, { active: page === currentPage, children: _jsx("button", { onClick: () => {
-                                var _a;
-                                goToPage(page);
-                                (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
-                            }, children: formatNumber(page) }) }, page))) }) })), _jsx(Popover, { ref: pageSizeRef, trigger: open => (_jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: ["Vis ", formatNumber(take), " ", _jsx(ChevronDown, { size: 16 })] })), children: _jsx(Menu, { children: pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions.map(size => (_jsx(Menu.Item, { active: size === take, children: _jsx("button", { onClick: () => {
-                                var _a;
-                                handlePageSizeChange(size);
-                                (_a = pageSizeRef.current) === null || _a === void 0 ? void 0 : _a.close();
-                            }, children: formatNumber(size) }) }, size))) }) })] }));
-}

package/dist/components/pagination/Pagination.module.css

@@ -1,25 +0,0 @@
-.container {
-  display: flex;
-  gap: var(--spacing-xxs);
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto;
-  max-width: 100%;
-  overflow-x: auto;
-}
-
-.ellipsisButton {
-  display: none;
-}
-
-@media (min-width: 480px) {
-  .ellipsisButton {
-    display: contents;
-  }
-}
-.range {
-  min-width: 110px;
-  text-align: center;
-  font-size: var(--font-size-xs);
-  padding: 0 var(--spacing-xxs);
-}

package/dist/components/panel/Panel.js

@@ -1,7 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './Panel.module.css';
-import { Headline } from '../headline/Headline';
-export function Panel({ header, subheader, headerIcon, headerAddition, children, severity, size, }) {
-    return (_jsxs("section", { className: `${styles.container} ${size ? styles[size] : ''}`, children: [_jsx("div", { className: styles.header, children: _jsx(Headline, { disableMargin: true, size: size === 'sm' ? 4 : 3, icon: headerIcon, addition: headerAddition, subheader: subheader, severity: severity, children: header }) }), _jsx("div", { className: styles.content, children: children })] }));
-}

package/dist/components/panel/Panel.module.css

@@ -1,29 +0,0 @@
-.container {
-  border: var(--border-width-thin) solid var(--color-border-subtle);
-  border-radius: var(--border-radius-md);
-  background-color: var(--color-bg-surface);
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-}
-
-.header {
-  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
-  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
-}
-
-.content {
-  padding: var(--spacing-md);
-}
-
-.header {
-  padding: var(--spacing-sm) var(--spacing-md);
-  background-color: var(--table-header-bg);
-}
-
-.container.sm {
-  .header,
-  .content {
-    padding: var(--spacing-xs) var(--spacing-md);
-  }
-}