@telesign/boreal-web-components 0.1.0-alpha.0 → 0.1.0-alpha.2

package/dist/cjs/bds-typography.cjs.entry.js

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-Cdb66Tqj.js');
-var attributes = require('./attributes-RPVEtBdj.js');
+var index = require('./index-C9JKWXwa.js');
+var states = require('./states-C03fKOhs.js');
+var attributes = require('./attributes-D0WPida0.js');
 
 const ALIGNMENT = {
     START: 'start'};
@@ -30,17 +31,17 @@ const FILENAME = 'download';
  */
 const VARIANT_CONFIG = {
     link: {
-        states: [attributes.STATES.DISABLED /* STATES.VISITED, STATES.HOVER, STATES.ACTIVE, STATES.FOCUS */],
+        states: [states.COMPONENT_STATES.DISABLED /* STATES.VISITED, STATES.HOVER, STATES.ACTIVE, STATES.FOCUS */],
         size: [SIZES.S, SIZES.M],
     },
     label: {
-        states: [attributes.STATES.DISABLED],
+        states: [states.COMPONENT_STATES.DISABLED],
         isRequired: true,
         canUseTooltip: true,
     },
     heading: { canUseTooltip: true },
     subheading: { canUseTooltip: true },
-    helper: { states: [attributes.STATES.ERROR] },
+    helper: { states: [states.COMPONENT_STATES.ERROR] },
     display: { size: [SIZES.XS, SIZES.S, SIZES.M, SIZES.L, SIZES.XL] },
 };
 /*
@@ -49,7 +50,7 @@ const VARIANT_CONFIG = {
 const getAttributesByTag = (comp, tagName) => {
     const ATTR_MAP = {
         a: {
-            href: comp.state !== attributes.STATES.DISABLED ? comp.sanitizedHref : null,
+            href: comp.state !== states.COMPONENT_STATES.DISABLED ? comp.sanitizedHref : null,
             target: comp.target,
             download: comp.isDownloadable ? comp.filename : null,
             rel: comp.target === '_blank' ? 'noopener noreferrer' : undefined,
@@ -72,7 +73,7 @@ const BdsTypography = class {
         /** Typography size token. */
         this.size = SIZES.M;
         /** Visual state (if supported by variant). */
-        this.state = attributes.STATES.DEFAULT;
+        this.state = states.COMPONENT_STATES.DEFAULT;
         /** Additional custom CSS class. */
         this.customClass = '';
         /** HTML tag used for rendering. */
@@ -128,7 +129,7 @@ const BdsTypography = class {
         const isInteractiveTag = ['a', 'label'].includes(this.getTagName);
         return {
             'aria-required': this.isRequired && isRequired,
-            'aria-disabled': this.state === attributes.STATES.DISABLED && isInteractiveTag,
+            'aria-disabled': this.state === states.COMPONENT_STATES.DISABLED && isInteractiveTag,
         };
     }
     getVariantStateStyles() {
@@ -153,7 +154,7 @@ const BdsTypography = class {
         };
         const classes = this.getVariantStateStyles();
         const { canUseTooltip = null, isRequired = null } = this.getVariantConfig();
-        return (index.h(index.Host, { key: '6091692b1cb6bf1d3295f0834c8d25425633d65a', class: "bds-typography" }, index.h(TagName, { key: '0cc91c35fa1cc36c99101a79fae0c8b5cf44de43', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, index.h("slot", { key: '973848fba8211cb5ef869e0e48fb1806bd5efdec' }), this.isRequired && isRequired && (index.h("em", { key: 'dd89574e9dedd55905ae4c7bcd57604f26fbd03b', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && index.h("em", { key: '473b0de17bd095b97d54d24d2f3aa75f8a8e4922', class: "bds-typography__info-icon bds-icon-info-circle" }))));
+        return (index.h(index.Host, { key: '80c41f5a33f3089005b9cdf2c7db51e07272b5df', class: "bds-typography" }, index.h(TagName, { key: '623e0a57bf2341ecaeba7e670d01a06f891f4423', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, index.h("slot", { key: 'fa7fa6e7f6cbe6133a1c52bf2f219b2927847a88' }), this.isRequired && isRequired && (index.h("em", { key: 'aa339d8fbf758491db17ac9c471327a0466bf3dc', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && index.h("em", { key: '98a6c58192b585fbbe01a93c031e9ae3c20cf3ca', class: "bds-typography__info-icon bds-icon-info-circle" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/boreal-web-components.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cdb66Tqj.js');
+var index = require('./index-C9JKWXwa.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -40,7 +40,7 @@ var patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["bds-banner.cjs",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-typography.cjs",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]],["my-component.cjs",[[0,"my-component",{"first":[1],"middle":[1],"last":[1]}]]]], options);
+  return index.bootstrapLazy([["bds-banner.cjs",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-button.cjs",[[324,"bds-button",{"label":[1],"disabled":[4],"name":[1],"type":[1],"color":[1],"variant":[1],"size":[1],"loading":[4],"disclosure":[4],"currentState":[32]},null,{"type":[{"checkPropValues":0}],"color":[{"checkPropValues":0}],"variant":[{"checkPropValues":0}],"size":[{"checkPropValues":0}]}]]],["bds-typography.cjs",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{index-Cdb66Tqj.js → index-C9JKWXwa.js}

@@ -118,6 +118,12 @@ var styles = /* @__PURE__ */ new Map();
 var HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
 var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
+var FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
+  "formAssociatedCallback",
+  "formResetCallback",
+  "formDisabledCallback",
+  "formStateRestoreCallback"
+];
 var win = typeof window !== "undefined" ? window : {};
 var H = win.HTMLElement || class {
 };
@@ -882,7 +888,9 @@ var convertToPrivate = (node) => {
 var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   if (propValue != null && !isComplexType(propValue)) {
     if (propType & 4 /* Boolean */) {
-      {
+      if (isFormAssociated && typeof propValue === "string") {
+        return propValue === "" || !!propValue;
+      } else {
         return propValue === "false" ? false : propValue === "" || !!propValue;
       }
     }
@@ -1814,7 +1822,9 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   const instance = hostRef.$lazyInstance$ ;
   newVal = parsePropertyValue(
     newVal,
-    cmpMeta.$members$[propName][0]);
+    cmpMeta.$members$[propName][0],
+    !!(cmpMeta.$flags$ & 64 /* formAssociated */)
+  );
   const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
   const didValueChange = newVal !== oldVal && !areBothNaN;
   if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
@@ -1858,6 +1868,26 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
+  if (cmpMeta.$flags$ & 64 /* formAssociated */ && flags & 1 /* isElementConstructor */) {
+    FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS.forEach((cbName) => {
+      Object.defineProperty(prototype, cbName, {
+        value(...args) {
+          var _a2;
+          const hostRef = getHostRef(this);
+          const instance = hostRef == null ? void 0 : hostRef.$lazyInstance$ ;
+          if (!instance) {
+            (_a2 = hostRef == null ? void 0 : hostRef.$onReadyPromise$) == null ? void 0 : _a2.then((asyncInstance) => {
+              const cb = asyncInstance[cbName];
+              typeof cb === "function" && cb.call(asyncInstance, ...args);
+            });
+          } else {
+            const cb = instance[cbName] ;
+            typeof cb === "function" && cb.call(instance, ...args);
+          }
+        }
+      });
+    });
+  }
   if (cmpMeta.$members$ || BUILD.propChangeCallback) {
     {
       if (Cstr.watchers && !cmpMeta.$watchers$) {
@@ -1907,7 +1937,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
               origSetter.apply(this, [
                 parsePropertyValue(
                   newValue,
-                  memberFlags)
+                  memberFlags,
+                  !!(cmpMeta.$flags$ & 64 /* formAssociated */)
+                )
               ]);
               newValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
               setValue(this, memberName, newValue, cmpMeta);
@@ -1932,7 +1964,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
                 }
                 ref.$lazyInstance$[memberName] = parsePropertyValue(
                   newValue,
-                  memberFlags);
+                  memberFlags,
+                  !!(cmpMeta.$flags$ & 64 /* formAssociated */)
+                );
                 setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
               };
               if (ref.$lazyInstance$) {
@@ -2288,6 +2322,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       } else {
         patchCloneNode(HostElement.prototype);
       }
+      if (cmpMeta.$flags$ & 64 /* formAssociated */) {
+        HostElement.formAssociated = true;
+      }
       cmpMeta.$lazyBundleId$ = lazyBundle[0];
       if (!exclude.includes(tagName) && !customElements2.get(tagName)) {
         cmpTags.push(tagName);

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-Cdb66Tqj.js');
+var index = require('./index-C9JKWXwa.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["bds-banner.cjs",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-typography.cjs",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]],["my-component.cjs",[[0,"my-component",{"first":[1],"middle":[1],"last":[1]}]]]], options);
+  return index.bootstrapLazy([["bds-banner.cjs",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-button.cjs",[[324,"bds-button",{"label":[1],"disabled":[4],"name":[1],"type":[1],"color":[1],"variant":[1],"size":[1],"loading":[4],"disclosure":[4],"currentState":[32]},null,{"type":[{"checkPropValues":0}],"color":[{"checkPropValues":0}],"variant":[{"checkPropValues":0}],"size":[{"checkPropValues":0}]}]]],["bds-typography.cjs",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/states-C03fKOhs.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const COMPONENT_STATES = {
+    DEFAULT: 'default',
+    ERROR: 'error',
+    DISABLED: 'disabled',
+    ACTIVE: 'active'};
+const STATUS_VARIANT = {
+    INFO: 'info'};
+
+exports.COMPONENT_STATES = COMPONENT_STATES;
+exports.STATUS_VARIANT = STATUS_VARIANT;

package/dist/collection/collection-manifest.json

@@ -1,7 +1,7 @@
 {
   "entries": [
+    "components/actions/bds-button/bds-button.js",
     "components/feedback/bds-banner/bds-banner.js",
-    "components/my-component/my-component.js",
     "components/titles-text/bds-typography/bds-typography.js"
   ],
   "compiler": {