@vaadin/component-base 24.2.0-alpha8 → 24.2.0-beta1

package/index.d.ts

@@ -4,3 +4,4 @@ export { DirMixin } from './src/dir-mixin.js';
 export { ElementMixin } from './src/element-mixin.js';
 export { ResizeMixin } from './src/resize-mixin.js';
 export { SlotController } from './src/slot-controller.js';
+export { SlotStylesMixin } from './src/slot-styles-mixin.js';

package/index.js

@@ -4,3 +4,4 @@ export { DirMixin } from './src/dir-mixin.js';
 export { ElementMixin } from './src/element-mixin.js';
 export { ResizeMixin } from './src/resize-mixin.js';
 export { SlotController } from './src/slot-controller.js';
+export { SlotStylesMixin } from './src/slot-styles-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.2.0-alpha8",
+  "version": "24.2.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -39,8 +39,8 @@
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/testing-helpers": "^0.5.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "2c024e8fd462d178430418f76a61f498fb549998"
+  "gitHead": "67c8eef57d1c59e7476e29adaf003cf4548878f2"
 }

package/src/define.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+export interface CustomElementType extends CustomElementConstructor {
+  is: string;
+}
+
+export declare function defineCustomElement(CustomElement: CustomElementConstructor): void;

package/src/define.js

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+export function defineCustomElement(CustomElement) {
+  const defined = customElements.get(CustomElement.is);
+  if (!defined) {
+    customElements.define(CustomElement.is, CustomElement);
+  } else {
+    const definedVersion = defined.version;
+    if (definedVersion && CustomElement.version && definedVersion === CustomElement.version) {
+      // Just loading the same thing again
+      console.warn(`The component ${CustomElement.is} has been loaded twice`);
+    } else {
+      console.error(
+        `Tried to define ${CustomElement.is} version ${CustomElement.version} when version ${defined.version} is already in use. Something will probably break.`,
+      );
+    }
+  }
+}

package/src/element-mixin.d.ts

@@ -16,6 +16,7 @@ export declare function ElementMixin<T extends Constructor<HTMLElement>>(
 ): Constructor<DirMixinClass> & Constructor<ElementMixinClass> & T;
 
 export declare class ElementMixinClass {
+  static is: string;
   static version: string;
 
   protected static finalize(): void;

package/src/element-mixin.js

@@ -45,7 +45,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.2.0-alpha8';
+      return '24.2.0-beta1';
     }
 
     /** @protected */

package/src/path-utils.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Convenience method for reading a value from a path.
+ */
+export function get(path: string, object: object): unknown;
+
+/**
+ * Convenience method for setting a value to a path.
+ */
+export function set(path: string, value: unknown, object: object): void;

package/src/path-utils.js

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Convenience method for reading a value from a path.
+ *
+ * @param {string} path
+ * @param {object} object
+ */
+export function get(path, object) {
+  return path.split('.').reduce((obj, property) => (obj ? obj[property] : undefined), object);
+}
+
+/**
+ * Convenience method for setting a value to a path.
+ *
+ * @param {string} path
+ * @param {unknown} value
+ * @param {object} object
+ */
+export function set(path, value, object) {
+  const pathParts = path.split('.');
+  const lastPart = pathParts.pop();
+  const target = pathParts.reduce((target, part) => target[part], object);
+  target[lastPart] = value;
+}

package/src/polylit-mixin.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
+import { get, set } from './path-utils.js';
 
 const caseMap = {};
 
@@ -92,17 +93,6 @@ const PolylitMixinImplementation = (superclass) => {
 
       let result = defaultDescriptor;
 
-      if ('value' in options) {
-        // Set the default value
-        this.addCheckedInitializer((instance) => {
-          if (typeof options.value === 'function') {
-            instance[name] = options.value.call(instance);
-          } else {
-            instance[name] = options.value;
-          }
-        });
-      }
-
       if (options.sync) {
         result = {
           get: defaultDescriptor.get,
@@ -128,6 +118,10 @@ const PolylitMixinImplementation = (superclass) => {
           // This is run during construction of the element
           instance[`_set${upper(name)}`] = function (value) {
             setter.call(instance, value);
+
+            if (options.sync) {
+              this.performUpdate();
+            }
           };
         });
 
@@ -141,6 +135,19 @@ const PolylitMixinImplementation = (superclass) => {
         };
       }
 
+      if ('value' in options) {
+        // Set the default value
+        this.addCheckedInitializer((instance) => {
+          const value = typeof options.value === 'function' ? options.value.call(instance) : options.value;
+
+          if (options.readOnly) {
+            instance[`_set${upper(name)}`](value);
+          } else {
+            instance[name] = value;
+          }
+        });
+      }
+
       if (options.observer) {
         const method = options.observer;
 
@@ -272,15 +279,12 @@ const PolylitMixinImplementation = (superclass) => {
 
     /** @protected */
     _get(path, object) {
-      return path.split('.').reduce((obj, property) => (obj ? obj[property] : undefined), object);
+      return get(path, object);
     }
 
     /** @protected */
     _set(path, value, object) {
-      const pathParts = path.split('.');
-      const lastPart = pathParts.pop();
-      const target = pathParts.reduce((target, part) => target[part], object);
-      target[lastPart] = value;
+      set(path, value, object);
     }
   }
 

package/src/slot-styles-mixin.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+/**
+ * Mixin to insert styles into the outer scope to handle slotted components.
+ * This is useful e.g. to hide native `<input type="number">` controls.
+ */
+export declare function SlotStylesMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<SlotStylesMixinClass> & T;
+
+export declare class SlotStylesMixinClass {
+  /**
+   * List of styles to insert into root.
+   */
+  protected readonly slotStyles: string[];
+}

package/src/slot-styles-mixin.js

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+
+const stylesMap = new WeakMap();
+
+/**
+ * Get all the styles inserted into root.
+ * @param {DocumentOrShadowRoot} root
+ * @return {Set<string>}
+ */
+function getRootStyles(root) {
+  if (!stylesMap.has(root)) {
+    stylesMap.set(root, new Set());
+  }
+
+  return stylesMap.get(root);
+}
+
+/**
+ * Insert styles into the root.
+ * @param {string} styles
+ * @param {DocumentOrShadowRoot} root
+ */
+function insertStyles(styles, root) {
+  const style = document.createElement('style');
+  style.textContent = styles;
+
+  if (root === document) {
+    document.head.appendChild(style);
+  } else {
+    root.insertBefore(style, root.firstChild);
+  }
+}
+
+/**
+ * Mixin to insert styles into the outer scope to handle slotted components.
+ * This is useful e.g. to hide native `<input type="number">` controls.
+ *
+ * @polymerMixin
+ */
+export const SlotStylesMixin = dedupingMixin(
+  (superclass) =>
+    class SlotStylesMixinClass extends superclass {
+      /**
+       * List of styles to insert into root.
+       * @protected
+       */
+      get slotStyles() {
+        return {};
+      }
+
+      /** @protected */
+      connectedCallback() {
+        super.connectedCallback();
+
+        this.__applySlotStyles();
+      }
+
+      /** @private */
+      __applySlotStyles() {
+        const root = this.getRootNode();
+        const rootStyles = getRootStyles(root);
+
+        this.slotStyles.forEach((styles) => {
+          if (!rootStyles.has(styles)) {
+            insertStyles(styles, root);
+            rootStyles.add(styles);
+          }
+        });
+      }
+    },
+);

package/src/tooltip-controller.d.ts

@@ -23,6 +23,13 @@ type TooltipPosition =
  * A controller that manages the slotted tooltip element.
  */
 export class TooltipController extends SlotController {
+  /**
+   * An HTML element for linking with the tooltip overlay
+   * via `aria-describedby` attribute used by screen readers.
+   * When not set, defaults to `target`.
+   */
+  ariaTarget: HTMLElement | HTMLElement[];
+
   /**
    * Object with properties passed to `generator`
    * function to be used for generating tooltip text.
@@ -51,6 +58,12 @@ export class TooltipController extends SlotController {
    */
   target: HTMLElement;
 
+  /**
+   * Set an HTML element for linking with the tooltip overlay
+   * via `aria-describedby` attribute used by screen readers.
+   */
+  setAriaTarget(ariaTarget: HTMLElement | HTMLElement[]): void;
+
   /**
    * Set a context object to be used by generator.
    */

package/src/tooltip-controller.js

@@ -26,6 +26,10 @@ export class TooltipController extends SlotController {
   initCustomNode(tooltipNode) {
     tooltipNode.target = this.target;
 
+    if (this.ariaTarget !== undefined) {
+      tooltipNode.ariaTarget = this.ariaTarget;
+    }
+
     if (this.context !== undefined) {
       tooltipNode.context = this.context;
     }
@@ -45,6 +49,33 @@ export class TooltipController extends SlotController {
     if (this.shouldShow !== undefined) {
       tooltipNode.shouldShow = this.shouldShow;
     }
+
+    this.__notifyChange();
+  }
+
+  /**
+   * Override to notify the host when the tooltip is removed.
+   *
+   * @param {Node} tooltipNode
+   * @protected
+   * @override
+   */
+  teardownNode() {
+    this.__notifyChange();
+  }
+
+  /**
+   * Set an HTML element for linking with the tooltip overlay
+   * via `aria-describedby` attribute used by screen readers.
+   * @param {HTMLElement} ariaTarget
+   */
+  setAriaTarget(ariaTarget) {
+    this.ariaTarget = ariaTarget;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.ariaTarget = ariaTarget;
+    }
   }
 
   /**
@@ -127,4 +158,9 @@ export class TooltipController extends SlotController {
       tooltipNode.target = target;
     }
   }
+
+  /** @private */
+  __notifyChange() {
+    this.dispatchEvent(new CustomEvent('tooltip-changed', { detail: { node: this.node } }));
+  }
 }