@sebgroup/green-core 1.69.4 → 1.70.1

package/components/calendar/calendar.d.ts

@@ -1,105 +1,2 @@
-import { GdsElement } from '../../gds-element';
-/**
- * Used to customize the appearance of a date in the calendar.
- */
-export type CustomizedDate = {
-    /**
-     * The date to customize.
-     */
-    date: Date;
-    /**
-     * The color of the indicator.
-     */
-    color?: string;
-    /**
-     * The type of indicator.
-     */
-    indicator?: 'dot';
-    /**
-     * Whether the date is disabled or not.
-     */
-    disabled: boolean;
-};
-/**
- * @element gds-calendar
- * @status stable
- *
- * A calendar is a widget that allows the user to select a date.
- *
- * @event change - Fired when a date is selected.
- * @event gds-date-focused - Fired when focus is changed. Can be cancelled using `event.preventDefault()`.
- */
-export declare class GdsCalendar extends GdsElement {
-    #private;
-    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
-    static shadowRootOptions: ShadowRootInit;
-    /**
-     * The currently selected date.
-     */
-    value?: Date;
-    /**
-     * The minimum date that can be selected.
-     */
-    min: Date;
-    /**
-     * The maximum date that can be selected.
-     */
-    max: Date;
-    /**
-     * The date that is currently focused.
-     */
-    focusedDate: Date;
-    /**
-     * Whether to disable weekends or not.
-     */
-    disabledWeekends: boolean;
-    /**
-     * An array of dates that should be disabled in the calendar.
-     */
-    disabledDates?: Date[];
-    /**
-     * The month that is currently focused.
-     */
-    get focusedMonth(): number;
-    set focusedMonth(month: number);
-    /**
-     * The year that is currently focused.
-     */
-    get focusedYear(): number;
-    set focusedYear(year: number);
-    /**
-     * Whether to show week numbers or not.
-     */
-    showWeekNumbers: boolean;
-    /**
-     * Whether to hide extraneous days (that fall ouside of current month)
-     */
-    hideExtraneousDays: boolean;
-    /**
-     * Whether to hide the day names shown above the calendar.
-     */
-    hideDayNames: boolean;
-    /**
-     * An array of `CustomizedDate` objects that can be used customize the appearance of dates.
-     * This can only be set through the property, not through an attribute.
-     */
-    customizedDates?: CustomizedDate[];
-    /**
-     * The accessible label for the calendar.
-     */
-    label?: string;
-    /**
-     * A template function to customize the accessible date label.
-     */
-    dateLabelTemplate: (date: Date) => string;
-    /**
-     * Returns the date cell element for the given day number.
-     */
-    getDateCell(dayNumber: number): Element | null | undefined;
-    private _currentLocale;
-    private _elFocusedCell?;
-    connectedCallback(): void;
-    focus(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    private _valueChanged;
-}
+import { GdsCalendar } from './calendar.component';
+export { GdsCalendar };

package/components/calendar/calendar.js

@@ -1,16 +1,6 @@
-import {
-  GdsCalendar
-} from "../../chunks/chunk.DHMPBJVZ.js";
-import "../../chunks/chunk.T4D3GD4D.js";
-import "../../chunks/chunk.TYGMNHNO.js";
-import "../../chunks/chunk.HEZEUVHT.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.YO24ZYAD.js";
-import "../../chunks/chunk.TMEWQZER.js";
-import "../../chunks/chunk.QK3R23GV.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.DI23R63U.js";
-import "../../chunks/chunk.SEHSDSX2.js";
+import "../../chunks/chunk.QTSIPXV3.js";
+import { GdsCalendar } from "./calendar.component";
+GdsCalendar.define();
 export {
   GdsCalendar
 };

package/components/calendar/calendar.styles.js

@@ -0,0 +1,89 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { css } from "lit";
+const style = css`
+  @layer base, reset;
+
+  @layer base {
+    :host {
+      display: flex;
+      justify-content: center;
+    }
+
+    :host table {
+      border-spacing: var(--gds-space-2xs);
+      flex-grow: 1;
+      width: 100%;
+      padding: 1ch;
+    }
+
+    thead {
+      box-shadow: 0 var(--gds-space-4xs) 0 0 var(--gds-color-l2-border-primary);
+      th {
+        height: var(--gds-space-2xl);
+        width: var(--gds-space-2xl);
+        box-sizing: border-box;
+        text-align: center;
+        font-weight: normal;
+      }
+    }
+
+    tbody {
+      td {
+        position: relative;
+        height: var(--gds-space-3xl);
+        width: var(--gds-space-3xl);
+        box-sizing: border-box;
+        text-align: center;
+        user-select: none;
+        border-width: var(--gds-space-3xs);
+        border-style: solid;
+        border-color: transparent;
+        border-radius: var(--gds-space-2xs);
+        transition: background 0.2s;
+        outline-style: solid;
+        outline-color: transparent;
+        outline-width: 0px;
+        outline-offset: var(--gds-space-3xs);
+
+        &:not(.disabled):hover,
+        &[aria-selected='true'] {
+          background: var(--gds-color-l2-background-tertiary);
+          cursor: pointer;
+          color: var(--gds-color-l2-content-tertiary);
+        }
+
+        &.today {
+          border-color: var(--gds-color-l2-background-tertiary);
+        }
+
+        &.disabled {
+          color: var(--gds-color-l3-content-disabled);
+          cursor: not-allowed;
+        }
+
+        &:active:not(.disabled) {
+          scale: 0.96;
+        }
+
+        &:focus-visible {
+          outline-color: var(--gds-color-l2-content-primary);
+          outline-width: var(--gds-space-3xs);
+        }
+      }
+
+      .indicator-dot {
+        display: flex;
+        position: absolute;
+        width: var(--gds-space-2xs);
+        height: var(--gds-space-2xs);
+        border-radius: var(--gds-space-max);
+        background-color: var(--_color, currentColor);
+        inset: var(--gds-space-2xs) var(--gds-space-2xs) auto auto;
+      }
+    }
+  }
+`;
+var calendar_styles_default = style;
+export {
+  calendar_styles_default as default
+};

package/components/calendar/calendar.trans.styles.js

@@ -1,12 +1,10 @@
-import {
-  calendar_trans_styles_default,
-  register4 as register
-} from "../../chunks/chunk.T4D3GD4D.js";
-import "../../chunks/chunk.HEZEUVHT.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.QK3R23GV.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.SEHSDSX2.js";
+import "../../chunks/chunk.QTSIPXV3.js";
+import { TransitionalStyles } from "../../utils/transitional-styles/transitional-styles";
+import styles from "./calendar.trans.styles.scss.js";
+function register() {
+  TransitionalStyles.instance.register("gds-calendar", styles.toString());
+}
+var calendar_trans_styles_default = register;
 export {
   calendar_trans_styles_default as default,
   register

package/components/calendar/calendar.trans.styles.scss.js

@@ -0,0 +1,4 @@
+
+            const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/* medium */\n/* regular */\n/* regular */\n/* regular */\n/* hover */\n/* focus */\n/* selected */\n/* highlighted */\n/* active */\n/* disabled */\n/* today */\n/* weekend */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  @layer _base {\n    :host {\n      display: flex;\n      justify-content: center;\n    }\n    @media (max-width: 35.98em) {\n      :host {\n        flex-wrap: wrap;\n        overflow-y: auto;\n      }\n    }\n    :host table {\n      border-spacing: 0;\n    }\n    :host th,\n    :host td {\n      box-sizing: border-box;\n      height: 2.75rem;\n      text-align: center;\n      width: 2.75rem;\n    }\n    :host thead {\n      /* days */\n    }\n    :host thead th {\n      background: var(--sg-bg-level-2);\n      border-bottom: solid 1px var(--sg-grey-300);\n      font-weight: 400;\n      top: 0;\n    }\n    @media (max-width: 35.98em) {\n      :host thead th {\n        position: sticky;\n      }\n    }\n    :host tbody {\n      /* week numbers */\n      /* dates */\n    }\n    :host tbody th {\n      font-weight: 400;\n    }\n    :host tbody td {\n      border: solid 1px transparent;\n      font-weight: 500;\n      -webkit-user-select: none;\n         -moz-user-select: none;\n              user-select: none;\n      /* weekend */\n      /* today */\n      /* hover */\n      /* focus */\n      /* selected */\n      /* highlighted */\n      /* active (pressed) */\n      /* disabled */\n    }\n    :host tbody td.sg-date-holiday:not(.disabled) {\n      background: var(--sg-bg-level-2);\n      color: hsl(var(--sg-hsl-red-2));\n    }\n    :host tbody td.today {\n      background: transparent;\n      border-radius: 4px;\n      box-shadow: inset 0 0 0 2px var(--grey-1000);\n      color: var(--grey-1000);\n    }\n    :host tbody td:hover:not(.disabled) {\n      background: var(--grey-500);\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: var(--gds-sys-color-font);\n      cursor: pointer;\n    }\n    :host tbody td:focus-visible:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host tbody td:focus-visible:focus, :host tbody td:focus-visible:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host tbody td:focus-visible:not(.disabled) {\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      cursor: pointer;\n      position: relative;\n      z-index: 0;\n    }\n    :host tbody td[aria-selected=true] {\n      background: var(--grey-1000);\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: hsl(var(--sg-hsl-white));\n    }\n    :host tbody td[tabindex=\"0\"] {\n      border-radius: 4px;\n    }\n    :host tbody td:hover:active:not(.disabled) {\n      background: var(--grey-1000);\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: hsl(var(--sg-hsl-white));\n    }\n    :host tbody td.disabled {\n      background: hsl(var(--sg-hsl-disabled-background));\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: hsl(var(--sg-hsl-disabled-color));\n      cursor: not-allowed;\n      font-weight: 400;\n    }\n    :host tbody td.disabled.sg-date-holiday {\n      color: hsla(var(--sg-hsl-red-2), 0.25);\n    }\n    :host tbody td.disabled .number,\n    :host tbody td.disabled .indicator-dot {\n      --_color: hsl(var(--sg-hsl-disabled-color)) !important;\n    }\n    :host tbody td.custom-date {\n      position: relative;\n    }\n    :host tbody .number {\n      color: var(--_color, \"currentColor\");\n    }\n    :host tbody .indicator-dot {\n      display: block;\n      width: 0.375rem;\n      height: 0.375rem;\n      top: 1.5rem;\n      border-radius: 50%;\n      margin: auto;\n      position: absolute;\n      inset-block-end: 0.125rem;\n      inset-inline: 0;\n      background-color: var(--_color);\n    }\n    :host table {\n      flex-grow: 1;\n      width: 100%;\n    }\n    :host table td {\n      width: 3rem;\n      height: 3rem;\n    }\n  }\n  @layer _modifiers {\n    .week-number {\n      border-right: solid 1px var(--gds-ref-pallet-base300);\n      font-weight: 400;\n      pointer-events: none;\n    }\n  }\n}";
+            export default styles;
+          

package/components/calendar/functions.js

@@ -1,7 +1,31 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { html } from "lit";
 import {
-  renderMonthGridView
-} from "../../chunks/chunk.DI23R63U.js";
-import "../../chunks/chunk.SEHSDSX2.js";
+  addDays,
+  eachDayOfInterval,
+  eachWeekOfInterval,
+  endOfMonth,
+  startOfMonth
+} from "date-fns";
+function renderMonthGridView(date, template) {
+  const monthStart = startOfMonth(date);
+  const monthEnd = endOfMonth(date);
+  const weeks = eachWeekOfInterval(
+    { start: monthStart, end: monthEnd },
+    { weekStartsOn: 1 }
+  );
+  while (weeks.length < 6) {
+    weeks.push(addDays(weeks[weeks.length - 1], 7));
+  }
+  return html`${template(
+    weeks.map((weekStartDay) => ({
+      days: eachDayOfInterval({
+        start: weekStartDay,
+        end: addDays(weekStartDay, 6)
+      })
+    }))
+  )}`;
+}
 export {
   renderMonthGridView
 };

package/components/calendar/index.js

@@ -1,17 +1 @@
-import "../../chunks/chunk.DJ2OXJZN.js";
-import {
-  GdsCalendar
-} from "../../chunks/chunk.DHMPBJVZ.js";
-import "../../chunks/chunk.T4D3GD4D.js";
-import "../../chunks/chunk.TYGMNHNO.js";
-import "../../chunks/chunk.HEZEUVHT.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.YO24ZYAD.js";
-import "../../chunks/chunk.TMEWQZER.js";
-import "../../chunks/chunk.QK3R23GV.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.DI23R63U.js";
-import "../../chunks/chunk.SEHSDSX2.js";
-export {
-  GdsCalendar
-};
+export * from "./calendar";

package/components/card/card.component.d.ts

@@ -0,0 +1,35 @@
+import { GdsDiv } from '../div/div.component';
+/**
+ *  A container for content representing a single entity. e.g. a contact, article, or task.
+ *
+ * `gds-card` inherits all properties from `gds-div`, but comes with some predefined defaults
+ * and a shortcut property for specifiying different card variants.
+ *
+ * @element gds-card
+ * @status beta
+ *
+ */
+export declare class GdsCard extends GdsDiv {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Style Expression Property for the `box-shadow` property.
+     *
+     * Accepts shadow tokens from the design system.
+     *
+     * `xs`, `s`, `m`, `l`, `xl`
+     *
+     * @deprecated Use the `box-shadow` property instead.
+     */
+    shadow?: string;
+    /**
+     * Shortcut for setting the border, background and text color of the card to the specified color variant, such as 'primary', 'secondary', 'tertiary', etc.
+     *
+     * You can find all available variants in the L2 section of the [Color System documentation page](./?path=/docs/style-colors--docs)
+     *
+     * Supports Style Expression syntax for setting the value responsively.
+     *
+     */
+    variant: string;
+    constructor();
+    render(): any;
+}

package/components/card/card.component.js

@@ -0,0 +1,62 @@
+import {
+  __decorateClass
+} from "../../chunks/chunk.QTSIPXV3.js";
+import { css } from "lit";
+import { tokens } from "../../tokens.style";
+import { styleExpressionProperty } from "../../utils/decorators/style-expression-property";
+import {
+  gdsCustomElement,
+  html
+} from "../../utils/helpers/custom-element-scoping";
+import { GdsDiv } from "../div/div.component";
+let GdsCard = class extends GdsDiv {
+  /// This sets variables that are used in the default styles. Any other SEPs will override.
+  constructor() {
+    super();
+    this.variant = "primary";
+    this.padding = "s;m{l}";
+    this["border-radius"] = "xs;m{s}";
+    this["gap"] = "s;m{l}";
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+GdsCard.styles = [
+  tokens,
+  css`
+      :host {
+        box-sizing: border-box;
+        border-color: var(--_border-color);
+        background-color: var(--_background-color);
+        color: var(--_color);
+        border-width: var(--gds-space-4xs);
+        border-style: solid;
+        display: flex;
+        flex-direction: column;
+      }
+    `
+];
+__decorateClass([
+  styleExpressionProperty({
+    property: "box-shadow",
+    valueTemplate: (v) => `var(--gds-shadow-${v})`
+  })
+], GdsCard.prototype, "shadow", 2);
+__decorateClass([
+  styleExpressionProperty({
+    styleTemplate: function(_prop, v) {
+      return `
+      --_border-color: var(--gds-color-l${this.level}-background-${v});
+      --_background-color: var(--gds-color-l${this.level}-background-${v});
+      --_color: var(--gds-color-l${this.level}-content-${v});
+      `;
+    }
+  })
+], GdsCard.prototype, "variant", 2);
+GdsCard = __decorateClass([
+  gdsCustomElement("gds-card")
+], GdsCard);
+export {
+  GdsCard
+};

package/components/card/card.d.ts

@@ -1,35 +1,2 @@
-import { GdsDiv } from '../div';
-/**
- *  A container for content representing a single entity. e.g. a contact, article, or task.
- *
- * `gds-card` inherits all properties from `gds-div`, but comes with some predefined defaults
- * and a shortcut property for specifiying different card variants.
- *
- * @element gds-card
- * @status beta
- *
- */
-export declare class GdsCard extends GdsDiv {
-    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
-    /**
-     * Style Expression Property for the `box-shadow` property.
-     *
-     * Accepts shadow tokens from the design system.
-     *
-     * `xs`, `s`, `m`, `l`, `xl`
-     *
-     * @deprecated Use the `box-shadow` property instead.
-     */
-    shadow?: string;
-    /**
-     * Shortcut for setting the border, background and text color of the card to the specified color variant, such as 'primary', 'secondary', 'tertiary', etc.
-     *
-     * You can find all available variants in the L2 section of the [Color System documentation page](./?path=/docs/style-colors--docs)
-     *
-     * Supports Style Expression syntax for setting the value responsively.
-     *
-     */
-    variant: string;
-    constructor();
-    render(): any;
-}
+import { GdsCard } from './card.component';
+export { GdsCard };

package/components/card/card.js

@@ -1,17 +1,6 @@
-import {
-  GdsCard
-} from "../../chunks/chunk.EGDKMWM2.js";
-import "../../chunks/chunk.M5C2HLKD.js";
-import "../../chunks/chunk.UZJIO4LE.js";
-import "../../chunks/chunk.TWXTKG4B.js";
-import "../../chunks/chunk.76QWARGM.js";
-import "../../chunks/chunk.NUUST5OZ.js";
-import "../../chunks/chunk.HEZEUVHT.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.TMEWQZER.js";
-import "../../chunks/chunk.QK3R23GV.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.SEHSDSX2.js";
+import "../../chunks/chunk.QTSIPXV3.js";
+import { GdsCard } from "./card.component";
+GdsCard.define();
 export {
   GdsCard
 };

package/components/card/index.js

@@ -1,18 +1 @@
-import "../../chunks/chunk.ALFDKEVN.js";
-import {
-  GdsCard
-} from "../../chunks/chunk.EGDKMWM2.js";
-import "../../chunks/chunk.M5C2HLKD.js";
-import "../../chunks/chunk.UZJIO4LE.js";
-import "../../chunks/chunk.TWXTKG4B.js";
-import "../../chunks/chunk.76QWARGM.js";
-import "../../chunks/chunk.NUUST5OZ.js";
-import "../../chunks/chunk.HEZEUVHT.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.TMEWQZER.js";
-import "../../chunks/chunk.QK3R23GV.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.SEHSDSX2.js";
-export {
-  GdsCard
-};
+export * from "./card";

package/components/coachmark/coachmark.component.d.ts

@@ -0,0 +1,52 @@
+import { Placement } from '@floating-ui/dom';
+import { GdsElement } from '../../gds-element';
+/**
+ * @element gds-coachmark
+ * A tooltip container with a slot and an arrow pointing towards the targeted element
+ * depending on the preferred placement,
+ * the coachmark is hidden/disabled when the element is overlapped or out of viewport.
+ *
+ * @slot - placeholder for the content of the tooltip.
+ *
+ * @event gds-ui-state - dispatched when the tooltip is closed
+ *
+ * @status beta
+ */
+export declare class GdsCoachmark extends GdsElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    /**
+     * The placement of the popover relative to the trigger.
+     * Accepts any of the placements supported by Floating UI.
+     */
+    placement: Placement;
+    /**
+     * The coachmark will be hidden when overlapped by the list of provided elements (selectors).
+     */
+    overlappedBy: string[];
+    /**
+     * List of selectors pointing to the targeted element. Ex. for a target inside a ShadowDOM: ["some-component", "shadowRoot", "target-element"].
+     */
+    target: string[];
+    /**
+     * The accessible label of the coachmark.
+     */
+    label: string;
+    /**
+     * A callback that can be used to set the visibility of the coachmark based on your criteria.
+     *
+     * The default computed visibility, based on visibility and overlap of the target element, is supplied as the third argument.
+     */
+    computeVisibility: (self: GdsCoachmark, target: HTMLElement, computedVisibility: boolean) => boolean;
+    /**
+     * The resolved targeted element (readonly)
+     */
+    targetElement: HTMLElement | undefined;
+    _isVisible: boolean;
+    _preventClose: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    setPreventClose(preventClose: boolean): void;
+    render(): any;
+}