@sebgroup/green-core 1.73.0 → 1.74.1

package/components/blur/blur.component.d.ts

@@ -0,0 +1,18 @@
+import { GdsElement } from '../../gds-element';
+/**
+ * @element gds-blur
+ * A container that applies a blur effect to its content.
+ *
+ * @slot - Content to be blurred.
+ *
+ * @example
+ * <gds-blur>
+ *   <div>Sensitive content here</div>
+ * </gds-blur>
+ *
+ * @status beta
+ */
+export declare class GdsBlur extends GdsElement {
+    static styles: import("lit").CSSResult;
+    render(): any;
+}

package/components/blur/blur.component.js

@@ -0,0 +1,18 @@
+import {
+  __decorateClass
+} from "../../chunks/chunk.QTSIPXV3.js";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import styles from "./blur.styles.js";
+let GdsBlur = class extends GdsElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+GdsBlur.styles = styles;
+GdsBlur = __decorateClass([
+  gdsCustomElement("gds-blur")
+], GdsBlur);
+export {
+  GdsBlur
+};

package/components/blur/blur.d.ts

@@ -0,0 +1,2 @@
+import { GdsBlur } from './blur.component';
+export { GdsBlur };

package/components/blur/blur.js

@@ -0,0 +1,6 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { GdsBlur } from "./blur.component.js";
+GdsBlur.define();
+export {
+  GdsBlur
+};

package/components/blur/blur.styles.d.ts

@@ -0,0 +1,2 @@
+declare const style: import("lit").CSSResult;
+export default style;

package/components/blur/blur.styles.js

@@ -0,0 +1,12 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { css } from "lit";
+const style = css`
+  :host {
+    --_blur: 5px;
+    filter: blur(var(--_blur));
+  }
+`;
+var blur_styles_default = style;
+export {
+  blur_styles_default as default
+};

package/components/blur/index.d.ts

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

package/components/blur/index.js

@@ -0,0 +1 @@
+export * from "./blur.js";

package/components/details/details.styles.js

@@ -32,6 +32,23 @@ const styles = css`
       width: max-content;
       height: max-content;
       line-height: 1;
+      position: relative;
+    }
+
+    .summary-icon::after {
+      content: '';
+      position: absolute;
+      border-radius: var(--gds-space-max);
+      transition: all 280ms;
+      inset: 0;
+      scale: 0.9;
+      opacity: 0;
+      pointer-events: none;
+      background-color: color-mix(
+        in srgb,
+        transparent,
+        var(--gds-color-l3-states-light-hover)
+      );
     }
 
     .summary:focus {
@@ -43,20 +60,15 @@ const styles = css`
     }
 
     @media (pointer: fine) {
-      .summary:is(:hover, :focus-within) .summary-icon {
-        background-color: color-mix(
-          in srgb,
-          transparent,
-          var(--gds-color-l3-states-light-hover)
-        );
+      .summary:hover .summary-icon::after,
+      .summary:focus-visible .summary-icon::after {
+        opacity: 1;
+        scale: 1;
       }
 
-      .summary:active .summary-icon {
-        background-color: color-mix(
-          in srgb,
-          transparent,
-          var(--gds-color-l3-states-light-pressed)
-        );
+      .summary:active .summary-icon::after {
+        opacity: 1;
+        scale: 1;
       }
 
       .details:hover,
@@ -101,15 +113,18 @@ const styles = css`
     .content {
       interpolate-size: allow-keywords;
       height: 0;
-      transition: height 0.35s ease;
-      overflow-y: clip;
+      transition:
+        height 0.35s ease,
+        padding-block-end 0.35s ease;
+      overflow: hidden;
       outline: none;
+      scrollbar-width: none;
     }
 
     .content.open {
+      overflow: auto;
       height: max-content;
       max-height: 100vh;
-      overflow-y: auto;
     }
   }
 `;

package/components/formatted-text/account/account-formatter.d.ts

@@ -0,0 +1,4 @@
+export type AccountFormats = keyof typeof accountsFormats;
+export declare const accountsFormats: {
+    'seb-account': (value: string | number | undefined) => string;
+};

package/components/formatted-text/account/account-formatter.js

@@ -0,0 +1,13 @@
+import "../../../chunks/chunk.QTSIPXV3.js";
+const accountsFormats = {
+  "seb-account": (value) => {
+    const account = typeof value === "string" ? value.replace(" ", "") : value?.toString() ?? "";
+    if (account.length !== 11) {
+      return account;
+    }
+    return `${account.slice(0, 4)} ${account.slice(4, 6)} ${account.slice(6, 9)} ${account.slice(9, 11)}`;
+  }
+};
+export {
+  accountsFormats
+};

package/components/formatted-text/account/formatted-account.component.d.ts

@@ -0,0 +1,28 @@
+import { PropertyValues } from 'lit';
+import { GdsFormattedText } from '../formatted-text';
+import { AccountFormats } from './account-formatter';
+/**
+ * @element gds-formatted-account
+ * @status beta
+ *
+ * `gds-formatted-account` extends `gds-text` and formats the account to the desired format.
+ *
+ * @example
+ * <gds-formatted-account
+ *   account="54400023423">
+ * </gds-formatted-account>
+ */
+export declare class GdsFormattedAccount extends GdsFormattedText {
+    /**
+     * The account number or identifier to display.
+     * For format 'seb-account', it needs to be 11 characters.
+     * */
+    account?: number | string;
+    /**
+     * Specifies the account format.
+     * @default 'seb-account'
+     */
+    protected format: AccountFormats;
+    get formattedValue(): string;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+}

package/components/formatted-text/account/formatted-account.component.js

@@ -0,0 +1,34 @@
+import {
+  __decorateClass
+} from "../../../chunks/chunk.QTSIPXV3.js";
+import { property } from "lit/decorators.js";
+import { gdsCustomElement } from "../../../utils/helpers/custom-element-scoping.js";
+import { GdsFormattedText } from "../formatted-text.js";
+import { accountsFormats } from "./account-formatter.js";
+let GdsFormattedAccount = class extends GdsFormattedText {
+  constructor() {
+    super(...arguments);
+    this.format = "seb-account";
+  }
+  get formattedValue() {
+    return accountsFormats[this.format](this.account);
+  }
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    if (!this.account && this.textContent) {
+      this.account = this.textContent;
+    }
+  }
+};
+__decorateClass([
+  property()
+], GdsFormattedAccount.prototype, "account", 2);
+__decorateClass([
+  property({ type: String })
+], GdsFormattedAccount.prototype, "format", 2);
+GdsFormattedAccount = __decorateClass([
+  gdsCustomElement("gds-formatted-account")
+], GdsFormattedAccount);
+export {
+  GdsFormattedAccount
+};

package/components/formatted-text/account/formatted-account.d.ts

@@ -0,0 +1,2 @@
+import { GdsFormattedAccount } from './formatted-account.component';
+export { GdsFormattedAccount };

package/components/formatted-text/account/formatted-account.js

@@ -0,0 +1,6 @@
+import "../../../chunks/chunk.QTSIPXV3.js";
+import { GdsFormattedAccount } from "./formatted-account.component.js";
+GdsFormattedAccount.define();
+export {
+  GdsFormattedAccount
+};

package/components/formatted-text/account/index.d.ts

@@ -0,0 +1 @@
+export * from './formatted-account';

package/components/formatted-text/account/index.js

@@ -0,0 +1 @@
+export * from "./formatted-account.js";

package/components/formatted-text/date/date-time-formatter.d.ts

@@ -0,0 +1,10 @@
+export type DateTimeFormat = keyof typeof dateTimeFormats;
+export declare const dateTimeFormats: {
+    dateOnlyNumbers: (value: string | Date | undefined, locale: string | undefined) => string;
+    dateLong: (value: string | Date | undefined, locale: string | undefined) => string;
+    dateLongWithWeekday: (value: string | Date | undefined, locale: string | undefined) => string;
+    dateShort: (value: string | Date | undefined, locale: string | undefined) => string;
+    dateShortWithWeekday: (value: string | Date | undefined, locale: string | undefined) => string;
+    timeShort: (value: string | Date | undefined, locale: string | undefined) => string;
+    timeLong: (value: string | Date | undefined, locale: string | undefined) => string;
+};

package/components/formatted-text/date/date-time-formatter.js

@@ -0,0 +1,49 @@
+import "../../../chunks/chunk.QTSIPXV3.js";
+const convertValueToDate = (value) => {
+  if (typeof value === "string") {
+    return new Date(value);
+  }
+  return value;
+};
+const dateTimeFormats = {
+  dateOnlyNumbers: (value, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "short" }).format(
+    convertValueToDate(value)
+  ),
+  dateLong: (value, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "long" }).format(
+    convertValueToDate(value)
+  ),
+  dateLongWithWeekday: (value, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full" }).format(
+    convertValueToDate(value)
+  ),
+  dateShort: (value, locale) => {
+    const formatter = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });
+    if (locale?.toLowerCase() === "sv-se") {
+      return formatter.format(convertValueToDate(value)).replace(".", "");
+    }
+    return formatter.format(convertValueToDate(value));
+  },
+  dateShortWithWeekday: (value, locale) => {
+    const formatted = new Intl.DateTimeFormat(locale, {
+      weekday: "short",
+      year: "numeric",
+      month: "short",
+      day: "numeric"
+    }).format(convertValueToDate(value));
+    if (locale?.toLowerCase() === "sv-se") {
+      return formatted.replace(".", "");
+    }
+    if (locale?.toLowerCase() === "en-gb") {
+      return formatted.replace(",", "");
+    }
+    return formatted;
+  },
+  timeShort: (value, locale) => new Intl.DateTimeFormat(locale, { timeStyle: "short" }).format(
+    convertValueToDate(value)
+  ),
+  timeLong: (value, locale) => new Intl.DateTimeFormat(locale, { timeStyle: "medium" }).format(
+    convertValueToDate(value)
+  )
+};
+export {
+  dateTimeFormats
+};

package/components/formatted-text/date/formatted-date.component.d.ts

@@ -0,0 +1,29 @@
+import { PropertyValues } from 'lit';
+import { GdsFormattedText } from '../formatted-text';
+import { DateTimeFormat } from './date-time-formatter';
+/**
+ * @element gds-formatted-date
+ * @status beta
+ *
+ * `gds-formatted-date` extends `gds-text` and formats the date to the desired format.
+ *
+ * @example
+ * <gds-formatted-date
+ *   value="2023-10-10T12:00:00Z"
+ *   locale="sv-SE"
+ *   format="dateOnlyNumbers">
+ * </gds-formatted-date>
+ */
+export declare class GdsFormattedDate extends GdsFormattedText {
+    /** The date value to be formatted, either Date or ISO string. */
+    value?: Date | string;
+    /**
+     * Specifies the date format.
+     * @default 'dateOnlyNumbers'
+     */
+    format: DateTimeFormat;
+    /** The locale used for date formatting. */
+    locale?: string;
+    get formattedValue(): string;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+}

package/components/formatted-text/date/formatted-date.component.js

@@ -0,0 +1,43 @@
+import {
+  __decorateClass
+} from "../../../chunks/chunk.QTSIPXV3.js";
+import { property } from "lit/decorators.js";
+import { gdsCustomElement } from "../../../utils/helpers/custom-element-scoping.js";
+import { GdsFormattedText } from "../formatted-text.js";
+import { dateTimeFormats } from "./date-time-formatter.js";
+let GdsFormattedDate = class extends GdsFormattedText {
+  constructor() {
+    super(...arguments);
+    this.format = "dateOnlyNumbers";
+  }
+  get formattedValue() {
+    if (this.format && this.format in dateTimeFormats) {
+      return dateTimeFormats[this.format](
+        this.value ?? this.element?.textContent ?? void 0,
+        this.locale
+      );
+    }
+    return this.value?.toString() ?? "";
+  }
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    if (!this.value && this.textContent) {
+      this.value = this.textContent;
+    }
+  }
+};
+__decorateClass([
+  property({ attribute: false })
+], GdsFormattedDate.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], GdsFormattedDate.prototype, "format", 2);
+__decorateClass([
+  property({ type: String })
+], GdsFormattedDate.prototype, "locale", 2);
+GdsFormattedDate = __decorateClass([
+  gdsCustomElement("gds-formatted-date")
+], GdsFormattedDate);
+export {
+  GdsFormattedDate
+};

package/components/formatted-text/date/formatted-date.d.ts

@@ -0,0 +1,2 @@
+import { GdsFormattedDate } from './formatted-date.component';
+export { GdsFormattedDate };

package/components/formatted-text/date/formatted-date.js

@@ -0,0 +1,6 @@
+import "../../../chunks/chunk.QTSIPXV3.js";
+import { GdsFormattedDate } from "./formatted-date.component.js";
+GdsFormattedDate.define();
+export {
+  GdsFormattedDate
+};

package/components/formatted-text/date/index.d.ts

@@ -0,0 +1 @@
+export * from './formatted-date';

package/components/formatted-text/date/index.js

@@ -0,0 +1 @@
+export * from "./formatted-date.js";

package/components/formatted-text/formatted-text.d.ts

@@ -0,0 +1,12 @@
+import { PropertyValues } from 'lit';
+import { GdsText } from '../text';
+/**
+ * Abstract base class for Green Core formatted texts.
+ *
+ * @internal
+ */
+export declare abstract class GdsFormattedText extends GdsText {
+    abstract get formattedValue(): string;
+    protected element?: Element;
+    protected updated(changedProperties: PropertyValues): void;
+}

package/components/formatted-text/formatted-text.js

@@ -0,0 +1,19 @@
+import {
+  __decorateClass
+} from "../../chunks/chunk.QTSIPXV3.js";
+import { query } from "lit/decorators.js";
+import { GdsText } from "../text/index.js";
+class GdsFormattedText extends GdsText {
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (this.element) {
+      this.element.innerHTML = this.formattedValue;
+    }
+  }
+}
+__decorateClass([
+  query("[tag]")
+], GdsFormattedText.prototype, "element", 2);
+export {
+  GdsFormattedText
+};

package/components/formatted-text/formatters.d.ts

@@ -0,0 +1,3 @@
+export * from './account/account-formatter';
+export * from './date/date-time-formatter';
+export * from './number/number-formatter';

package/components/formatted-text/formatters.js

@@ -0,0 +1,3 @@
+export * from "./account/account-formatter.js";
+export * from "./date/date-time-formatter.js";
+export * from "./number/number-formatter.js";

package/components/formatted-text/index.d.ts

@@ -0,0 +1,4 @@
+export * from './formatters';
+export * from './account';
+export * from './date';
+export * from './number';

package/components/formatted-text/index.js

@@ -0,0 +1,4 @@
+export * from "./formatters.js";
+export * from "./account/index.js";
+export * from "./date/index.js";
+export * from "./number/index.js";

package/components/formatted-text/number/formatted-number.component.d.ts

@@ -0,0 +1,31 @@
+import { PropertyValues } from 'lit';
+import { GdsFormattedText } from '../formatted-text';
+import { NumberFormats } from '../formatters';
+/**
+ * @element gds-formatted-number
+ * @status beta
+ *
+ * `gds-formatted-number` extends `gds-text` and formats the number to the desired format.
+ *
+ * @example
+ * <gds-formatted-number
+ *   value="1234.5"
+ *   locale="sv-SE"
+ *   currency="SEK">
+ * </gds-formatted-number>
+ */
+export declare class GdsFormattedNumber extends GdsFormattedText {
+    /** The numerical value to display. */
+    value?: number | string;
+    /** The locale used for number formatting. */
+    locale?: string;
+    /** The currency used when formatting numbers. */
+    currency?: string;
+    /**
+     * Specifies the number format.
+     * @default 'decimalsAndThousands'
+     */
+    protected format: NumberFormats;
+    get formattedValue(): string;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+}

package/components/formatted-text/number/formatted-number.component.js

@@ -0,0 +1,40 @@
+import {
+  __decorateClass
+} from "../../../chunks/chunk.QTSIPXV3.js";
+import { property } from "lit/decorators.js";
+import { gdsCustomElement } from "../../../utils/helpers/custom-element-scoping.js";
+import { GdsFormattedText } from "../formatted-text.js";
+import { numberFormats } from "../formatters.js";
+let GdsFormattedNumber = class extends GdsFormattedText {
+  constructor() {
+    super(...arguments);
+    this.format = "decimalsAndThousands";
+  }
+  get formattedValue() {
+    return numberFormats[this.format](this.value, this.locale, this.currency);
+  }
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    if (!this.value && this.textContent) {
+      this.value = this.textContent;
+    }
+  }
+};
+__decorateClass([
+  property({ attribute: false })
+], GdsFormattedNumber.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], GdsFormattedNumber.prototype, "locale", 2);
+__decorateClass([
+  property({ type: String })
+], GdsFormattedNumber.prototype, "currency", 2);
+__decorateClass([
+  property({ type: String })
+], GdsFormattedNumber.prototype, "format", 2);
+GdsFormattedNumber = __decorateClass([
+  gdsCustomElement("gds-formatted-number")
+], GdsFormattedNumber);
+export {
+  GdsFormattedNumber
+};

package/components/formatted-text/number/formatted-number.d.ts

@@ -0,0 +1,2 @@
+import { GdsFormattedNumber } from './formatted-number.component';
+export { GdsFormattedNumber };

package/components/formatted-text/number/formatted-number.js

@@ -0,0 +1,6 @@
+import "../../../chunks/chunk.QTSIPXV3.js";
+import { GdsFormattedNumber } from "./formatted-number.component.js";
+GdsFormattedNumber.define();
+export {
+  GdsFormattedNumber
+};

package/components/formatted-text/number/index.d.ts

@@ -0,0 +1 @@
+export * from './formatted-number';

package/components/formatted-text/number/index.js

@@ -0,0 +1 @@
+export * from "./formatted-number.js";

package/components/formatted-text/number/number-formatter.d.ts

@@ -0,0 +1,4 @@
+export type NumberFormats = keyof typeof numberFormats;
+export declare const numberFormats: {
+    decimalsAndThousands: (value: string | number | undefined, locale: string | undefined, currency: string | undefined) => string;
+};

package/components/formatted-text/number/number-formatter.js

@@ -0,0 +1,20 @@
+import "../../../chunks/chunk.QTSIPXV3.js";
+const numberFormats = {
+  decimalsAndThousands: (value, locale, currency) => {
+    const options = {
+      maximumFractionDigits: 2,
+      minimumFractionDigits: 2
+    };
+    if (currency) {
+      return new Intl.NumberFormat(locale, {
+        ...options,
+        style: "currency",
+        currency
+      }).format(Number(value));
+    }
+    return new Intl.NumberFormat(locale, options).format(Number(value));
+  }
+};
+export {
+  numberFormats
+};

package/components/sensitive/index.d.ts

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

package/components/sensitive/index.js

@@ -0,0 +1 @@
+export * from "./number/index.js";

package/components/sensitive/number/index.d.ts

@@ -0,0 +1 @@
+export * from './sensitive-number';

package/components/sensitive/number/index.js

@@ -0,0 +1 @@
+export * from "./sensitive-number.js";

package/components/sensitive/number/sensitive-number.component.d.ts

@@ -0,0 +1,31 @@
+import { PropertyValues } from 'lit';
+import { GdsFormattedNumber } from '../../formatted-text/number/formatted-number.component';
+/**
+ * @element gds-sensitive-number
+ *
+ * @status beta
+ *
+ * [Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/sensitiv/number)
+ *
+ * GdsSensitiveNumber is used to display numbers that need to be hidden,
+ * helping to protect sensitive numerical data.
+ *
+ * The component renders the formatted number and conditionally hides it based on the `hide` property.
+ *
+ * @example
+ * <gds-sensitive-number
+ *   hide
+ *   value="1234"
+ *   locale="sv-SE">
+ * </gds-sensitive-number>
+ */
+export declare class GdsSensitiveNumber extends GdsFormattedNumber {
+    /**
+     * When true, hides the sensitive number.
+     * @default false
+     */
+    hide: boolean;
+    get formattedValue(): string;
+    render(): any;
+    protected updated(changedProperties: PropertyValues): void;
+}