npm - @synergy-design-system/components - Versions diffs - 2.0.0 → 2.2.0 - Mend

@synergy-design-system/components 2.0.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (687) hide show

package/README.md CHANGED Viewed

@@ -10,16 +10,67 @@ It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.styl
 Run the following steps to install the required packages.
 ```bash
-# Install the base library and required css files
-npm install --save @synergy-design-system/components @synergy-design-system/tokens
+# Install the base library
+npm install --save @synergy-design-system/components
+# Install the required design tokens
+# (only needed if you do not install peerDeps automatically)
+npm install --save @synergy-design-system/tokens
 ```
 ---
-### 2. Load the design tokens
+### 2. Load the design tokens (required) and utility classes (recommended)
 The shipped components make heavy use of design tokens, which are provided via [@synergy-design-system/tokens](https://github.com/synergy-design-system/synergy-design-system/tree/main/packages/tokens). Make sure to follow the installation steps there for help on setting the tokens up. Usually it is enough to load the light or dark theme included there.
+This package also comes with css utilities that are required to make synergy work.
+You may either load all of them in one bundle (recommended) or just include the bits that you need.
+> When loading custom bits, please make sure to always include `dist/styles/utility.css`!
+> Without these utilities, fullscreen components **will** not work as intended!
+##### List of available css utilities
+| Utility | Required? | Path                      | Description                                                                                                                                                                                                                                                   |
+| :------ | :-------: | :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| fouc    |           | `dist/styles/fouc.css`    | Defaults for handling [Flash of Undefined Components (FOUC)](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/). Scoped to only target Synergy Components to make sure it does not overlap with other custom elements already defined. |
+| utility |    ✔     | `dist/styles/utility.css` | Utilities that have to be in the light DOM to make Synergy work. For example, these include scroll locking for fullscreen components. **This is required, your application layout may break if not available**!                                               |
+##### 2.1. Loading all css utilities (recommended)
+```html
+<!-- Example 1: Loading all utility functions -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="stylesheet"
+      src="../node_modules/@synergy-design-system/components/dist/styles/index.css"
+    />
+  </head>
+  <body></body>
+</html>
+```
+##### 2.2. Load only parts of the utilities
+```html
+<!-- Example 2: Loading only the required utility functions -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="stylesheet"
+      src="../node_modules/@synergy-design-system/components/dist/styles/utility.css"
+    />
+  </head>
+  <body></body>
+</html>
+```
 ---
 ### 3. Define the elements
@@ -61,9 +112,8 @@ When using a build system, you should load the bundle in JavaScript or TypeScrip
 // Do not forget to load the design tokens!
 import "@synergy-design-system/tokens/themes/light.css";
-// Optional, but highly recommended:
 // Add the css utility functions.
-import "@synergy-design-system/components/themes/utility.css";
+import "@synergy-design-system/components/index.css";
 // This will load synergy.js via the exports map
 import "@synergy-design-system/components";
@@ -102,9 +152,8 @@ When using a build system, you may also load the bundle in JavaScript or TypeScr
 // Do not forget to load the design tokens!
 import "@synergy-design-system/tokens/themes/light.css";
-// Optional, but highly recommended:
 // Add the css utility functions.
-import "@synergy-design-system/components/themes/utility.css";
+import "@synergy-design-system/components/index.css";
 // This will only load and define the button itself
 import "@synergy-design-system/components/components/button/button.js";

package/dist/chunks/{chunk.C7624ITA.js → chunk.234ERFCE.js} RENAMED Viewed

@@ -27,4 +27,4 @@ export {
   setBasePath,
   getBasePath
 };
-//# sourceMappingURL=chunk.C7624ITA.js.map
+//# sourceMappingURL=chunk.234ERFCE.js.map

package/dist/chunks/chunk.234ERFCE.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utilities/base-path.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nlet basePath = '';\n\n/** Sets the library's base path to the specified directory. */\nexport function setBasePath(path: string) {\n  basePath = path;\n}\n\n/**\n * Gets the library's base path.\n *\n * The base path is used to load assets such as icons and images, so it needs to be set for components to work properly.\n * By default, this script will look for a script ending in synergy.js or synergy-autoloader.js and set the base path\n * to the directory that contains that file. To override this behavior, you can add the data-synergy attribute to any\n * script on the page (it probably makes the most sense to attach it to the Synergy script, but it could also be on a\n * bundle). The value can be a local folder or it can point to a CORS-enabled endpoint such as a CDN.\n *\n *   <script src=\"bundle.js\" data-synergy=\"/custom/base/path\"></script>\n *\n * Alternatively, you can set the base path manually using the exported setBasePath() function.\n *\n * @param subpath - An optional path to append to the base path.\n */\nexport function getBasePath(subpath = '') {\n  if (!basePath) {\n    const scripts = [...document.getElementsByTagName('script')] as HTMLScriptElement[];\n    const configScript = scripts.find(script => script.hasAttribute('data-synergy'));\n\n    if (configScript) {\n      // Use the data-synergy attribute\n      setBasePath(configScript.getAttribute('data-synergy')!);\n    } else {\n      const fallbackScript = scripts.find(s => {\n        return /synergy(\\.min)?\\.js($|\\?)/.test(s.src) || /synergy-autoloader(\\.min)?\\.js($|\\?)/.test(s.src);\n      });\n      let path = '';\n\n      if (fallbackScript) {\n        path = fallbackScript.getAttribute('src')!;\n      }\n\n      setBasePath(path.split('/').slice(0, -1).join('/'));\n    }\n  }\n\n  // Return the base path without a trailing slash. If one exists, append the subpath separated by a slash.\n  return basePath.replace(/\\/$/, '') + (subpath ? `/${subpath.replace(/^\\//, '')}` : ``);\n}\n"],
+  "mappings": ";AAQA,IAAI,WAAW;AAGR,SAAS,YAAY,MAAc;AACxC,aAAW;AACb;AAiBO,SAAS,YAAY,UAAU,IAAI;AACxC,MAAI,CAAC,UAAU;AACb,UAAM,UAAU,CAAC,GAAG,SAAS,qBAAqB,QAAQ,CAAC;AAC3D,UAAM,eAAe,QAAQ,KAAK,YAAU,OAAO,aAAa,cAAc,CAAC;AAE/E,QAAI,cAAc;AAEhB,kBAAY,aAAa,aAAa,cAAc,CAAE;AAAA,IACxD,OAAO;AACL,YAAM,iBAAiB,QAAQ,KAAK,OAAK;AACvC,eAAO,4BAA4B,KAAK,EAAE,GAAG,KAAK,uCAAuC,KAAK,EAAE,GAAG;AAAA,MACrG,CAAC;AACD,UAAI,OAAO;AAEX,UAAI,gBAAgB;AAClB,eAAO,eAAe,aAAa,KAAK;AAAA,MAC1C;AAEA,kBAAY,KAAK,MAAM,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK,GAAG,CAAC;AAAA,IACpD;AAAA,EACF;AAGA,SAAO,SAAS,QAAQ,OAAO,EAAE,KAAK,UAAU,IAAI,QAAQ,QAAQ,OAAO,EAAE,CAAC,KAAK;AACrF;",
+  "names": []
+}

package/dist/chunks/{chunk.CWZ4FEAV.js → chunk.237KE22A.js} RENAMED Viewed

@@ -1,19 +1,19 @@
 import {
   breadcrumb_item_styles_default
-} from "./chunk.KLDQHER5.js";
+} from "./chunk.O6ZH6AOI.js";
 import {
   breadcrumb_item_custom_styles_default
 } from "./chunk.NGIGPLN2.js";
 import {
   HasSlotController
-} from "./chunk.66WXVGAW.js";
+} from "./chunk.WVVQK5TE.js";
 import {
   watch
-} from "./chunk.AVTU2BGE.js";
+} from "./chunk.QJMO7V5R.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.NF2R6RZV.js";
+} from "./chunk.TR376A4H.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -111,4 +111,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.CWZ4FEAV.js.map
+//# sourceMappingURL=chunk.237KE22A.js.map

package/dist/chunks/chunk.237KE22A.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/breadcrumb-item/breadcrumb-item.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './breadcrumb-item.styles.js';\nimport customStyles from './breadcrumb-item.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n * @documentation https://synergy.style/components/breadcrumb-item\n * @status stable\n * @since 2.0\n *\n * @slot - The breadcrumb item's label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The breadcrumb item's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart separator - The container that wraps the separator.\n */\nexport default class SynBreadcrumbItem extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private readonly hasSlotController = new HasSlotController(this, 'prefix', 'suffix');\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n\n  @state() private renderType: 'button' | 'link' | 'drop-down' = 'button';\n\n  /**\n   * Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\n   * internally. When unset, a button will be rendered instead.\n   */\n  @property() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @property() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** The `rel` attribute to use on the link. Only used when `href` is set. */\n  @property() rel = 'noreferrer noopener';\n\n  private setRenderType() {\n    const hasDropdown =\n      this.defaultSlot.assignedElements({ flatten: true }).filter(i => i.tagName.toLowerCase() === 'syn-dropdown')\n        .length > 0;\n\n    this.renderType = this.href ? 'link' : hasDropdown ? 'drop-down' : 'button';\n  }\n\n  @watch('href', { waitUntilFirstUpdate: true })\n  hrefChanged() {\n    this.setRenderType();\n  }\n\n  handleSlotChange() {\n    this.setRenderType();\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          'breadcrumb-item': true,\n          'breadcrumb-item--has-prefix': this.hasSlotController.test('prefix'),\n          'breadcrumb-item--has-suffix': this.hasSlotController.test('suffix')\n        })}\n      >\n        <span part=\"prefix\" class=\"breadcrumb-item__prefix\">\n          <slot name=\"prefix\"></slot>\n        </span>\n\n        ${this.renderType === 'link'\n          ? html`\n              <a\n                part=\"label\"\n                class=\"breadcrumb-item__label breadcrumb-item__label--link\"\n                href=\"${this.href!}\"\n                target=\"${ifDefined(this.target ? this.target : undefined)}\"\n                rel=${ifDefined(this.target ? this.rel : undefined)}\n              >\n                <slot @slotchange=${this.handleSlotChange}></slot>\n              </a>\n            `\n          : ''}\n          ${this.renderType === 'button' ? html`\n              <button part=\"label\" type=\"button\" class=\"breadcrumb-item__label breadcrumb-item__label--button\">\n                <slot @slotchange=${this.handleSlotChange}></slot>\n              </button>\n            ` : ''}\n\n          ${this.renderType === 'drop-down'\n            ? html`\n                <div part=\"label\" class=\"breadcrumb-item__label breadcrumb-item__label--drop-down\">\n                  <slot @slotchange=${this.handleSlotChange}></slot>\n                </div>\n              `\n            : ''}\n\n        <span part=\"suffix\" class=\"breadcrumb-item__suffix\">\n          <slot name=\"suffix\"></slot>\n        </span>\n\n        <span part=\"separator\" class=\"breadcrumb-item__separator\" aria-hidden=\"true\">\n          <slot name=\"separator\"></slot>\n        </span>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AAEzB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,UAAU,OAAO,aAAa;AA0BvC,IAAqB,oBAArB,cAA+C,eAAe;AAAA,EAA9D;AAAA;AAGE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,UAAU,QAAQ;AAI1E,SAAQ,aAA8C;AAYnD,eAAM;AAAA;AAAA,EAEV,gBAAgB;AACtB,UAAM,cACJ,KAAK,YAAY,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAAE,OAAO,OAAK,EAAE,QAAQ,YAAY,MAAM,cAAc,EACxG,SAAS;AAEd,SAAK,aAAa,KAAK,OAAO,SAAS,cAAc,cAAc;AAAA,EACrE;AAAA,EAGA,cAAc;AACZ,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,mBAAmB;AACjB,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,mBAAmB;AAAA,MACnB,+BAA+B,KAAK,kBAAkB,KAAK,QAAQ;AAAA,MACnE,+BAA+B,KAAK,kBAAkB,KAAK,QAAQ;AAAA,IACrE,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMA,KAAK,eAAe,SAClB;AAAA;AAAA;AAAA;AAAA,wBAIY,KAAK,IAAK;AAAA,0BACR,UAAU,KAAK,SAAS,KAAK,SAAS,MAAS,CAAC;AAAA,sBACpD,UAAU,KAAK,SAAS,KAAK,MAAM,MAAS,CAAC;AAAA;AAAA,oCAE/B,KAAK,gBAAgB;AAAA;AAAA,gBAG7C,EAAE;AAAA,YACF,KAAK,eAAe,WAAW;AAAA;AAAA,oCAEP,KAAK,gBAAgB;AAAA;AAAA,gBAEzC,EAAE;AAAA;AAAA,YAEN,KAAK,eAAe,cAClB;AAAA;AAAA,sCAEwB,KAAK,gBAAgB;AAAA;AAAA,kBAG7C,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWd;AACF;AAzFqB,kBACZ,SAAyB,CAAC,0BAAiB,gCAAQ,qCAAY;AAI3C;AAAA,EAA1B,MAAM,kBAAkB;AAAA,GALN,kBAKQ;AAEV;AAAA,EAAhB,MAAM;AAAA,GAPY,kBAOF;AAML;AAAA,EAAX,SAAS;AAAA,GAbS,kBAaP;AAGA;AAAA,EAAX,SAAS;AAAA,GAhBS,kBAgBP;AAGA;AAAA,EAAX,SAAS;AAAA,GAnBS,kBAmBP;AAWZ;AAAA,EADC,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC;AAAA,GA7B1B,kBA8BnB;",
+  "names": []
+}

package/dist/chunks/{chunk.CZK6Y6J7.js → chunk.26ENGZ3W.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "./chunk.CYJIE45P.js";
+} from "./chunk.4MRMTDXI.js";
 // src/components/switch/switch.ts
 var switch_default = SynSwitch;
@@ -9,4 +9,4 @@ SynSwitch.define("syn-switch");
 export {
   switch_default
 };
-//# sourceMappingURL=chunk.CZK6Y6J7.js.map
+//# sourceMappingURL=chunk.26ENGZ3W.js.map

package/dist/chunks/chunk.26ENGZ3W.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/switch/switch.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport SynSwitch from './switch.component.js';\n\nexport * from './switch.component.js';\nexport default SynSwitch;\n\nSynSwitch.define('syn-switch');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-switch': SynSwitch;\n  }\n}\n"],
+  "mappings": ";;;;;AAWA,IAAO,iBAAQ;AAEf,UAAU,OAAO,YAAY;",
+  "names": []
+}

package/dist/chunks/{chunk.IKG6CMRI.js → chunk.2F7VZ6GN.js} RENAMED Viewed

@@ -1,22 +1,22 @@
 import {
   option_styles_default
-} from "./chunk.CFIQXXMW.js";
+} from "./chunk.IVM3BGRH.js";
 import {
   option_custom_styles_default
 } from "./chunk.3B24TYVN.js";
 import {
   SynIcon
-} from "./chunk.HSJIUWQS.js";
+} from "./chunk.UAFGFK3T.js";
 import {
   watch
-} from "./chunk.AVTU2BGE.js";
+} from "./chunk.QJMO7V5R.js";
 import {
   LocalizeController
-} from "./chunk.M6WH7QEC.js";
+} from "./chunk.E3KW3KQM.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.NF2R6RZV.js";
+} from "./chunk.TR376A4H.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -144,4 +144,4 @@ __decorateClass([
 export {
   SynOption
 };
-//# sourceMappingURL=chunk.IKG6CMRI.js.map
+//# sourceMappingURL=chunk.2F7VZ6GN.js.map

package/dist/chunks/chunk.2F7VZ6GN.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/option/option.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './option.styles.js';\nimport customStyles from './option.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @documentation https://synergy.style/components/option\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\nexport default class SynOption extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  private cachedTextLabel: string;\n  // @ts-expect-error - Controller is currently unused\n  private readonly localize = new LocalizeController(this);\n\n  @query('.option__label') defaultSlot: HTMLSlotElement;\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() selected = false; // the option is selected and has aria-selected=\"true\"\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value = '';\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n    this.setAttribute('aria-selected', 'false');\n  }\n\n  private handleDefaultSlotChange() {\n    const textLabel = this.getTextLabel();\n\n    // Ignore the first time the label is set\n    if (typeof this.cachedTextLabel === 'undefined') {\n      this.cachedTextLabel = textLabel;\n      return;\n    }\n\n    // When the label changes, emit a slotchange event so parent controls see it\n    if (textLabel !== this.cachedTextLabel) {\n      this.cachedTextLabel = textLabel;\n      this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });\n    }\n  }\n\n  private handleMouseEnter() {\n    this.hasHover = true;\n  }\n\n  private handleMouseLeave() {\n    this.hasHover = false;\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('value')\n  handleValueChange() {\n    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n    // instead of requiring them to cast the value to a string.\n    if (typeof this.value !== 'string') {\n      this.value = String(this.value);\n    }\n\n    if (this.value.includes(' ')) {\n      console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);\n      this.value = this.value.replace(/ /g, '_');\n    }\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel() {\n    const nodes = this.childNodes;\n    let label = '';\n\n    [...nodes].forEach(node => {\n      if (node.nodeType === Node.ELEMENT_NODE) {\n        if (!(node as HTMLElement).hasAttribute('slot')) {\n          label += (node as HTMLElement).textContent;\n        }\n      }\n\n      if (node.nodeType === Node.TEXT_NODE) {\n        label += node.textContent;\n      }\n    });\n\n    return label.trim();\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          option: true,\n          'option--current': this.current,\n          'option--disabled': this.disabled,\n          'option--selected': this.selected,\n          'option--hover': this.hasHover\n        })}\n        @mouseenter=${this.handleMouseEnter}\n        @mouseleave=${this.handleMouseLeave}\n      >\n        <syn-icon part=\"checked-icon\" class=\"option__check\" name=\"check\" library=\"system\" aria-hidden=\"true\"></syn-icon>\n        <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n        <slot part=\"label\" class=\"option__label\" @slotchange=${this.handleDefaultSlotChange}></slot>\n        <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/chunk.37QGQHZ6.js ADDED Viewed

@@ -0,0 +1,356 @@
+import {
+  tab_group_custom_styles_default
+} from "./chunk.NGI67WXT.js";
+import {
+  tab_group_styles_default
+} from "./chunk.JQ47GWDL.js";
+import {
+  scrollIntoView
+} from "./chunk.RX7A4EQ2.js";
+import {
+  SynIconButton
+} from "./chunk.WEJ5VWT4.js";
+import {
+  watch
+} from "./chunk.QJMO7V5R.js";
+import {
+  LocalizeController
+} from "./chunk.E3KW3KQM.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.TR376A4H.js";
+import {
+  __decorateClass,
+  __spreadValues
+} from "./chunk.QNDC5KWA.js";
+// src/components/tab-group/tab-group.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+var SynTabGroup = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.tabs = [];
+    this.panels = [];
+    this.hasScrollControls = false;
+    this.placement = "top";
+    this.activation = "auto";
+    this.noScrollControls = false;
+    this.contained = false;
+    this.sharp = false;
+  }
+  connectedCallback() {
+    const whenAllDefined = Promise.all([
+      customElements.whenDefined("syn-tab"),
+      customElements.whenDefined("syn-tab-panel")
+    ]);
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.repositionIndicator();
+      this.updateScrollControls();
+    });
+    this.mutationObserver = new MutationObserver((mutations) => {
+      if (mutations.some((m) => !["aria-labelledby", "aria-controls"].includes(m.attributeName))) {
+        setTimeout(() => this.setAriaLabels());
+      }
+      if (mutations.some((m) => m.attributeName === "disabled")) {
+        this.syncTabsAndPanels();
+      }
+    });
+    this.updateComplete.then(() => {
+      this.syncTabsAndPanels();
+      this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
+      this.resizeObserver.observe(this.nav);
+      whenAllDefined.then(() => {
+        const intersectionObserver = new IntersectionObserver((entries, observer) => {
+          var _a;
+          if (entries[0].intersectionRatio > 0) {
+            this.setAriaLabels();
+            this.setActiveTab((_a = this.getActiveTab()) != null ? _a : this.tabs[0], { emitEvents: false });
+            observer.unobserve(entries[0].target);
+          }
+        });
+        intersectionObserver.observe(this.tabGroup);
+      });
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mutationObserver.disconnect();
+    this.resizeObserver.unobserve(this.nav);
+  }
+  getAllTabs(options = { includeDisabled: true }) {
+    const slot = this.shadowRoot.querySelector('slot[name="nav"]');
+    return [...slot.assignedElements()].filter((el) => {
+      return options.includeDisabled ? el.tagName.toLowerCase() === "syn-tab" : el.tagName.toLowerCase() === "syn-tab" && !el.disabled;
+    });
+  }
+  getAllPanels() {
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "syn-tab-panel");
+  }
+  getActiveTab() {
+    return this.tabs.find((el) => el.active);
+  }
+  handleClick(event) {
+    const target = event.target;
+    const tab = target.closest("syn-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("syn-tab-group");
+    if (tabGroup !== this) {
+      return;
+    }
+    if (tab !== null) {
+      this.setActiveTab(tab, { scrollBehavior: "smooth" });
+    }
+  }
+  handleKeyDown(event) {
+    const target = event.target;
+    const tab = target.closest("syn-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("syn-tab-group");
+    if (tabGroup !== this) {
+      return;
+    }
+    if (["Enter", " "].includes(event.key)) {
+      if (tab !== null) {
+        this.setActiveTab(tab, { scrollBehavior: "smooth" });
+        event.preventDefault();
+      }
+    }
+    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+      const activeEl = this.tabs.find((t) => t.matches(":focus"));
+      const isRtl = this.localize.dir() === "rtl";
+      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "syn-tab") {
+        let index = this.tabs.indexOf(activeEl);
+        if (event.key === "Home") {
+          index = 0;
+        } else if (event.key === "End") {
+          index = this.tabs.length - 1;
+        } else if (["top"].includes(this.placement) && event.key === (isRtl ? "ArrowRight" : "ArrowLeft") || ["start", "end"].includes(this.placement) && event.key === "ArrowUp") {
+          index--;
+        } else if (["top"].includes(this.placement) && event.key === (isRtl ? "ArrowLeft" : "ArrowRight") || ["start", "end"].includes(this.placement) && event.key === "ArrowDown") {
+          index++;
+        }
+        if (index < 0) {
+          index = this.tabs.length - 1;
+        }
+        if (index > this.tabs.length - 1) {
+          index = 0;
+        }
+        this.tabs[index].focus({ preventScroll: true });
+        if (this.activation === "auto") {
+          this.setActiveTab(this.tabs[index], { scrollBehavior: "smooth" });
+        }
+        if (["top"].includes(this.placement)) {
+          scrollIntoView(this.tabs[index], this.nav, "horizontal");
+        }
+        event.preventDefault();
+      }
+    }
+  }
+  handleScrollToStart() {
+    this.nav.scroll({
+      left: this.localize.dir() === "rtl" ? this.nav.scrollLeft + this.nav.clientWidth : this.nav.scrollLeft - this.nav.clientWidth,
+      behavior: "smooth"
+    });
+  }
+  handleScrollToEnd() {
+    this.nav.scroll({
+      left: this.localize.dir() === "rtl" ? this.nav.scrollLeft - this.nav.clientWidth : this.nav.scrollLeft + this.nav.clientWidth,
+      behavior: "smooth"
+    });
+  }
+  setActiveTab(tab, options) {
+    options = __spreadValues({
+      emitEvents: true,
+      scrollBehavior: "auto"
+    }, options);
+    if (tab !== this.activeTab && !tab.disabled) {
+      const previousTab = this.activeTab;
+      this.activeTab = tab;
+      this.tabs.forEach((el) => el.active = el === this.activeTab);
+      this.panels.forEach((el) => {
+        var _a;
+        return el.active = el.name === ((_a = this.activeTab) == null ? void 0 : _a.panel);
+      });
+      this.syncIndicator();
+      if (["top"].includes(this.placement)) {
+        scrollIntoView(this.activeTab, this.nav, "horizontal", options.scrollBehavior);
+      }
+      if (options.emitEvents) {
+        if (previousTab) {
+          this.emit("syn-tab-hide", { detail: { name: previousTab.panel } });
+        }
+        this.emit("syn-tab-show", { detail: { name: this.activeTab.panel } });
+      }
+    }
+  }
+  setAriaLabels() {
+    this.tabs.forEach((tab) => {
+      const panel = this.panels.find((el) => el.name === tab.panel);
+      if (panel) {
+        tab.setAttribute("aria-controls", panel.getAttribute("id"));
+        panel.setAttribute("aria-labelledby", tab.getAttribute("id"));
+      }
+    });
+  }
+  repositionIndicator() {
+    const currentTab = this.getActiveTab();
+    if (!currentTab) {
+      return;
+    }
+    const width = currentTab.clientWidth;
+    const height = currentTab.clientHeight;
+    const isRtl = this.localize.dir() === "rtl";
+    const allTabs = this.getAllTabs();
+    const precedingTabs = allTabs.slice(0, allTabs.indexOf(currentTab));
+    const offset = precedingTabs.reduce(
+      (previous, current) => ({
+        left: previous.left + current.clientWidth,
+        top: previous.top + current.clientHeight
+      }),
+      { left: 0, top: 0 }
+    );
+    switch (this.placement) {
+      case "top":
+        this.indicator.style.width = `calc(${width}px - ${this.contained || this.sharp ? "2 * var(--syn-spacing-large)" : "0px"})`;
+        this.indicator.style.height = "auto";
+        this.indicator.style.translate = `calc(${isRtl ? "-" : ""}1 * (${offset.left}px + ${this.contained || this.sharp ? "var(--syn-spacing-large)" : "0px"}))`;
+        break;
+      case "start":
+      case "end":
+        this.indicator.style.width = "auto";
+        this.indicator.style.height = `calc(${height}px - ${this.contained || this.sharp ? "2 * var(--syn-spacing-small)" : "0px"})`;
+        this.indicator.style.translate = `0 calc(${offset.top}px + ${this.contained || this.sharp ? "var(--syn-spacing-small)" : "0px"})`;
+        break;
+    }
+  }
+  // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.
+  syncTabsAndPanels() {
+    this.tabs = this.getAllTabs({ includeDisabled: false });
+    this.panels = this.getAllPanels();
+    this.syncIndicator();
+    this.updateComplete.then(() => this.updateScrollControls());
+  }
+  updateScrollControls() {
+    if (this.noScrollControls) {
+      this.hasScrollControls = false;
+    } else {
+      this.hasScrollControls = ["top"].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth + 1;
+    }
+  }
+  syncIndicator() {
+    const tab = this.getActiveTab();
+    if (tab) {
+      this.indicator.style.display = "block";
+      this.repositionIndicator();
+    } else {
+      this.indicator.style.display = "none";
+    }
+  }
+  /** Shows the specified tab panel. */
+  show(panel) {
+    const tab = this.tabs.find((el) => el.panel === panel);
+    if (tab) {
+      this.setActiveTab(tab, { scrollBehavior: "smooth" });
+    }
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "tab-group": true,
+      "tab-group--top": this.placement === "top",
+      "tab-group--start": this.placement === "start",
+      "tab-group--end": this.placement === "end",
+      "tab-group--rtl": this.localize.dir() === "rtl",
+      "tab-group--has-scroll-controls": this.hasScrollControls,
+      "tab-group--contained": this.contained,
+      "tab-group--sharp": this.sharp
+    })}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <div class="tab-group__nav-container" part="nav">
+          ${this.hasScrollControls ? html`
+                <syn-icon-button
+                  part="scroll-button scroll-button--start"
+                  exportparts="base:scroll-button__base"
+                  class="tab-group__scroll-button tab-group__scroll-button--start"
+                  name="chevron-right"
+                  library="system"
+                  label=${this.localize.term("scrollToStart")}
+                  @click=${this.handleScrollToStart}
+                ></syn-icon-button>
+              ` : ""}
+          <div class="tab-group__nav">
+            <div part="tabs" class="tab-group__tabs" role="tablist">
+              <div part="active-tab-indicator" class="tab-group__indicator"></div>
+              <slot name="nav" @slotchange=${this.syncTabsAndPanels}></slot>
+            </div>
+          </div>
+          ${this.hasScrollControls ? html`
+                <syn-icon-button
+                  part="scroll-button scroll-button--end"
+                  exportparts="base:scroll-button__base"
+                  class="tab-group__scroll-button tab-group__scroll-button--end"
+                  name="chevron-right"
+                  library="system"
+                  label=${this.localize.term("scrollToEnd")}
+                  @click=${this.handleScrollToEnd}
+                ></syn-icon-button>
+              ` : ""}
+        </div>
+        <slot part="body" class="tab-group__body" @slotchange=${this.syncTabsAndPanels}></slot>
+      </div>
+    `;
+  }
+};
+SynTabGroup.styles = [component_styles_default, tab_group_styles_default, tab_group_custom_styles_default];
+SynTabGroup.dependencies = { "syn-icon-button": SynIconButton };
+__decorateClass([
+  query(".tab-group")
+], SynTabGroup.prototype, "tabGroup", 2);
+__decorateClass([
+  query(".tab-group__body")
+], SynTabGroup.prototype, "body", 2);
+__decorateClass([
+  query(".tab-group__nav")
+], SynTabGroup.prototype, "nav", 2);
+__decorateClass([
+  query(".tab-group__indicator")
+], SynTabGroup.prototype, "indicator", 2);
+__decorateClass([
+  state()
+], SynTabGroup.prototype, "hasScrollControls", 2);
+__decorateClass([
+  property()
+], SynTabGroup.prototype, "placement", 2);
+__decorateClass([
+  property()
+], SynTabGroup.prototype, "activation", 2);
+__decorateClass([
+  property({ attribute: "no-scroll-controls", type: Boolean })
+], SynTabGroup.prototype, "noScrollControls", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SynTabGroup.prototype, "contained", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SynTabGroup.prototype, "sharp", 2);
+__decorateClass([
+  watch("noScrollControls", { waitUntilFirstUpdate: true })
+], SynTabGroup.prototype, "updateScrollControls", 1);
+__decorateClass([
+  watch("placement", { waitUntilFirstUpdate: true })
+], SynTabGroup.prototype, "syncIndicator", 1);
+export {
+  SynTabGroup
+};
+//# sourceMappingURL=chunk.37QGQHZ6.js.map