@dnb/eufemia 10.8.0 → 10.9.0

package/es/extensions/forms/types.d.ts

@@ -1,11 +1,104 @@
-interface IOptions {
+import { JSONSchema7 } from 'json-schema';
+import { SpacingProps } from '../../components/space/types';
+interface IFormErrorOptions {
     validationRule?: string | string[];
 }
+/**
+ * Standard error object for Eufemia Forms, extending the built-in error with additional information for data handling
+ */
 export declare class FormError extends Error {
     /**
      * What validation rule did the error occur based on? (i.e: minLength, required or maximum)
      */
     validationRule?: string | string[];
-    constructor(message: string, options?: IOptions);
+    constructor(message: string, options?: IFormErrorOptions);
+}
+export declare const pickSpacingProps: <Props extends SpacingProps>(props: Props) => SpacingProps;
+export declare const omitSpacingProps: <Props extends SpacingProps>(props: Props) => Omit<Props, "space" | keyof import("../../components/space/types").SpacingElementProps>;
+interface DefaultErrorMessages {
+    required?: string;
+}
+export interface DataValueReadProps<Value = unknown> {
+    /** JSON Pointer for where the data for this field is located in the source dataset */
+    path?: string;
+    /** JSON Pointer for where the data for this field is located in the source iterate loop element */
+    elementPath?: string;
+    value?: Value;
+}
+export declare function pickDataValueReadProps<Props extends DataValueReadProps>(props: Props): DataValueReadProps;
+export declare function omitDataValueReadProps<Props extends DataValueReadProps>(props: Props): Omit<DataValueReadProps, keyof DataValueReadProps>;
+export interface DataValueWriteProps<Value = unknown, EmptyValue = undefined | string | number> {
+    emptyValue?: EmptyValue;
+    onFocus?: (value: Value | EmptyValue) => void;
+    onBlur?: (value: Value | EmptyValue) => void;
+    onChange?: (value: Value | EmptyValue) => void;
+}
+export declare function pickDataValueWriteProps<Props extends DataValueWriteProps>(props: Props): DataValueWriteProps;
+export declare function omitDataValueWriteProps<Props extends DataValueWriteProps>(props: Props): Omit<DataValueWriteProps, keyof DataValueWriteProps>;
+export type DataValueReadWriteProps<Value = unknown, EmptyValue = undefined | string | number> = DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>;
+export declare function pickDataValueReadWriteProps<Props extends DataValueReadWriteProps>(props: Props): DataValueReadWriteProps;
+export declare function omitDataValueReadWriteProps<Props extends DataValueReadWriteProps>(props: Props): Omit<DataValueReadWriteProps, keyof DataValueReadWriteProps>;
+export type ComponentProps = SpacingProps & {
+    className?: string;
+};
+export type DataValueReadComponentProps<Value = unknown> = ComponentProps & DataValueReadProps<Value>;
+export type DataValueReadWriteComponentProps<Value = unknown, EmptyValue = undefined | string | number> = ComponentProps & DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>;
+export interface FieldProps<Value = unknown, EmptyValue = undefined | string | number, ErrorMessages extends {
+    required?: string;
+} = DefaultErrorMessages> extends DataValueReadWriteComponentProps<Value, EmptyValue> {
+    /** ID added to the actual field component, and linked to the label via for-attribute */
+    id?: string;
+    layout?: 'horizontal' | 'vertical';
+    /** Main label text */
+    label?: string;
+    /** A more discreet text displayed beside the label (i.e for "(optional)") */
+    labelDescription?: string;
+    /** Secondary information displayed at the end of the label line (i.e character counter) */
+    labelSecondary?: string;
+    /** Text showing in place of the value if no value is given */
+    placeholder?: string;
+    info?: Error | FormError | string;
+    warning?: Error | FormError | string;
+    error?: Error | FormError;
+    disabled?: boolean;
+    required?: boolean;
+    schema?: JSONSchema7;
+    validator?: (value: Value | EmptyValue) => Error | undefined | Promise<Error | undefined>;
+    onBlurValidator?: (value: Value | EmptyValue) => Error | undefined | Promise<Error | undefined>;
+    /**
+     * Should error messages based on validation be shown initially (from given value-prop or source data)
+     * before the user interacts with the field?
+     * @default false
+     * */
+    validateInitially?: boolean;
+    /**
+     * Should error messages be shown when touching (like focusing a field and blurring) without having changed
+     * the value? So the user did not introduce a new error, but it was invalid based on validation initially.
+     */
+    validateUnchanged?: boolean;
+    /** Should validation be done while writing, not just when blurring the field? */
+    continuousValidation?: boolean;
+    errorMessages?: ErrorMessages;
+    toInput?: (external: Value | undefined) => any;
+    fromInput?: (...args: any[]) => Value | undefined;
+}
+export interface FieldHelpProps {
+    help?: {
+        title?: string;
+        contents?: string;
+    };
+}
+export interface ValueProps<Value> extends DataValueReadComponentProps<Value> {
+    label?: string;
+    /** Should the component render if the value is empty? */
+    showEmpty?: boolean;
+    /** Text showing in place of the value if no value is given. */
+    placeholder?: string;
+    /** JSON Pointer for where the data for this field is located in the source iterate loop element */
+    elementPath?: string;
+    /** For showing the value inline (not as a block element) */
+    inline?: boolean;
+    /** Prepare value for display (regardless of source like props or data context) */
+    prepare?: (external: Value | undefined) => string;
 }
 export {};

package/es/extensions/forms/types.js

@@ -1,4 +1,6 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+const _excluded = ["space", "top", "bottom", "left", "right"];
 export class FormError extends Error {
   constructor(message, options) {
     super(message);
@@ -8,4 +10,44 @@ export class FormError extends Error {
     }
   }
 }
+export const pickSpacingProps = props => {
+  return {
+    space: props === null || props === void 0 ? void 0 : props.space,
+    top: props === null || props === void 0 ? void 0 : props.top,
+    bottom: props === null || props === void 0 ? void 0 : props.bottom,
+    left: props === null || props === void 0 ? void 0 : props.left,
+    right: props === null || props === void 0 ? void 0 : props.right
+  };
+};
+export const omitSpacingProps = props => {
+  const {
+      space,
+      top,
+      bottom,
+      left,
+      right
+    } = props,
+    restProps = _objectWithoutProperties(props, _excluded);
+  return restProps;
+};
+const dataValueReadProps = ['path', 'elementPath', 'value'];
+export function pickDataValueReadProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(([key]) => dataValueReadProps.includes(key)));
+}
+export function omitDataValueReadProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(([key]) => !dataValueReadProps.includes(key)));
+}
+const dataValueWriteProps = ['emptyValue', 'onFocus', 'onBlur', 'onChange'];
+export function pickDataValueWriteProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(([key]) => dataValueWriteProps.includes(key)));
+}
+export function omitDataValueWriteProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(([key]) => !dataValueWriteProps.includes(key)));
+}
+export function pickDataValueReadWriteProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(([key]) => dataValueReadProps.includes(key) || dataValueWriteProps.includes(key)));
+}
+export function omitDataValueReadWriteProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(([key]) => !dataValueReadProps.includes(key) && !dataValueWriteProps.includes(key)));
+}
 //# sourceMappingURL=types.js.map

package/es/extensions/forms/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["FormError","Error","constructor","message","options","_defineProperty","validationRule"],"sources":["../../../../src/extensions/forms/types.ts"],"sourcesContent":["interface IOptions {\n  validationRule?: string | string[]\n}\n\nexport class FormError extends Error {\n  /**\n   * What validation rule did the error occur based on? (i.e: minLength, required or maximum)\n   */\n  validationRule?: string | string[]\n\n  constructor(message: string, options?: IOptions) {\n    super(message)\n\n    if (options) {\n      this.validationRule = options.validationRule\n    }\n  }\n}\n"],"mappings":";AAIA,OAAO,MAAMA,SAAS,SAASC,KAAK,CAAC;EAMnCC,WAAWA,CAACC,OAAe,EAAEC,OAAkB,EAAE;IAC/C,KAAK,CAACD,OAAO,CAAC;IAAAE,eAAA;IAEd,IAAID,OAAO,EAAE;MACX,IAAI,CAACE,cAAc,GAAGF,OAAO,CAACE,cAAc;IAC9C;EACF;AACF"}
+{"version":3,"file":"types.js","names":["FormError","Error","constructor","message","options","_defineProperty","validationRule","pickSpacingProps","props","space","top","bottom","left","right","omitSpacingProps","restProps","_objectWithoutProperties","_excluded","dataValueReadProps","pickDataValueReadProps","Object","fromEntries","entries","filter","key","includes","omitDataValueReadProps","dataValueWriteProps","pickDataValueWriteProps","omitDataValueWriteProps","pickDataValueReadWriteProps","omitDataValueReadWriteProps"],"sources":["../../../../src/extensions/forms/types.ts"],"sourcesContent":["import { JSONSchema7 } from 'json-schema'\nimport { SpacingProps } from '../../components/space/types'\n\ninterface IFormErrorOptions {\n  validationRule?: string | string[]\n}\n\n/**\n * Standard error object for Eufemia Forms, extending the built-in error with additional information for data handling\n */\nexport class FormError extends Error {\n  /**\n   * What validation rule did the error occur based on? (i.e: minLength, required or maximum)\n   */\n  validationRule?: string | string[]\n\n  constructor(message: string, options?: IFormErrorOptions) {\n    super(message)\n\n    if (options) {\n      this.validationRule = options.validationRule\n    }\n  }\n}\n\n// Spacing\n\nexport const pickSpacingProps = <Props extends SpacingProps>(\n  props: Props\n): SpacingProps => {\n  return {\n    space: props?.space,\n    top: props?.top,\n    bottom: props?.bottom,\n    left: props?.left,\n    right: props?.right,\n  }\n}\n\nexport const omitSpacingProps = <Props extends SpacingProps>(\n  props: Props\n): Omit<Props, keyof SpacingProps> => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { space, top, bottom, left, right, ...restProps } = props\n  return restProps\n}\n\n// Data value\n\ninterface DefaultErrorMessages {\n  required?: string\n}\n\nexport interface DataValueReadProps<Value = unknown> {\n  /** JSON Pointer for where the data for this field is located in the source dataset */\n  path?: string\n  /** JSON Pointer for where the data for this field is located in the source iterate loop element */\n  elementPath?: string\n  value?: Value\n}\n\nconst dataValueReadProps = ['path', 'elementPath', 'value']\n\nexport function pickDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): DataValueReadProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueReadProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): Omit<DataValueReadProps, keyof DataValueReadProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueReadProps.includes(key)\n    )\n  )\n}\n\nexport interface DataValueWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | string | number,\n> {\n  emptyValue?: EmptyValue\n  onFocus?: (value: Value | EmptyValue) => void\n  onBlur?: (value: Value | EmptyValue) => void\n  onChange?: (value: Value | EmptyValue) => void\n}\n\nconst dataValueWriteProps = ['emptyValue', 'onFocus', 'onBlur', 'onChange']\n\nexport function pickDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): DataValueWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): Omit<DataValueWriteProps, keyof DataValueWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type DataValueReadWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | string | number,\n> = DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>\n\nexport function pickDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(props: Props): DataValueReadWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        dataValueReadProps.includes(key) ||\n        dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(\n  props: Props\n): Omit<DataValueReadWriteProps, keyof DataValueReadWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        !dataValueReadProps.includes(key) &&\n        !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type ComponentProps = SpacingProps & {\n  className?: string\n}\n\nexport type DataValueReadComponentProps<Value = unknown> = ComponentProps &\n  DataValueReadProps<Value>\n\nexport type DataValueReadWriteComponentProps<\n  Value = unknown,\n  EmptyValue = undefined | string | number,\n> = ComponentProps &\n  DataValueReadProps<Value> &\n  DataValueWriteProps<Value, EmptyValue>\n\nexport interface FieldProps<\n  Value = unknown,\n  EmptyValue = undefined | string | number,\n  ErrorMessages extends { required?: string } = DefaultErrorMessages,\n> extends DataValueReadWriteComponentProps<Value, EmptyValue> {\n  /** ID added to the actual field component, and linked to the label via for-attribute */\n  id?: string\n  layout?: 'horizontal' | 'vertical'\n  /** Main label text */\n  label?: string\n  /** A more discreet text displayed beside the label (i.e for \"(optional)\") */\n  labelDescription?: string\n  /** Secondary information displayed at the end of the label line (i.e character counter) */\n  labelSecondary?: string\n  /** Text showing in place of the value if no value is given */\n  placeholder?: string\n  info?: Error | FormError | string\n  warning?: Error | FormError | string\n  error?: Error | FormError\n  disabled?: boolean\n  // Validation\n  required?: boolean\n  schema?: JSONSchema7\n  validator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | Promise<Error | undefined>\n  onBlurValidator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | Promise<Error | undefined>\n  /**\n   * Should error messages based on validation be shown initially (from given value-prop or source data)\n   * before the user interacts with the field?\n   * @default false\n   * */\n  validateInitially?: boolean\n  /**\n   * Should error messages be shown when touching (like focusing a field and blurring) without having changed\n   * the value? So the user did not introduce a new error, but it was invalid based on validation initially.\n   */\n  validateUnchanged?: boolean\n  /** Should validation be done while writing, not just when blurring the field? */\n  continuousValidation?: boolean\n  errorMessages?: ErrorMessages\n  // Derivatives\n  toInput?: (external: Value | undefined) => any\n  fromInput?: (...args: any[]) => Value | undefined\n}\n\nexport interface FieldHelpProps {\n  help?: {\n    title?: string\n    contents?: string\n  }\n}\n\nexport interface ValueProps<Value>\n  extends DataValueReadComponentProps<Value> {\n  label?: string\n  /** Should the component render if the value is empty? */\n  showEmpty?: boolean\n  /** Text showing in place of the value if no value is given. */\n  placeholder?: string\n  /** JSON Pointer for where the data for this field is located in the source iterate loop element */\n  elementPath?: string\n  /** For showing the value inline (not as a block element) */\n  inline?: boolean\n  // Derivatives\n  /** Prepare value for display (regardless of source like props or data context) */\n  prepare?: (external: Value | undefined) => string\n}\n"],"mappings":"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"}

package/es/extensions/forms/utils/index.d.ts

@@ -1,3 +1,2 @@
 export * from './numbers';
-export * from './components';
 export { default as TestElement } from './TestElement/TestElement';

package/es/extensions/forms/utils/index.js

@@ -1,4 +1,3 @@
 export * from './numbers';
-export * from './components';
 export { default as TestElement } from './TestElement/TestElement';
 //# sourceMappingURL=index.js.map

package/es/extensions/forms/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","TestElement"],"sources":["../../../../../src/extensions/forms/utils/index.ts"],"sourcesContent":["export * from './numbers'\nexport * from './components'\nexport { default as TestElement } from './TestElement/TestElement'\n"],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,SAASA,OAAO,IAAIC,WAAW,QAAQ,2BAA2B"}
+{"version":3,"file":"index.js","names":["default","TestElement"],"sources":["../../../../../src/extensions/forms/utils/index.ts"],"sourcesContent":["export * from './numbers'\nexport { default as TestElement } from './TestElement/TestElement'\n"],"mappings":"AAAA,cAAc,WAAW;AACzB,SAASA,OAAO,IAAIC,WAAW,QAAQ,2BAA2B"}

package/es/extensions/lib.d.ts

@@ -19,8 +19,6 @@ export declare const getExtensions: () => {
         Currency: typeof import("./forms/Field/Currency").default;
         Date: typeof import("./forms/Field/Date").default;
         Email: typeof import("./forms/Field/Email").default;
-        FirstName: typeof import("./forms/Field/FirstName").default;
-        LastName: typeof import("./forms/Field/LastName").default;
         NationalIdentityNumber: typeof import("./forms/Field/NationalIdentityNumber").default;
         OrganizationNumber: typeof import("./forms/Field/OrganizationNumber").default;
         PhoneNumber: typeof import("./forms/Field/PhoneNumber").default;

package/es/extensions/payment-card/style/dnb-payment-card.css

@@ -54,10 +54,10 @@
 }
 .dnb-payment-card__card {
   position: relative;
-  width: 85.6mm;
-  height: 53.98mm;
-  padding: 4mm;
-  border-radius: 3.48mm;
+  width: 343px;
+  height: 216px;
+  padding: 16px;
+  border-radius: 12px;
   border: 1px solid;
   border-color: rgba(255, 255, 255, 0.1) transparent rgba(0, 0, 0, 0.2) transparent;
   color: var(--color-white);
@@ -195,7 +195,7 @@
 .dnb-payment-card--compact .dnb-payment-card__card {
   padding: 0;
   height: 32.8mm;
-  border-radius: 3.48mm 3.48mm 0 0;
+  border-radius: 12px 12px 0 0;
   box-shadow: var(--shadow-default);
 }
 .dnb-payment-card--compact .dnb-payment-card__card__top {
@@ -213,14 +213,14 @@
   background-color: var(--color-white);
 }
 .dnb-payment-card--compact .dnb-payment-card__card__wrapper {
-  padding: 1.5mm 6mm;
+  padding: 6px 22px;
   color: var(--color-black-80);
 }
 .dnb-payment-card--compact .dnb-payment-card__card__numbers {
   font-size: var(--font-size-basis);
 }
 .dnb-payment-card--compact .dnb-payment-card__card__credit-type {
-  top: 8px;
+  top: 10px;
   right: 4px;
   bottom: auto;
 }

package/es/extensions/payment-card/style/dnb-payment-card.min.css

@@ -1 +1 @@
-.dnb-payment-card{--color-dark-cyan:#003b47;--dnb-payment-bg-default:linear-gradient(187.2deg,#008484 6.31%,var(--color-sea-green) 82.66%);--dnb-payment-bg-pluss:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-white:linear-gradient(184.55deg,var(--color-black-background) 4.63%,var(--color-white) 92.04%);--dnb-payment-bg-gold:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);--dnb-payment-bg-saga:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-private:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-business-no-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-business-with-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);margin:0}.dnb-payment-card__card{border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent rgba(0,0,0,.2);border-radius:3.48mm;border-style:solid;border-width:1px;box-shadow:var(--shadow-default);color:var(--color-white);height:53.98mm;padding:4mm;position:relative;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:85.6mm}.dnb-payment-card__card--design-default{background:var(--dnb-payment-bg-default);color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:var(--dnb-payment-bg-pluss);color:var(--color-white)}.dnb-payment-card__card--design-my-first,.dnb-payment-card__card--design-ung,.dnb-payment-card__card--design-youth{color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:var(--dnb-payment-bg-gold);color:var(--color-white)}.dnb-payment-card__card--design-saga{background:var(--dnb-payment-bg-saga);color:var(--color-white)}.dnb-payment-card__card--design-private{background:var(--dnb-payment-bg-private);color:var(--color-white)}.dnb-payment-card__card--design-black{background:var(--color-black);color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background:var(--dnb-payment-bg-business-no-visa);color:var(--color-white)}.dnb-payment-card__card--design-business-with-visa{background:var(--dnb-payment-bg-business-with-visa);color:var(--color-white)}.dnb-payment-card__card:after{background:radial-gradient(52.39% 52.39% at 50%,at 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);background:radial-gradient(52.39% 52.39% at 50% 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card__content{display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{font-weight:var(--font-weight-medium);text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.5rem!important;font-weight:var(--font-weight-medium)}.dnb-payment-card__card__credit-type{bottom:0;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:38px;left:70px;position:absolute;top:0}.dnb-payment-card__card__bank-axept{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay{align-items:center;background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__center{align-items:center;background:var(--color-black-80);border-radius:4px;color:var(--color-sand-yellow);display:flex;flex-direction:column;justify-content:center;padding:1rem}.dnb-payment-card__blocking svg{shape-rendering:geometricprecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:3.48mm 3.48mm 0 0;box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:var(--color-black-80);padding:1.5mm 6mm}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;right:4px;top:8px}.dnb-payment-card--compact .dnb-payment-card__blocking__center{grid-gap:var(--spacing-x-small);align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;gap:var(--spacing-x-small);height:100%;justify-content:center;width:100%}
+.dnb-payment-card{--color-dark-cyan:#003b47;--dnb-payment-bg-default:linear-gradient(187.2deg,#008484 6.31%,var(--color-sea-green) 82.66%);--dnb-payment-bg-pluss:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-white:linear-gradient(184.55deg,var(--color-black-background) 4.63%,var(--color-white) 92.04%);--dnb-payment-bg-gold:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);--dnb-payment-bg-saga:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-private:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-business-no-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-business-with-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);margin:0}.dnb-payment-card__card{border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent rgba(0,0,0,.2);border-radius:12px;border-style:solid;border-width:1px;box-shadow:var(--shadow-default);color:var(--color-white);height:216px;padding:16px;position:relative;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:343px}.dnb-payment-card__card--design-default{background:var(--dnb-payment-bg-default);color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:var(--dnb-payment-bg-pluss);color:var(--color-white)}.dnb-payment-card__card--design-my-first,.dnb-payment-card__card--design-ung,.dnb-payment-card__card--design-youth{color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:var(--dnb-payment-bg-gold);color:var(--color-white)}.dnb-payment-card__card--design-saga{background:var(--dnb-payment-bg-saga);color:var(--color-white)}.dnb-payment-card__card--design-private{background:var(--dnb-payment-bg-private);color:var(--color-white)}.dnb-payment-card__card--design-black{background:var(--color-black);color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background:var(--dnb-payment-bg-business-no-visa);color:var(--color-white)}.dnb-payment-card__card--design-business-with-visa{background:var(--dnb-payment-bg-business-with-visa);color:var(--color-white)}.dnb-payment-card__card:after{background:radial-gradient(52.39% 52.39% at 50%,at 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);background:radial-gradient(52.39% 52.39% at 50% 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card__content{display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{font-weight:var(--font-weight-medium);text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.5rem!important;font-weight:var(--font-weight-medium)}.dnb-payment-card__card__credit-type{bottom:0;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:38px;left:70px;position:absolute;top:0}.dnb-payment-card__card__bank-axept{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay{align-items:center;background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__center{align-items:center;background:var(--color-black-80);border-radius:4px;color:var(--color-sand-yellow);display:flex;flex-direction:column;justify-content:center;padding:1rem}.dnb-payment-card__blocking svg{shape-rendering:geometricprecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:12px 12px 0 0;box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:var(--color-black-80);padding:6px 22px}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;right:4px;top:10px}.dnb-payment-card--compact .dnb-payment-card__blocking__center{grid-gap:var(--spacing-x-small);align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;gap:var(--spacing-x-small);height:100%;justify-content:center;width:100%}

package/es/extensions/payment-card/style/dnb-payment-card.scss

@@ -55,11 +55,11 @@
 
   &__card {
     position: relative;
-    width: 85.6mm;
-    height: 53.98mm;
-    padding: 4mm;
+    width: 343px;
+    height: 216px;
+    padding: 16px;
 
-    border-radius: 3.48mm;
+    border-radius: 12px;
 
     border: 1px solid;
     border-color: rgb(255 255 255 / 10%) transparent rgb(0 0 0 / 20%)
@@ -244,7 +244,7 @@
     padding: 0;
     height: 32.8mm;
 
-    border-radius: 3.48mm 3.48mm 0 0;
+    border-radius: 12px 12px 0 0;
     box-shadow: var(--shadow-default);
 
     &__top {
@@ -266,7 +266,7 @@
     }
 
     &__wrapper {
-      padding: 1.5mm 6mm;
+      padding: 6px 22px;
       color: var(--color-black-80);
     }
 
@@ -275,7 +275,7 @@
     }
 
     &__credit-type {
-      top: 8px;
+      top: 10px;
       right: 4px;
       bottom: auto;
     }

package/es/shared/Eufemia.d.ts

@@ -1,2 +1,2 @@
 export function init(): void;
-export const version: "10.8.0";
+export const version: "10.9.0";

package/es/shared/Eufemia.js

@@ -1,9 +1,9 @@
-export const version = '10.8.0';
+export const version = '10.9.0';
 export function init() {
   if (typeof window !== 'undefined') {
     class Eufemia {
       get version() {
-        return '10.8.0';
+        return '10.9.0';
       }
     }
     window.Eufemia = new Eufemia();

package/es/shared/Eufemia.js.map

@@ -1 +1 @@
-{"version":3,"file":"Eufemia.js","names":["version","init","window","Eufemia"],"sources":["../../../src/shared/Eufemia.js"],"sourcesContent":["export const version = '10.8.0'\n\nexport function init() {\n  if (typeof window !== 'undefined') {\n    class Eufemia {\n      get version() {\n        return '10.8.0'\n      }\n    }\n\n    window.Eufemia = new Eufemia()\n  }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,OAAO,GAAG,QAAQ;AAE/B,OAAO,SAASC,IAAIA,CAAA,EAAG;EACrB,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;IACjC,MAAMC,OAAO,CAAC;MACZ,IAAIH,OAAOA,CAAA,EAAG;QACZ,OAAO,QAAQ;MACjB;IACF;IAEAE,MAAM,CAACC,OAAO,GAAG,IAAIA,OAAO,CAAC,CAAC;EAChC;AACF"}
+{"version":3,"file":"Eufemia.js","names":["version","init","window","Eufemia"],"sources":["../../../src/shared/Eufemia.js"],"sourcesContent":["export const version = '10.9.0'\n\nexport function init() {\n  if (typeof window !== 'undefined') {\n    class Eufemia {\n      get version() {\n        return '10.9.0'\n      }\n    }\n\n    window.Eufemia = new Eufemia()\n  }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,OAAO,GAAG,QAAQ;AAE/B,OAAO,SAASC,IAAIA,CAAA,EAAG;EACrB,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;IACjC,MAAMC,OAAO,CAAC;MACZ,IAAIH,OAAOA,CAAA,EAAG;QACZ,OAAO,QAAQ;MACjB;IACF;IAEAE,MAAM,CAACC,OAAO,GAAG,IAAIA,OAAO,CAAC,CAAC;EAChC;AACF"}

package/es/shared/useMedia.js

@@ -23,7 +23,32 @@ export default function useMedia(props = {}) {
     disabled,
     log
   } = props;
-  const makeResult = () => {
+  const context = React.useContext(Context);
+  const refs = React.useRef({});
+  const defaults = React.useRef({});
+  const disabledRef = React.useRef(disabled);
+  const [result, updateRerender] = React.useState(makeResult);
+  React.useEffect(() => {
+    if (Object.keys(refs.current).length) {
+      makeResult();
+    }
+    return removeListeners;
+  }, []);
+  React.useEffect(() => {
+    if (disabledRef.current && !disabled) {
+      updateRerender(makeResult());
+    }
+    disabledRef.current = disabled;
+  }, [disabled]);
+  return result;
+  function removeListeners() {
+    Object.entries(refs.current).forEach(([key, item]) => {
+      var _item$event;
+      item === null || item === void 0 ? void 0 : (_item$event = item.event) === null || _item$event === void 0 ? void 0 : _item$event.call(item);
+      delete refs.current[key];
+    });
+  }
+  function makeResult() {
     return Object.entries(queries).reduce((acc, [key, when]) => {
       var _item$mediaQueryList;
       const name = `is${toPascalCase(key)}`;
@@ -42,11 +67,11 @@ export default function useMedia(props = {}) {
     }, {
       isSSR: !isMatchMediaSupported()
     });
-  };
-  const runQuery = ({
+  }
+  function runQuery({
     when,
     name
-  }) => {
+  }) {
     if (!isMatchMediaSupported()) {
       return;
     }
@@ -68,22 +93,6 @@ export default function useMedia(props = {}) {
       event,
       mediaQueryList
     };
-  };
-  React.useEffect(() => {
-    if (disabledRef.current && !disabled) {
-      updateRerender(makeResult());
-    }
-    disabledRef.current = disabled;
-  }, [disabled]);
-  React.useEffect(() => removeListeners, []);
-  const context = React.useContext(Context);
-  const refs = React.useRef({});
-  const defaults = React.useRef({});
-  const disabledRef = React.useRef(disabled);
-  const [result, updateRerender] = React.useState(makeResult);
-  const removeListeners = () => {
-    Object.values(refs.current).forEach(item => (item === null || item === void 0 ? void 0 : item.event) && item.event());
-  };
-  return result;
+  }
 }
 //# sourceMappingURL=useMedia.js.map

package/es/shared/useMedia.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMedia.js","names":["React","Context","makeMediaQueryList","createMediaQueryListener","isMatchMediaSupported","toPascalCase","queries","small","min","max","medium","large","useMedia","props","disabled","log","makeResult","Object","entries","reduce","acc","key","when","_item$mediaQueryList","name","defaults","current","item","runQuery","mediaQueryList","matches","refs","isSSR","context","breakpoints","event","match","disabledRef","state","_objectSpread","result","updateRerender","useEffect","removeListeners","useContext","useRef","useState","values","forEach"],"sources":["../../../src/shared/useMedia.tsx"],"sourcesContent":["import React from 'react'\nimport Context from './Context'\nimport {\n  makeMediaQueryList,\n  createMediaQueryListener,\n  isMatchMediaSupported,\n  MediaQueryCondition,\n} from './MediaQueryUtils'\nimport type { MediaQueryListener } from './MediaQueryUtils'\nimport { toPascalCase } from './component-helper'\n\nexport type UseMediaProps = {\n  /**\n   * If set to true, no MediaQuery will be used.\n   * Default: false\n   */\n  disabled?: boolean\n\n  /**\n   * For debugging\n   */\n  log?: boolean\n}\n\nexport type UseMediaQueries = {\n  small: MediaQueryCondition\n  medium: MediaQueryCondition\n  large: MediaQueryCondition\n}\n\nexport const queries: UseMediaQueries = {\n  small: { min: 0, max: 'small' },\n  medium: { min: 'small', max: 'medium' },\n  large: { min: 'medium' },\n}\n\nexport type UseMediaResult = {\n  isSmall: boolean\n  isMedium: boolean\n  isLarge: boolean\n  isSSR: boolean\n}\n\n/**\n * Internal stuff\n */\n\ntype UseMediaItem = {\n  event: MediaQueryListener\n  mediaQueryList: MediaQueryList\n}\n\ntype UseMediaQueryProps = {\n  name: string\n  when: MediaQueryCondition\n}\n\nexport default function useMedia(\n  props: UseMediaProps = {}\n): UseMediaResult {\n  const { disabled, log } = props\n\n  const makeResult = () => {\n    return Object.entries(queries).reduce(\n      (acc, [key, when]) => {\n        const name = `is${toPascalCase(key)}`\n\n        if (disabled) {\n          acc[name] = false\n          return acc\n        }\n\n        defaults.current[name] = false\n\n        const item = runQuery({\n          name,\n          when,\n        })\n\n        acc[name] = item?.mediaQueryList?.matches || false\n\n        refs.current[key] = item\n\n        return acc\n      },\n      { isSSR: !isMatchMediaSupported() }\n    ) as UseMediaResult\n  }\n\n  const runQuery = ({ when, name }: UseMediaQueryProps): UseMediaItem => {\n    if (!isMatchMediaSupported()) {\n      return // do nothing\n    }\n\n    const mediaQueryList = makeMediaQueryList(\n      {\n        when,\n        disabled,\n        log,\n      },\n\n      context.breakpoints\n    )\n\n    const event = createMediaQueryListener(mediaQueryList, (match) => {\n      if (!disabledRef.current && match) {\n        const state = {\n          ...defaults.current,\n          isSSR: result.isSSR,\n        } as UseMediaResult\n        state[name] = match\n        updateRerender(state)\n      }\n    })\n\n    return { event, mediaQueryList }\n  }\n\n  React.useEffect(() => {\n    // If it was disabled before\n    if (disabledRef.current && !disabled) {\n      updateRerender(makeResult())\n    }\n    disabledRef.current = disabled\n  }, [disabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => removeListeners, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const context = React.useContext(Context)\n\n  const refs = React.useRef({})\n  const defaults = React.useRef({})\n  const disabledRef = React.useRef(disabled)\n  const [result, updateRerender] =\n    React.useState<UseMediaResult>(makeResult)\n  const removeListeners = () => {\n    Object.values(refs.current).forEach(\n      (item: UseMediaItem) => item?.event && item.event()\n    )\n  }\n\n  return result\n}\n"],"mappings":"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"}
+{"version":3,"file":"useMedia.js","names":["React","Context","makeMediaQueryList","createMediaQueryListener","isMatchMediaSupported","toPascalCase","queries","small","min","max","medium","large","useMedia","props","disabled","log","context","useContext","refs","useRef","defaults","disabledRef","result","updateRerender","useState","makeResult","useEffect","Object","keys","current","length","removeListeners","entries","forEach","key","item","_item$event","event","call","reduce","acc","when","_item$mediaQueryList","name","runQuery","mediaQueryList","matches","isSSR","breakpoints","match","state","_objectSpread"],"sources":["../../../src/shared/useMedia.tsx"],"sourcesContent":["import React from 'react'\nimport Context from './Context'\nimport {\n  makeMediaQueryList,\n  createMediaQueryListener,\n  isMatchMediaSupported,\n  MediaQueryCondition,\n} from './MediaQueryUtils'\nimport type { MediaQueryListener } from './MediaQueryUtils'\nimport { toPascalCase } from './component-helper'\n\nexport type UseMediaProps = {\n  /**\n   * If set to true, no MediaQuery will be used.\n   * Default: false\n   */\n  disabled?: boolean\n\n  /**\n   * For debugging\n   */\n  log?: boolean\n}\n\nexport type UseMediaQueries = {\n  small: MediaQueryCondition\n  medium: MediaQueryCondition\n  large: MediaQueryCondition\n}\n\nexport const queries: UseMediaQueries = {\n  small: { min: 0, max: 'small' },\n  medium: { min: 'small', max: 'medium' },\n  large: { min: 'medium' },\n}\n\nexport type UseMediaResult = {\n  isSmall: boolean\n  isMedium: boolean\n  isLarge: boolean\n  isSSR: boolean\n}\n\n/**\n * Internal stuff\n */\n\ntype UseMediaItem = {\n  event: MediaQueryListener\n  mediaQueryList: MediaQueryList\n}\n\ntype UseMediaQueryProps = {\n  name: string\n  when: MediaQueryCondition\n}\n\nexport default function useMedia(\n  props: UseMediaProps = {}\n): UseMediaResult {\n  const { disabled, log } = props\n\n  const context = React.useContext(Context)\n\n  const refs = React.useRef({})\n  const defaults = React.useRef({})\n  const disabledRef = React.useRef(disabled)\n  const [result, updateRerender] =\n    React.useState<UseMediaResult>(makeResult)\n\n  React.useEffect(() => {\n    // In StrictMode, the keys got empty,\n    // so we make the result again\n    if (Object.keys(refs.current).length) {\n      makeResult()\n    }\n\n    return removeListeners\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => {\n    // If it was disabled before\n    if (disabledRef.current && !disabled) {\n      updateRerender(makeResult())\n    }\n    disabledRef.current = disabled\n  }, [disabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return result\n\n  function removeListeners() {\n    Object.entries(refs.current).forEach(\n      ([key, item]: [string, UseMediaItem]) => {\n        item?.event?.()\n        delete refs.current[key]\n      }\n    )\n  }\n\n  function makeResult() {\n    return Object.entries(queries).reduce(\n      (acc, [key, when]) => {\n        const name = `is${toPascalCase(key)}`\n\n        if (disabled) {\n          acc[name] = false\n          return acc\n        }\n\n        defaults.current[name] = false\n\n        const item = runQuery({\n          name,\n          when,\n        })\n\n        acc[name] = item?.mediaQueryList?.matches || false\n\n        refs.current[key] = item\n\n        return acc\n      },\n      { isSSR: !isMatchMediaSupported() }\n    ) as UseMediaResult\n  }\n\n  function runQuery({ when, name }: UseMediaQueryProps): UseMediaItem {\n    if (!isMatchMediaSupported()) {\n      return // do nothing\n    }\n\n    const mediaQueryList = makeMediaQueryList(\n      {\n        when,\n        disabled,\n        log,\n      },\n\n      context.breakpoints\n    )\n\n    const event = createMediaQueryListener(mediaQueryList, (match) => {\n      if (!disabledRef.current && match) {\n        const state = {\n          ...defaults.current,\n          isSSR: result.isSSR,\n        } as UseMediaResult\n        state[name] = match\n        updateRerender(state)\n      }\n    })\n\n    return { event, mediaQueryList }\n  }\n}\n"],"mappings":"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"}