@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/filter-field/FilterField.module.css

@@ -0,0 +1,304 @@
+.filterField {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  font-size: var(--font-size-sm);
+  font-family: var(--font-family);
+  color: var(--color-fg-default);
+}
+
+.filterField.sm {
+  min-block-size: var(--component-size-sm);
+}
+
+.filterField.md {
+  min-block-size: var(--component-size-md);
+}
+
+.filterField.lg {
+  min-block-size: var(--component-size-lg);
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  flex: 0 0 auto;
+  min-width: 0;
+  padding-inline: var(--spacing-sm) 2px;
+  padding-block: 0;
+  color: var(--color-fg-muted);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-default);
+  line-height: var(--line-height-normal);
+  white-space: nowrap;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+.controlGroup {
+  display: inline-flex;
+  align-items: stretch;
+  min-width: 9rem;
+  max-width: 100%;
+  flex: 1 1 auto;
+  overflow: hidden;
+  position: relative;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--border-radius-default);
+  box-shadow: var(--shadow-xs);
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+
+.surface .controlGroup:hover:not(.disabled) {
+  border-color: var(--color-border-default);
+  box-shadow: var(--shadow-sm);
+}
+
+.outlined .controlGroup {
+  box-shadow: none;
+}
+
+.outlined .controlGroup:hover:not(.disabled) {
+  border-color: var(--color-border-default);
+}
+
+.subtle .controlGroup {
+  background: var(--color-bg-toolbar);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px transparent;
+}
+
+.subtle .controlGroup:hover:not(.disabled) {
+  background: var(--color-bg-surface-strong);
+}
+
+.filterField.active .controlGroup {
+  background: var(--color-bg-surface);
+  border-color: var(--color-border-strong);
+}
+
+.subtle.active .controlGroup {
+  background: var(--color-bg-toolbar);
+  border-color: color-mix(in srgb, var(--color-border-strong) 75%, transparent);
+}
+
+.filterField.active .label,
+.filterField.active .operatorTrigger,
+.filterField.active .valueWrapper {
+  color: var(--color-fg-default);
+}
+
+.invalid {
+  border-color: var(--color-status-danger-border);
+}
+
+.invalid:focus-within {
+  border-color: var(--color-status-danger-border);
+}
+
+.disabled {
+  background: var(--color-disabled-bg);
+  border-color: var(--color-disabled-border);
+  box-shadow: none;
+}
+
+.operatorWrapper {
+  display: flex;
+  align-items: stretch;
+  flex: 0 0 auto;
+  min-width: 0;
+  position: relative;
+}
+
+.operatorWrapper::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0;
+  width: 1px;
+  height: 1rem;
+  background: color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
+  pointer-events: none;
+}
+
+.operatorWrapper:focus-within::after {
+  opacity: 0;
+}
+
+.operatorTrigger.operatorTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  height: 100%;
+  min-width: 0;
+  padding-inline: var(--spacing-xxs);
+  color: var(--color-fg-muted);
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  cursor: pointer;
+  white-space: nowrap;
+  font-family: var(--font-family);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-default);
+  line-height: 1;
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+
+.operatorTrigger:hover:not(:disabled) {
+  color: var(--color-fg-default);
+  background: color-mix(in srgb, var(--color-bg-hover-subtle) 45%, transparent);
+}
+
+.operatorTrigger:focus-visible,
+.operatorTriggerOpen {
+  position: relative;
+  z-index: 1;
+  color: var(--color-fg-default);
+  background: color-mix(in srgb, var(--color-bg-hover-subtle) 55%, transparent);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+  outline: none;
+}
+
+.operatorTrigger:disabled,
+.operatorTrigger[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: var(--color-disabled-fg);
+  background: transparent;
+}
+
+.operatorTrigger svg {
+  flex: 0 0 auto;
+  inline-size: var(--component-size-xxs);
+  block-size: var(--component-size-xxs);
+  color: currentColor;
+}
+
+.operatorText {
+  white-space: nowrap;
+}
+
+.valueWrapper {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1 1 10rem;
+  position: relative;
+}
+
+.valueWrapper:focus-within {
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+.invalid .valueWrapper:focus-within {
+  box-shadow: inset 0 0 0 1px var(--color-status-danger-border);
+}
+
+.valueWrapper > * {
+  min-width: 0;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+.valueWrapper > div {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.valueWrapper.autoWidth {
+  width: auto;
+  flex: 1 1 auto;
+}
+
+.valueWrapper.autoWidth > * {
+  width: auto;
+  max-width: 100%;
+}
+
+.valueWrapper.autoWidth > div {
+  width: auto;
+  max-width: 100%;
+}
+
+.valueWrapper .field {
+  min-height: unset;
+  height: 100%;
+  block-size: 100%;
+  min-width: 0;
+  width: 100%;
+  flex: 1 1 auto;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+.embeddedInputField {
+  min-width: 0;
+  width: 100%;
+  flex: 1 1 auto;
+  padding-inline: 10px var(--spacing-xs);
+}
+
+.embeddedInputElement {
+  flex: 1 1 auto;
+  inline-size: 100%;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  block-size: 100%;
+  min-height: unset;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding-block: 0;
+  padding-inline: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.filterField.active .embeddedInputElement {
+  font-weight: 600;
+}
+
+.filterField.active .embeddedInputElement::placeholder {
+  font-weight: var(--font-weight-default);
+}
+
+.valueWrapper .startAdornment {
+  margin-left: 0;
+  gap: 2px;
+  min-width: 0;
+}
+
+.valueWrapper [data-input-role='clear'] {
+  color: var(--color-fg-muted);
+  background: transparent;
+}
+
+.valueWrapper [data-input-role='clear']:hover {
+  background: color-mix(in srgb, var(--color-bg-hover-subtle) 50%, transparent);
+}
+
+.filterField input {
+  min-width: 0;
+  height: 100%;
+}
+
+.filterField input::placeholder {
+  color: var(--color-fg-subtle);
+}

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.cjs

@@ -0,0 +1,115 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Chip = require('../../../components/chip/Chip');
+var styles = require('./ChipMultiToggle.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function ChipMultiToggle({
+  label,
+  options,
+  selectedValues = [],
+  onChange,
+  onToggle,
+  size = "sm",
+  fullWidth = false,
+  disabled = false,
+  showAllOption = false,
+  allLabel = "Alle",
+  allIcon,
+  allTogglesNone = false,
+  noneValue = "__none__",
+  type = "rounded",
+  dataCy
+}) {
+  const selectedSet = React__default.default.useMemo(() => new Set(selectedValues), [selectedValues]);
+  const isNoneSelected = allTogglesNone && selectedSet.has(noneValue);
+  const isAllSelected = showAllOption && !isNoneSelected && selectedSet.size === 0;
+  const toggleValue = (value) => {
+    if (disabled) return;
+    const next = new Set(selectedSet);
+    if (isNoneSelected) next.delete(noneValue);
+    const willSelect = !next.has(value);
+    if (willSelect) next.add(value);
+    else next.delete(value);
+    const nextArr = Array.from(next);
+    onChange(nextArr);
+    onToggle == null ? void 0 : onToggle(value, willSelect);
+  };
+  const toggleAll = () => {
+    if (disabled) return;
+    if (!allTogglesNone) {
+      onChange([]);
+      return;
+    }
+    if (isAllSelected) {
+      onChange([noneValue]);
+      onToggle == null ? void 0 : onToggle(noneValue, true);
+    } else if (isNoneSelected) {
+      onChange([]);
+      onToggle == null ? void 0 : onToggle(noneValue, false);
+    } else {
+      onChange([]);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.wrapper} ${fullWidth ? styles__default.default.fullWidth : ""}`, "data-cy": dataCy, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
+      showAllOption && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: styles__default.default.chipButton,
+          onClick: toggleAll,
+          "aria-pressed": isAllSelected || isNoneSelected,
+          disabled,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            Chip.Chip,
+            {
+              type,
+              size,
+              severity: "neutral",
+              customIcon: allIcon,
+              selected: isAllSelected || isNoneSelected,
+              children: isNoneSelected ? `${allLabel} (ingen)` : allLabel
+            }
+          )
+        },
+        "__all__"
+      ),
+      options.map((opt) => {
+        const isSelected = !isNoneSelected && selectedSet.has(opt.value);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: styles__default.default.chipButton,
+            onClick: () => toggleValue(opt.value),
+            "aria-pressed": isSelected,
+            disabled,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Chip.Chip,
+              {
+                size,
+                customIcon: opt.icon,
+                severity: "neutral",
+                type,
+                selected: isSelected,
+                children: opt.label
+              }
+            )
+          },
+          opt.value
+        );
+      })
+    ] })
+  ] });
+}
+
+exports.ChipMultiToggle = ChipMultiToggle;

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.d.ts

@@ -0,0 +1,35 @@
+import type { JSX } from 'react';
+import React from 'react';
+interface ChipToggleOption {
+    label: string;
+    value: string;
+    icon?: React.ReactNode;
+}
+interface ChipMultiToggleProps {
+    label?: string;
+    options: ChipToggleOption[];
+    selectedValues: string[];
+    onChange: (nextSelectedValues: string[]) => void;
+    onToggle?: (toggledValue: string, isSelected: boolean) => void;
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    disabled?: boolean;
+    showAllOption?: boolean;
+    allLabel?: string;
+    allIcon?: React.ReactNode;
+    dataCy?: string;
+    type?: 'default' | 'outlined' | 'rounded';
+    /**
+     * If true, clicking "All" toggles between:
+     * - All (no filtering) => []
+     * - None (match nothing) => [noneValue]
+     */
+    allTogglesNone?: boolean;
+    /**
+     * Sentinel stored in selectedValues to represent "none selected".
+     * Must not collide with any real option.value.
+     */
+    noneValue?: string;
+}
+export declare function ChipMultiToggle({ label, options, selectedValues, onChange, onToggle, size, fullWidth, disabled, showAllOption, allLabel, allIcon, allTogglesNone, noneValue, type, dataCy, }: ChipMultiToggleProps): JSX.Element;
+export {};

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.js

@@ -0,0 +1,108 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Chip } from '../../../components/chip/Chip';
+import styles from './ChipMultiToggle.module.css';
+
+function ChipMultiToggle({
+  label,
+  options,
+  selectedValues = [],
+  onChange,
+  onToggle,
+  size = "sm",
+  fullWidth = false,
+  disabled = false,
+  showAllOption = false,
+  allLabel = "Alle",
+  allIcon,
+  allTogglesNone = false,
+  noneValue = "__none__",
+  type = "rounded",
+  dataCy
+}) {
+  const selectedSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);
+  const isNoneSelected = allTogglesNone && selectedSet.has(noneValue);
+  const isAllSelected = showAllOption && !isNoneSelected && selectedSet.size === 0;
+  const toggleValue = (value) => {
+    if (disabled) return;
+    const next = new Set(selectedSet);
+    if (isNoneSelected) next.delete(noneValue);
+    const willSelect = !next.has(value);
+    if (willSelect) next.add(value);
+    else next.delete(value);
+    const nextArr = Array.from(next);
+    onChange(nextArr);
+    onToggle == null ? void 0 : onToggle(value, willSelect);
+  };
+  const toggleAll = () => {
+    if (disabled) return;
+    if (!allTogglesNone) {
+      onChange([]);
+      return;
+    }
+    if (isAllSelected) {
+      onChange([noneValue]);
+      onToggle == null ? void 0 : onToggle(noneValue, true);
+    } else if (isNoneSelected) {
+      onChange([]);
+      onToggle == null ? void 0 : onToggle(noneValue, false);
+    } else {
+      onChange([]);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.wrapper} ${fullWidth ? styles.fullWidth : ""}`, "data-cy": dataCy, children: [
+    label && /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+      showAllOption && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: styles.chipButton,
+          onClick: toggleAll,
+          "aria-pressed": isAllSelected || isNoneSelected,
+          disabled,
+          children: /* @__PURE__ */ jsx(
+            Chip,
+            {
+              type,
+              size,
+              severity: "neutral",
+              customIcon: allIcon,
+              selected: isAllSelected || isNoneSelected,
+              children: isNoneSelected ? `${allLabel} (ingen)` : allLabel
+            }
+          )
+        },
+        "__all__"
+      ),
+      options.map((opt) => {
+        const isSelected = !isNoneSelected && selectedSet.has(opt.value);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: styles.chipButton,
+            onClick: () => toggleValue(opt.value),
+            "aria-pressed": isSelected,
+            disabled,
+            children: /* @__PURE__ */ jsx(
+              Chip,
+              {
+                size,
+                customIcon: opt.icon,
+                severity: "neutral",
+                type,
+                selected: isSelected,
+                children: opt.label
+              }
+            )
+          },
+          opt.value
+        );
+      })
+    ] })
+  ] });
+}
+
+export { ChipMultiToggle };

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.module.css

@@ -0,0 +1,59 @@
+/* ChipMultiToggle.module.css */
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.label {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-fg-muted);
+  white-space: nowrap;
+  line-height: var(--line-height-tight);
+  font-size: var(--font-size-sm);
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-xxs);
+}
+
+.chipButton {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+
+.chipButton:disabled {
+  opacity: 1;
+  color: var(--color-disabled-fg);
+}
+
+.chipButton:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.chipButton:focus-visible > * {
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+.chipButton:focus-visible > .rounded {
+  border-radius: var(--border-radius-rounded);
+}
+
+.chipButton:focus-visible > .default {
+  border-radius: var(--border-radius-default);
+}