@sebgroup/green-core 1.15.1 → 1.17.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/index.js'
+
+@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/index.js'
+
+// 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/index.js'
+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.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
+};

package/chunks/chunk.2OOTOCUG.js

@@ -0,0 +1,420 @@
+import {
+  GdsFormControlElement
+} from "./chunk.YIQIH4RW.js";
+import {
+  TransitionalStyles
+} from "./chunk.QONSFT2N.js";
+import {
+  observeLightDOM
+} from "./chunk.WM7HBMMV.js";
+import {
+  constrainSlots
+} from "./chunk.6NM7ENKA.js";
+import {
+  watch
+} from "./chunk.2WO4NHJ2.js";
+import {
+  gdsCustomElement,
+  getScopedTagName,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/dropdown/dropdown.ts
+import { property, query, queryAsync, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { when } from "lit/directives/when.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { classMap } from "lit/directives/class-map.js";
+import { msg, str, updateWhenLocaleChanges } from "@lit/localize";
+import "reflect-metadata";
+
+// libs/core/src/components/dropdown/dropdown.styles.ts
+import { css } from "lit";
+var style = css`
+  @layer base, reset, transitional-styles;
+
+  @layer base {
+    button {
+      appearance: none;
+      display: block;
+      background-color: black;
+      border-radius: 2rem;
+      border: none;
+      color: white;
+      padding: 0.7rem 2rem;
+      margin: 0.5rem 0;
+      box-sizing: border-box;
+    }
+  }
+`;
+var dropdown_styles_default = style;
+
+// libs/core/src/components/dropdown/dropdown.ts
+var _optionElements, _handleSearchFieldKeyUp, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _handleSelectionChange, handleSelectionChange_fn, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
+var GdsDropdown = class extends GdsFormControlElement {
+  constructor() {
+    super();
+    /**
+     * Selects an option in the dropdown.
+     *
+     * @fires change
+     */
+    __privateAdd(this, _handleSelectionChange);
+    __privateAdd(this, _registerAutoCloseListener);
+    __privateAdd(this, _unregisterAutoCloseListener);
+    this.label = "";
+    this.open = false;
+    this.searchable = false;
+    this.multiple = false;
+    this.compareWith = (a, b) => a === b;
+    this.searchFilter = (q, o) => o.innerHTML.toLowerCase().includes(q.toLowerCase());
+    this.syncPopoverWidth = false;
+    this.maxHeight = 500;
+    this.size = "medium";
+    this.hideLabel = false;
+    __privateAdd(this, _optionElements, void 0);
+    /**
+     * Event handler for filtering the options in the dropdown.
+     *
+     * @param e The keyboard event.
+     */
+    __privateAdd(this, _handleSearchFieldKeyUp, (e) => {
+      const input = this._elSearchInput;
+      const options = Array.from(__privateGet(this, _optionElements));
+      options.forEach((o) => o.hidden = false);
+      if (!input.value)
+        return;
+      const filteredOptions = options.filter(
+        (o) => !this.searchFilter(input.value, o)
+      );
+      filteredOptions.forEach((o) => o.hidden = true);
+    });
+    /**
+     * Check for ArrowDown or Tab in the search field.
+     * If found, focus should be moved to the listbox.
+     */
+    __privateAdd(this, _handleSearchFieldKeyDown, (e) => {
+      var _a;
+      (_a = this._elListbox) == null ? void 0 : _a.then((listbox) => {
+        if (e.key === "ArrowDown" || e.key === "Tab") {
+          e.preventDefault();
+          listbox.focus();
+          return;
+        }
+      });
+    });
+    /**
+     * Check for Tab in the listbox.
+     * If found, focus should be moved to the search field.
+     */
+    __privateAdd(this, _handleListboxKeyDown, (e) => {
+      var _a;
+      if (e.key === "Tab" && this.searchable) {
+        e.preventDefault();
+        (_a = this._elSearchInput) == null ? void 0 : _a.focus();
+        return;
+      }
+    });
+    __privateAdd(this, _handleOptionFocusChange, (e) => {
+      const triggerButton = this._elTriggerBtn;
+      if (triggerButton)
+        triggerButton.ariaActiveDescendantElement = e.target;
+    });
+    /**
+     * A listener to close the dropdown when any other element is focused.
+     */
+    __privateAdd(this, _blurCloseListener, (e) => {
+      const isFocusOutside = e instanceof FocusEvent && e.relatedTarget && !this.contains(e.relatedTarget);
+      if (isFocusOutside)
+        this.open = false;
+    });
+    __privateAdd(this, _tabCloseListener, (e) => {
+      var _a;
+      if (e.key === "Tab" && !this.searchable) {
+        e.preventDefault();
+        this.open = false;
+        (_a = this._elTriggerBtn) == null ? void 0 : _a.focus();
+      }
+    });
+    constrainSlots(this);
+    updateWhenLocaleChanges(this);
+    __privateSet(this, _optionElements, this.getElementsByTagName(
+      getScopedTagName("gds-option")
+    ));
+  }
+  get type() {
+    return "gds-dropdown";
+  }
+  /**
+   * Get the options of the dropdown.
+   */
+  get options() {
+    return Array.from(__privateGet(this, _optionElements)).filter(
+      (o) => !o.hasAttribute("isplaceholder")
+    );
+  }
+  /**
+   * Return the first option with a isPlaceholder attribute.
+   * If no placeholder is found, this will be undefined.
+   */
+  get placeholder() {
+    return Array.from(__privateGet(this, _optionElements)).find(
+      (o) => o.hasAttribute("isplaceholder")
+    );
+  }
+  /**
+   * Returns the display value as a string.
+   * If the dropdown is in multiple mode, this will be a comma separated list of the selected values.
+   */
+  get displayValue() {
+    var _a, _b;
+    let displayValue;
+    if (Array.isArray(this.value)) {
+      this.value.length > 2 ? displayValue = msg(str`${this.value.length} selected`) : displayValue = this.value.reduce(
+        (acc, cur) => {
+          var _a2;
+          return acc + ((_a2 = this.options.find((v) => v.value === cur)) == null ? void 0 : _a2.innerHTML) + ", ";
+        },
+        ""
+      ).slice(0, -2);
+    } else {
+      displayValue = (_a = this.options.find((v) => v.selected)) == null ? void 0 : _a.innerHTML;
+    }
+    return displayValue || ((_b = this.placeholder) == null ? void 0 : _b.innerHTML) || "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-dropdown");
+    this.updateComplete.then(() => {
+      this._handleLightDOMChange();
+      this._handleValueChange();
+    });
+  }
+  render() {
+    return html`
+      ${this._tStyles}
+      ${when(
+      this.label && !this.hideLabel,
+      () => html`<label for="trigger">${this.label}</label>`
+    )}
+
+      <span class="form-info"><slot name="sub-label"></slot></span>
+
+      <button
+        id="trigger"
+        @click="${() => this.open = !this.open}"
+        aria-haspopup="listbox"
+        role="combobox"
+        aria-owns="listbox"
+        aria-controls="listbox"
+        aria-expanded="${this.open}"
+        aria-label="${this.label}"
+        class=${classMap({ small: this.size === "small" })}
+      >
+        <slot name="trigger">
+          <span>${unsafeHTML(this.displayValue)}</span>
+        </slot>
+      </button>
+
+      <span class="form-info"><slot name="message"></slot></span>
+
+      <gds-popover
+        .label=${this.label}
+        .open=${this.open}
+        .triggerRef=${this._elTriggerBtnAsync}
+        .calcMaxWidth=${(trigger) => this.syncPopoverWidth ? `${trigger.offsetWidth}px` : `auto`}
+        .calcMaxHeight=${(_trigger) => `${this.maxHeight}px`}
+        @gds-ui-state=${(e) => this.open = e.detail.open}
+      >
+        ${when(
+      this.searchable,
+      () => html`<input
+              id="searchinput"
+              type="text"
+              aria-label="${msg("Filter available options")}"
+              placeholder="${msg("Search")}"
+              @keydown=${__privateGet(this, _handleSearchFieldKeyDown)}
+              @keyup=${__privateGet(this, _handleSearchFieldKeyUp)}
+            />`
+    )}
+
+        <gds-listbox
+          id="listbox"
+          .multiple="${ifDefined(this.multiple)}"
+          .compareWith="${this.compareWith}"
+          @change="${__privateMethod(this, _handleSelectionChange, handleSelectionChange_fn)}"
+          @gds-focus="${__privateGet(this, _handleOptionFocusChange)}"
+          @keydown=${__privateGet(this, _handleListboxKeyDown)}
+        >
+          <slot gds-allow="gds-option gds-menu-heading"></slot>
+        </gds-listbox>
+      </gds-popover>
+    `;
+  }
+  _handleLightDOMChange() {
+    var _a, _b;
+    this.requestUpdate();
+    if (this.multiple) {
+      this._handleValueChange();
+      return;
+    }
+    if (this.value === void 0) {
+      if (this.placeholder)
+        this.value = this.placeholder.value;
+      else
+        this.value = (_a = this.options[0]) == null ? void 0 : _a.value;
+    } else if (!this.placeholder && this.options.find(
+      (o) => this.compareWith(o.value, this.value)
+    ) === void 0) {
+      this.options[0] && (this.options[0].selected = true);
+      this.value = (_b = this.options[0]) == null ? void 0 : _b.value;
+    }
+  }
+  _handleValueChange() {
+    this._elListbox.then((listbox) => {
+      if (listbox) {
+        if (Array.isArray(this.value))
+          listbox.selection = this.value;
+        else
+          listbox.selection = [this.value];
+      }
+    });
+  }
+  _onOpenChange() {
+    const open = this.open;
+    Array.from(__privateGet(this, _optionElements)).forEach((o) => o.hidden = !open);
+    if (open)
+      __privateMethod(this, _registerAutoCloseListener, registerAutoCloseListener_fn).call(this);
+    else {
+      __privateMethod(this, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn).call(this);
+      this._elSearchInput && (this._elSearchInput.value = "");
+    }
+    this.dispatchEvent(
+      new CustomEvent("gds-ui-state", {
+        detail: { open },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+};
+_optionElements = new WeakMap();
+_handleSearchFieldKeyUp = new WeakMap();
+_handleSearchFieldKeyDown = new WeakMap();
+_handleListboxKeyDown = new WeakMap();
+_handleOptionFocusChange = new WeakMap();
+_handleSelectionChange = new WeakSet();
+handleSelectionChange_fn = function() {
+  this._elListbox.then((listbox) => {
+    var _a;
+    if (this.multiple)
+      this.value = listbox.selection.map((s) => s.value);
+    else {
+      this.value = (_a = listbox.selection[0]) == null ? void 0 : _a.value;
+      this.open = false;
+      setTimeout(() => {
+        var _a2;
+        return (_a2 = this._elTriggerBtn) == null ? void 0 : _a2.focus();
+      }, 0);
+    }
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  });
+};
+_registerAutoCloseListener = new WeakSet();
+registerAutoCloseListener_fn = function() {
+  this.addEventListener("blur", __privateGet(this, _blurCloseListener));
+  this.addEventListener("gds-blur", __privateGet(this, _blurCloseListener));
+  this.addEventListener("keydown", __privateGet(this, _tabCloseListener));
+};
+_unregisterAutoCloseListener = new WeakSet();
+unregisterAutoCloseListener_fn = function() {
+  this.removeEventListener("blur", __privateGet(this, _blurCloseListener));
+  this.removeEventListener("gds-blur", __privateGet(this, _blurCloseListener));
+  this.removeEventListener("keydown", __privateGet(this, _tabCloseListener));
+};
+_blurCloseListener = new WeakMap();
+_tabCloseListener = new WeakMap();
+GdsDropdown.styles = dropdown_styles_default;
+GdsDropdown.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property()
+], GdsDropdown.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsDropdown.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsDropdown.prototype, "searchable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsDropdown.prototype, "multiple", 2);
+__decorateClass([
+  property()
+], GdsDropdown.prototype, "compareWith", 2);
+__decorateClass([
+  property()
+], GdsDropdown.prototype, "searchFilter", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "sync-popover-width" })
+], GdsDropdown.prototype, "syncPopoverWidth", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-height" })
+], GdsDropdown.prototype, "maxHeight", 2);
+__decorateClass([
+  property()
+], GdsDropdown.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-label" })
+], GdsDropdown.prototype, "hideLabel", 2);
+__decorateClass([
+  state()
+], GdsDropdown.prototype, "_tStyles", 2);
+__decorateClass([
+  query("#trigger")
+], GdsDropdown.prototype, "_elTriggerBtn", 2);
+__decorateClass([
+  queryAsync("#trigger")
+], GdsDropdown.prototype, "_elTriggerBtnAsync", 2);
+__decorateClass([
+  queryAsync("#listbox")
+], GdsDropdown.prototype, "_elListbox", 2);
+__decorateClass([
+  query("#searchinput")
+], GdsDropdown.prototype, "_elSearchInput", 2);
+__decorateClass([
+  observeLightDOM({
+    attributes: true,
+    childList: true,
+    subtree: true,
+    characterData: true
+  })
+], GdsDropdown.prototype, "_handleLightDOMChange", 1);
+__decorateClass([
+  watch("value")
+], GdsDropdown.prototype, "_handleValueChange", 1);
+__decorateClass([
+  watch("open")
+], GdsDropdown.prototype, "_onOpenChange", 1);
+GdsDropdown = __decorateClass([
+  gdsCustomElement("gds-dropdown")
+], GdsDropdown);
+
+export {
+  GdsDropdown
+};

package/chunks/chunk.2WO4NHJ2.js

@@ -0,0 +1,34 @@
+import {
+  __spreadValues
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/utils/decorators/watch.ts
+function watch(propertyName, options) {
+  const resolvedOptions = __spreadValues({
+    waitUntilFirstUpdate: false
+  }, options);
+  return (proto, propertyKey, descriptor) => {
+    const { update } = proto;
+    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+    proto.update = function(changedProps) {
+      watchedProperties.forEach((property) => {
+        var _a;
+        const key = property;
+        if (changedProps.has(key)) {
+          const oldValue = changedProps.get(key);
+          const newValue = this[key];
+          if (oldValue !== newValue) {
+            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+              (_a = descriptor.value) == null ? void 0 : _a.call(this, oldValue, newValue);
+            }
+          }
+        }
+      });
+      update.call(this, changedProps);
+    };
+  };
+}
+
+export {
+  watch
+};