@sebgroup/green-core 1.15.0 → 1.16.0

package/README.md

@@ -15,19 +15,113 @@ npm install @sebgroup/green-core
 
 ## Use
 
-```js
-import { GdsButton } from '@sebgroup/green-core'
-import { transitionalStyles } from '@sebgroup/green-core/transitional-styles'
+There are three main ways you can use Green Core:
 
-//register transitional styles to get SEB's current visual design
-transitionalStyles()
+- With Lit
+- With Angular
+- With React
+
+But that said, the components in Green Core are just regular Web Components, so you can use them with or without any framework.
+
+### Using Lit
+
+```ts
+import { css, customElement, LitElement } from 'lit'
+
+// This custom `html` template literal tag from Green Core extends the default `lit-html` tag to handle element version scoping.
+import { html } from '@sebgroup/green-core/scoping'
+
+// Trtansitional styles applies the current 2016 design language to the components
+import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles'
+
+// Import the components that you need
+import '@sebgroup/green-core/components/button'
+
+@customElement('my-app')
+export class MyApp extends LitElement {
+  static styles = css``
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    // Register transitional styles to get SEB's current visual design
+    registerTransitionalStyles()
+  }
+
+  render() {
+    return html`<gds-button>Click me!</gds-button>`
+  }
+}
+```
+
+### Using Angular
+
+Angular has support for using web components directly in the template. To enable it, you need to do the following:
+
+Add the `CUSTOM_ELEMENTS_SCHEMA` in the module where you plan to use the components. It is recommended to add this as locally as possible, only on the moduls/components where you need it, and not in the app module.
+
+You also need the `NggCoreWrapperModule` from `@sebgroup/green-angular`.
+
+In your module:
+
+```ts
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import { NggCoreWrapperModule } from '@sebgroup/green-angular'
+
+@NgModule({
+    // Add the NggCoreWrapperModule to the `imports` array
+    imports: [NggCoreWrapperModule],
+    // Add the CUSTOM_ELEMENTS_SCHEMA to the `schemas` array
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+```
+
+In your component:
+
+```ts
+import '@sebgroup/green-core/components/button'
+
+// Transitional styles
+import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles'
+registerTransitionalStyles()
 ```
 
+Use the webcomponent in your template with the `*nggCoreElement` directive.
+
+In your template:
+
 ```html
-<!-- Then use the component in your html -->
-<gds-button>Click me</gds-button>
+<gds-button *nggCoreElement>Click me!</gds-button>
 ```
 
+The `*nggCoreElement` directive comes from the `NggCoreWrapperModule` you imported above. It has the same pupose as the custom html template tag mentioned in the Lit example above: It handles custom element scoping for you.
+
+### Using React
+
+In most cases, we already exort React wrappers for these components from the `@sebgroup/green-react` package. In those cases you can just use those. But you can also easily create your own wrappers using `@lit/react`.
+
+Here is an example:
+
+```ts
+import React from 'react'
+import { createComponent } from '@lit/react'
+
+import { GdsButton } from '@sebgroup/green-core/component/button'
+import { getScopedTagName } from '@sebgroup/green-core/scoping'
+import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles'
+
+registerTransitionalStyles()
+
+export const Button = createComponent({
+  tagName: getScopedTagName('gds-button'),
+  elementClass: GdsButton,
+  react: React,
+  events: { onClick: 'click' }, // Event callbacks need to be explicitly mapped to DOM events
+})
+```
+
+Then you can just use `<Button />` like a regular React component.
+
 ## Documentation
 
 Check out the [Storybook (@sebgroup/core)](https://sebgroup.github.io/green/latest/core/) for components and documentation.

package/chunks/chunk.274BU2AI.js

@@ -0,0 +1,244 @@
+import {
+  grid_style_css_default
+} from "./chunk.J2A6J77W.js";
+import {
+  tokens
+} from "./chunk.7P5N6NZL.js";
+import {
+  watch
+} from "./chunk.2WO4NHJ2.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/grid/grid.ts
+import { css, LitElement, unsafeCSS } from "lit";
+import { property, state } from "lit/decorators.js";
+var BreakpointPattern = new RegExp("(?<l>l:([a-z0-9]+))?\\s*(?<m>m:([a-z0-9]+))?\\s*(?<s>s:([a-z0-9]+))?");
+var GdsGrid = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._gridVariables = {
+      varsColumn: css``,
+      varsGap: css``,
+      varsRowGap: css``,
+      varsPadding: css``,
+      varsAutoColumns: css``
+    };
+  }
+  /**
+   * Lifecycle method called when the element is connected to the DOM.
+   * It updates the column, gap, and padding variables.
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this._updateColumnVariables();
+    this._updateGapVariables();
+    this._updateRowGapVariables();
+    this._updatePaddingVariables();
+    this._updateAutoColumnsVariables();
+  }
+  _updateColumnVariables() {
+    var _a;
+    const match = (_a = this.columns) == null ? void 0 : _a.match(BreakpointPattern);
+    let columnsDesktop, columnsTablet, columnsMobile;
+    if (this.columns && !isNaN(Number(this.columns))) {
+      columnsDesktop = columnsTablet = columnsMobile = Number(this.columns);
+    } else {
+      const { l, m, s } = (match == null ? void 0 : match.groups) || {};
+      columnsDesktop = l ? Number(l.split(":")[1]) : void 0;
+      columnsTablet = m ? Number(m.split(":")[1]) : void 0;
+      columnsMobile = s ? Number(s.split(":")[1]) : void 0;
+    }
+    const columnProperties = [
+      { name: "_columns-desktop", value: columnsDesktop },
+      { name: "_columns-tablet", value: columnsTablet },
+      { name: "_columns-mobile", value: columnsMobile }
+    ];
+    const cssVariables = columnProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
+    this._gridVariables = __spreadProps(__spreadValues({}, this._gridVariables), {
+      varsColumn: css`
+        ${unsafeCSS(cssVariables)}
+      `
+    });
+    this.requestUpdate("_gridVariables");
+  }
+  _updateGapVariables() {
+    var _a;
+    const match = (_a = this.gap) == null ? void 0 : _a.match(BreakpointPattern);
+    let gapDesktop, gapTablet, gapMobile;
+    if (this.gap && !this.gap.includes(" ")) {
+      gapDesktop = gapTablet = gapMobile = `var(--gds-sys-grid-gap-${this.gap})`;
+    } else {
+      const { l, m, s } = (match == null ? void 0 : match.groups) || {};
+      gapDesktop = l ? `var(--gds-sys-grid-gap-${l.split(":")[1]})` : void 0;
+      gapTablet = m ? `var(--gds-sys-grid-gap-${m.split(":")[1]})` : void 0;
+      gapMobile = s ? `var(--gds-sys-grid-gap-${s.split(":")[1]})` : void 0;
+    }
+    const gapProperties = [
+      { name: "_gap-desktop", value: gapDesktop },
+      { name: "_gap-tablet", value: gapTablet },
+      { name: "_gap-mobile", value: gapMobile }
+    ];
+    const cssVariables = gapProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
+    this._gridVariables = __spreadProps(__spreadValues({}, this._gridVariables), {
+      varsGap: css`
+        ${unsafeCSS(cssVariables)}
+      `
+    });
+    this.requestUpdate("_gridVariables");
+  }
+  _updateRowGapVariables() {
+    var _a;
+    const match = (_a = this.rowGap) == null ? void 0 : _a.match(BreakpointPattern);
+    let rowGapDesktop, rowGapTablet, rowGapMobile;
+    if (this.rowGap && !this.rowGap.includes(" ")) {
+      rowGapDesktop = rowGapTablet = rowGapMobile = `var(--gds-sys-grid-gap-${this.rowGap})`;
+    } else {
+      const { l, m, s } = (match == null ? void 0 : match.groups) || {};
+      rowGapDesktop = l ? `var(--gds-sys-grid-gap-${l.split(":")[1]})` : void 0;
+      rowGapTablet = m ? `var(--gds-sys-grid-gap-${m.split(":")[1]})` : void 0;
+      rowGapMobile = s ? `var(--gds-sys-grid-gap-${s.split(":")[1]})` : void 0;
+    }
+    const gapProperties = [
+      { name: "_row-gap-desktop", value: rowGapDesktop },
+      { name: "_row-gap-tablet", value: rowGapTablet },
+      { name: "_row-gap-mobile", value: rowGapMobile }
+    ];
+    const cssVariables = gapProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
+    this._gridVariables = __spreadProps(__spreadValues({}, this._gridVariables), {
+      varsRowGap: css`
+        ${unsafeCSS(cssVariables)}
+      `
+    });
+    this.requestUpdate("_gridVariables");
+  }
+  _updatePaddingVariables() {
+    var _a;
+    const match = (_a = this.padding) == null ? void 0 : _a.match(BreakpointPattern);
+    let paddingDesktop, paddingTablet, paddingMobile;
+    if (this.padding && !this.padding.includes(" ")) {
+      paddingDesktop = paddingTablet = paddingMobile = `var(--gds-sys-grid-gap-${this.gap})`;
+    } else {
+      const { l, m, s } = (match == null ? void 0 : match.groups) || {};
+      paddingDesktop = l ? `var(--gds-sys-grid-gap-${l.split(":")[1]})` : void 0;
+      paddingTablet = m ? `var(--gds-sys-grid-gap-${m.split(":")[1]})` : void 0;
+      paddingMobile = s ? `var(--gds-sys-grid-gap-${s.split(":")[1]})` : void 0;
+    }
+    const paddingProperties = [
+      { name: "_padding-desktop", value: paddingDesktop },
+      { name: "_padding-tablet", value: paddingTablet },
+      { name: "_padding-mobile", value: paddingMobile }
+    ];
+    const cssVariables = paddingProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
+    this._gridVariables = __spreadProps(__spreadValues({}, this._gridVariables), {
+      varsPadding: css`
+        ${unsafeCSS(cssVariables)}
+      `
+    });
+    this.requestUpdate("_gridVariables");
+  }
+  _updateAutoColumnsVariables() {
+    var _a;
+    const match = (_a = this.autoColumns) == null ? void 0 : _a.match(BreakpointPattern);
+    let widthDesktop, widthTablet, widthMobile;
+    if (this.autoColumns && !this.autoColumns.includes(" ")) {
+      widthDesktop = widthTablet = widthMobile = `${this.autoColumns}px`;
+    } else {
+      const { l, m, s } = (match == null ? void 0 : match.groups) || {};
+      widthDesktop = l ? `${l.split(":")[1]}px` : void 0;
+      widthTablet = m ? `${m.split(":")[1]}px` : void 0;
+      widthMobile = s ? `${s.split(":")[1]}px` : void 0;
+    }
+    const widthProperties = [
+      { name: "_col-width-mobile", value: widthMobile },
+      { name: "_col-width-tablet", value: widthTablet },
+      { name: "_col-width-desktop", value: widthDesktop }
+    ];
+    const cssVariables = widthProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
+    this._gridVariables = __spreadProps(__spreadValues({}, this._gridVariables), {
+      varsAutoColumns: css`
+        ${unsafeCSS(cssVariables)}
+      `
+    });
+    this.requestUpdate("_gridVariables");
+  }
+  _updateGridCss() {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(`:host {${Object.values(this._gridVariables).join("")}} `);
+    if (this.shadowRoot) {
+      const styles = Array.isArray(GdsGrid.styles) ? GdsGrid.styles : [GdsGrid.styles];
+      const styleSheets = styles.flatMap((style) => {
+        if (Array.isArray(style)) {
+          return style.map((s) => {
+            const newSheet = new CSSStyleSheet();
+            newSheet.replaceSync(s.cssText);
+            return newSheet;
+          });
+        } else {
+          const newSheet = new CSSStyleSheet();
+          newSheet.replaceSync(style.cssText);
+          return [newSheet];
+        }
+      });
+      this.shadowRoot.adoptedStyleSheets = [sheet, ...styleSheets];
+    }
+  }
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+GdsGrid.styles = [tokens, grid_style_css_default];
+GdsGrid.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property({ attribute: "columns", type: String })
+], GdsGrid.prototype, "columns", 2);
+__decorateClass([
+  property({ attribute: "gap", type: String })
+], GdsGrid.prototype, "gap", 2);
+__decorateClass([
+  property({ attribute: "row-gap", type: String })
+], GdsGrid.prototype, "rowGap", 2);
+__decorateClass([
+  property({ attribute: "padding", type: String })
+], GdsGrid.prototype, "padding", 2);
+__decorateClass([
+  property({ attribute: "auto-columns", type: String })
+], GdsGrid.prototype, "autoColumns", 2);
+__decorateClass([
+  state()
+], GdsGrid.prototype, "_gridVariables", 2);
+__decorateClass([
+  watch("columns")
+], GdsGrid.prototype, "_updateColumnVariables", 1);
+__decorateClass([
+  watch("gap")
+], GdsGrid.prototype, "_updateGapVariables", 1);
+__decorateClass([
+  watch("row-gap")
+], GdsGrid.prototype, "_updateRowGapVariables", 1);
+__decorateClass([
+  watch("padding")
+], GdsGrid.prototype, "_updatePaddingVariables", 1);
+__decorateClass([
+  watch("autoColumns")
+], GdsGrid.prototype, "_updateAutoColumnsVariables", 1);
+__decorateClass([
+  watch("_gridVariables")
+], GdsGrid.prototype, "_updateGridCss", 1);
+GdsGrid = __decorateClass([
+  gdsCustomElement("gds-grid")
+], GdsGrid);
+
+export {
+  GdsGrid
+};

package/chunks/chunk.2LQSDOD4.js

@@ -0,0 +1,29 @@
+import {
+  getUnscopedTagName
+} from "./chunk.VOYMQ322.js";
+
+// libs/core/src/gds-element.ts
+import { LitElement } from "lit";
+var GdsElement = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * The unscoped name of this element.
+     */
+    this.gdsElementName = "";
+    /**
+     * Whether the element is using transitional styles.
+     * @internal
+     */
+    this._isUsingTransitionalStyles = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.gdsElementName = getUnscopedTagName(this.tagName.toLowerCase()) || this.gdsElementName;
+    this.setAttribute("gds-element", this.gdsElementName);
+  }
+};
+
+export {
+  GdsElement
+};

package/chunks/chunk.2ND5EWHE.js

@@ -0,0 +1,65 @@
+// libs/core/src/primitives/listbox/option.styles.ts
+import { css } from "lit";
+var style = css`
+  @layer base, reset, transitional-styles;
+  @layer base {
+    :host {
+      display: block;
+      padding: 1rem 1.5rem;
+      cursor: pointer;
+    }
+
+    :host(:not(:last-child)) {
+      border-bottom: 1px solid #e0e0e0;
+    }
+
+    :host(:hover) {
+      background-color: #ededed;
+    }
+
+    :host(:focus-visible) {
+      outline: auto;
+      outline-offset: -6px;
+      outline-color: #666;
+    }
+  }
+`;
+var option_styles_default = style;
+
+// libs/core/src/mixins/focusable.ts
+var Focusable = (superClass) => {
+  class HighlightableElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.onblur = (e) => {
+        this.setAttribute("tabindex", "-1");
+        this.dispatchEvent(
+          new FocusEvent("gds-blur", {
+            bubbles: true,
+            composed: true,
+            relatedTarget: e.relatedTarget
+          })
+        );
+      };
+      this.onfocus = (e) => {
+        this.dispatchEvent(
+          new FocusEvent("gds-focus", {
+            bubbles: true,
+            composed: true,
+            relatedTarget: e.relatedTarget
+          })
+        );
+      };
+    }
+    focus(options) {
+      this.setAttribute("tabindex", "0");
+      super.focus(options);
+    }
+  }
+  return HighlightableElement;
+};
+
+export {
+  option_styles_default,
+  Focusable
+};