@govtechsg/sgds-web-component 2.0.0-rc.1 → 2.0.0-rc.2

package/components/Dropdown/index.umd.js

@@ -65,6 +65,235 @@
     };
   }
 
+  /**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  const global$3 = window;
+  /**
+   * Whether the current browser supports `adoptedStyleSheets`.
+   */
+  const supportsAdoptingStyleSheets$1 = global$3.ShadowRoot &&
+      (global$3.ShadyCSS === undefined || global$3.ShadyCSS.nativeShadow) &&
+      'adoptedStyleSheets' in Document.prototype &&
+      'replace' in CSSStyleSheet.prototype;
+  /**
+   * Applies the given styles to a `shadowRoot`. When Shadow DOM is
+   * available but `adoptedStyleSheets` is not, styles are appended to the
+   * `shadowRoot` to [mimic spec behavior](https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets).
+   * Note, when shimming is used, any styles that are subsequently placed into
+   * the shadowRoot should be placed *before* any shimmed adopted styles. This
+   * will match spec behavior that gives adopted sheets precedence over styles in
+   * shadowRoot.
+   */
+  const adoptStyles$1 = (renderRoot, styles) => {
+      if (supportsAdoptingStyleSheets$1) {
+          renderRoot.adoptedStyleSheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
+      }
+      else {
+          styles.forEach((s) => {
+              const style = document.createElement('style');
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              const nonce = global$3['litNonce'];
+              if (nonce !== undefined) {
+                  style.setAttribute('nonce', nonce);
+              }
+              style.textContent = s.cssText;
+              renderRoot.appendChild(style);
+          });
+      }
+  };
+
+  /**
+   * @typedef {import('./types').RenderOptions} RenderOptions
+   * @typedef {import('./types').ScopedElementsMixin} ScopedElementsMixin
+   * @typedef {import('./types').ScopedElementsHost} ScopedElementsHost
+   * @typedef {import('./types').ScopedElementsMap} ScopedElementsMap
+   * @typedef {import('@lit/reactive-element').CSSResultOrNative} CSSResultOrNative
+   */
+
+  // @ts-ignore
+  const supportsScopedRegistry = !!ShadowRoot.prototype.createElement;
+
+  /**
+   * @template {import('./types').Constructor<HTMLElement>} T
+   * @param {T} superclass
+   * @return {T & import('./types').Constructor<ScopedElementsHost>}
+   */
+  const ScopedElementsMixinImplementation = superclass =>
+    /** @type {ScopedElementsHost} */
+    class ScopedElementsHost extends superclass {
+      /**
+       * Obtains the scoped elements definitions map if specified.
+       *
+       * @returns {ScopedElementsMap}
+       */
+      static get scopedElements() {
+        return {};
+      }
+
+      /**
+       * Obtains the ShadowRoot options.
+       *
+       * @type {ShadowRootInit}
+       */
+      static get shadowRootOptions() {
+        return this.__shadowRootOptions;
+      }
+
+      /**
+       * Set the shadowRoot options.
+       *
+       * @param {ShadowRootInit} value
+       */
+      static set shadowRootOptions(value) {
+        this.__shadowRootOptions = value;
+      }
+
+      /**
+       * Obtains the element styles.
+       *
+       * @returns {CSSResultOrNative[]}
+       */
+      static get elementStyles() {
+        return this.__elementStyles;
+      }
+
+      static set elementStyles(styles) {
+        this.__elementStyles = styles;
+      }
+
+      // either TS or ESLint will complain here
+      // eslint-disable-next-line no-unused-vars
+      constructor(..._args) {
+        super();
+        /** @type {RenderOptions} */
+        this.renderOptions = this.renderOptions || undefined;
+      }
+
+      /**
+       * Obtains the CustomElementRegistry associated to the ShadowRoot.
+       *
+       * @returns {CustomElementRegistry}
+       */
+      get registry() {
+        // @ts-ignore
+        return this.constructor.__registry;
+      }
+
+      /**
+       * Set the CustomElementRegistry associated to the ShadowRoot
+       *
+       * @param {CustomElementRegistry} registry
+       */
+      set registry(registry) {
+        // @ts-ignore
+        this.constructor.__registry = registry;
+      }
+
+      createRenderRoot() {
+        const { scopedElements, shadowRootOptions, elementStyles } =
+          /** @type {typeof ScopedElementsHost} */ (this.constructor);
+
+        const shouldCreateRegistry =
+          !this.registry ||
+          // @ts-ignore
+          (this.registry === this.constructor.__registry &&
+            !Object.prototype.hasOwnProperty.call(this.constructor, '__registry'));
+
+        /**
+         * Create a new registry if:
+         * - the registry is not defined
+         * - this class doesn't have its own registry *AND* has no shared registry
+         */
+        if (shouldCreateRegistry) {
+          this.registry = supportsScopedRegistry ? new CustomElementRegistry() : customElements;
+          for (const [tagName, klass] of Object.entries(scopedElements)) {
+            this.defineScopedElement(tagName, klass);
+          }
+        }
+
+        /** @type {ShadowRootInit} */
+        const options = {
+          mode: 'open',
+          ...shadowRootOptions,
+          customElements: this.registry,
+        };
+
+        const createdRoot = this.attachShadow(options);
+        if (supportsScopedRegistry) {
+          this.renderOptions.creationScope = createdRoot;
+        }
+
+        if (createdRoot instanceof ShadowRoot) {
+          adoptStyles$1(createdRoot, elementStyles);
+          this.renderOptions.renderBefore = this.renderOptions.renderBefore || createdRoot.firstChild;
+        }
+
+        return createdRoot;
+      }
+
+      createScopedElement(tagName) {
+        const root = supportsScopedRegistry ? this.shadowRoot : document;
+        // @ts-ignore polyfill to support createElement on shadowRoot is loaded
+        return root.createElement(tagName);
+      }
+
+      /**
+       * Defines a scoped element.
+       *
+       * @param {string} tagName
+       * @param {typeof HTMLElement} klass
+       */
+      defineScopedElement(tagName, klass) {
+        const registeredClass = this.registry.get(tagName);
+        if (registeredClass && supportsScopedRegistry === false && registeredClass !== klass) {
+          // eslint-disable-next-line no-console
+          console.error(
+            [
+              `You are trying to re-register the "${tagName}" custom element with a different class via ScopedElementsMixin.`,
+              'This is only possible with a CustomElementRegistry.',
+              'Your browser does not support this feature so you will need to load a polyfill for it.',
+              'Load "@webcomponents/scoped-custom-element-registry" before you register ANY web component to the global customElements registry.',
+              'e.g. add "<script src="/node_modules/@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js"></script>" as your first script tag.',
+              'For more details you can visit https://open-wc.org/docs/development/scoped-elements/',
+            ].join('\n'),
+          );
+        }
+        if (!registeredClass) {
+          return this.registry.define(tagName, klass);
+        }
+        return this.registry.get(tagName);
+      }
+
+      /**
+       * @deprecated use the native el.tagName instead
+       *
+       * @param {string} tagName
+       * @returns {string} the tag name
+       */
+      // eslint-disable-next-line class-methods-use-this
+      getScopedTagName(tagName) {
+        // @ts-ignore
+        return this.constructor.getScopedTagName(tagName);
+      }
+
+      /**
+       * @deprecated use the native el.tagName instead
+       *
+       * @param {string} tagName
+       * @returns {string} the tag name
+       */
+      // eslint-disable-next-line class-methods-use-this
+      static getScopedTagName(tagName) {
+        // @ts-ignore
+        return this.__registry.get(tagName) ? tagName : undefined;
+      }
+    };
+
+  const ScopedElementsMixin = dedupeMixin(ScopedElementsMixinImplementation);
+
   /**
    * @license
    * Copyright 2019 Google LLC
@@ -2804,133 +3033,6 @@
           `is not recommended.`);
   }
 
-  /**
-   * @typedef {import('./types.js').ScopedElementsHost} ScopedElementsHost
-   * @typedef {import('./types.js').ScopedElementsMap} ScopedElementsMap
-   */
-
-  const version = '3.0.0';
-  const versions = window.scopedElementsVersions || (window.scopedElementsVersions = []);
-  if (!versions.includes(version)) {
-    versions.push(version);
-  }
-
-  /**
-   * @template {import('./types.js').Constructor<HTMLElement>} T
-   * @param {T} superclass
-   * @return {T & import('./types.js').Constructor<ScopedElementsHost>}
-   */
-  const ScopedElementsMixinImplementation$1 = superclass =>
-    /** @type {ScopedElementsHost} */
-    class ScopedElementsHost extends superclass {
-      /**
-       * Obtains the scoped elements definitions map if specified.
-       *
-       * @type {ScopedElementsMap=}
-       */
-      static scopedElements;
-
-      static get scopedElementsVersion() {
-        return version;
-      }
-
-      /** @type {CustomElementRegistry=} */
-      static __registry;
-
-      /**
-       * Obtains the CustomElementRegistry associated to the ShadowRoot.
-       *
-       * @returns {CustomElementRegistry=}
-       */
-      get registry() {
-        return /** @type {typeof ScopedElementsHost} */ (this.constructor).__registry;
-      }
-
-      /**
-       * Set the CustomElementRegistry associated to the ShadowRoot
-       *
-       * @param {CustomElementRegistry} registry
-       */
-      set registry(registry) {
-        /** @type {typeof ScopedElementsHost} */ (this.constructor).__registry = registry;
-      }
-
-      /**
-       * @param {ShadowRootInit} options
-       * @returns {ShadowRoot}
-       */
-      attachShadow(options) {
-        const { scopedElements } = /** @type {typeof ScopedElementsHost} */ (this.constructor);
-
-        const shouldCreateRegistry =
-          !this.registry ||
-          // @ts-ignore
-          (this.registry === this.constructor.__registry &&
-            !Object.prototype.hasOwnProperty.call(this.constructor, '__registry'));
-
-        /**
-         * Create a new registry if:
-         * - the registry is not defined
-         * - this class doesn't have its own registry *AND* has no shared registry
-         * This is important specifically for superclasses/inheritance
-         */
-        if (shouldCreateRegistry) {
-          this.registry = new CustomElementRegistry();
-          for (const [tagName, klass] of Object.entries(scopedElements ?? {})) {
-            this.registry.define(tagName, klass);
-          }
-        }
-
-        return super.attachShadow({
-          ...options,
-          // The polyfill currently expects the registry to be passed as `customElements`
-          customElements: this.registry,
-          // But the proposal has moved forward, and renamed it to `registry`
-          // For backwards compatibility, we pass it as both
-          registry: this.registry,
-        });
-      }
-    };
-
-  const ScopedElementsMixin$1 = dedupeMixin(ScopedElementsMixinImplementation$1);
-
-  /**
-   * @typedef {import('./types.js').ScopedElementsHost} ScopedElementsHost
-   * @typedef {import('./types.js').ScopedElementsMap} ScopedElementsMap
-   * @typedef {import('lit').CSSResultOrNative} CSSResultOrNative
-   * @typedef {import('lit').LitElement} LitElement
-   * @typedef {typeof import('lit').LitElement} TypeofLitElement
-   * @typedef {import('@open-wc/dedupe-mixin').Constructor<LitElement>} LitElementConstructor
-   * @typedef {import('@open-wc/dedupe-mixin').Constructor<ScopedElementsHost>} ScopedElementsHostConstructor
-   */
-
-  /**
-   * @template {LitElementConstructor} T
-   * @param {T} superclass
-   * @return {T & ScopedElementsHostConstructor}
-   */
-  const ScopedElementsMixinImplementation = superclass =>
-    /** @type {ScopedElementsHost} */
-    class ScopedElementsHost extends ScopedElementsMixin$1(superclass) {
-      createRenderRoot() {
-        const { shadowRootOptions, elementStyles } = /** @type {TypeofLitElement} */ (
-          this.constructor
-        );
-
-        const shadowRoot = this.attachShadow(shadowRootOptions);
-        // @ts-ignore
-        this.renderOptions.creationScope = shadowRoot;
-
-        adoptStyles(shadowRoot, elementStyles);
-
-        this.renderOptions.renderBefore ??= shadowRoot.firstChild;
-
-        return shadowRoot;
-      }
-    };
-
-  const ScopedElementsMixin = dedupeMixin(ScopedElementsMixinImplementation);
-
   /**
    * @license
    * Copyright 2017 Google LLC