@maggioli-design-system/mds-table-row 1.1.1 → 1.4.0

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-797b786c.js');
+const index = require('./index-b308d20f.js');
 
 /*
- Stencil Client Patch Esm v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.14.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["mds-table-row.cjs",[[4,"mds-table-row",{"interactive":[32]},[[16,"tableInteractive","tableInteractiveHandler"]]]]]], options);
+  return index.bootstrapLazy([["mds-table-row.cjs",[[1,"mds-table-row",{"interactive":[1540]},[[16,"tableInteractive","tableInteractiveHandler"]]]]]], options);
   });
 };
 

package/dist/cjs/mds-table-row.cjs.entry.js

@@ -2,50 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-797b786c.js');
+const index = require('./index-b308d20f.js');
 
-function toVal(mix) {
-	var k, y, str='';
-
-	if (typeof mix === 'string' || typeof mix === 'number') {
-		str += mix;
-	} else if (typeof mix === 'object') {
-		if (Array.isArray(mix)) {
-			for (k=0; k < mix.length; k++) {
-				if (mix[k]) {
-					if (y = toVal(mix[k])) {
-						str && (str += ' ');
-						str += y;
-					}
-				}
-			}
-		} else {
-			for (k in mix) {
-				if (mix[k]) {
-					str && (str += ' ');
-					str += k;
-				}
-			}
-		}
-	}
-
-	return str;
-}
-
-function clsx () {
-	var i=0, tmp, x, str='';
-	while (i < arguments.length) {
-		if (tmp = arguments[i++]) {
-			if (x = toVal(tmp)) {
-				str && (str += ' ');
-				str += x;
-			}
-		}
-	}
-	return str;
-}
-
-const mdsTableRowCss = ".table-row {\n\n  display: table-row;\n}\n\n.border {\n\n  border-width: 1px;\n}\n\n.shadow {\n\n  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n {\n\n  display: table-row;\n}\n\n.table-row {\n\n  border-bottom-width: 1px;\n\n  border-bottom-color: var(--border-color, rgb(var(--adjust-tone-09)));\n}\n\n.table-row:last-child {\n\n  border-color: transparent;\n}\n\n.table-row:first-child .table-cell:first-child {\n  border-top-left-radius: var(--radius, 0.5rem);\n}\n\n.table-row:last-child .table-cell:first-child {\n  border-bottom-left-radius: var(--radius, 0.5rem);\n}\n\n.table-row:first-child .table-cell:last-child {\n  border-top-right-radius: var(--radius, 0.5rem);\n}\n\n.table-row:last-child .table-cell:last-child {\n  border-bottom-right-radius: var(--radius, 0.5rem);\n}\n\n.table-row:focus {\n\n  opacity: 0.5;\n}\n\n.table-row--interactive:hover .table-cell {\n  background-color: var(--row-background-hover, rgb(var(--adjust-tone-10)));\n}\n";
+const mdsTableRowCss = ".border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{display:table-row;border-bottom-width:1px;border-bottom:var(--border-width, 2px) solid var(--border-color, rgb(var(--adjust-tone-09)))}:host(:first-child){--radius-top-left:var(--radius, 0.5rem);--radius-top-right:var(--radius, 0.5rem)}:host(:last-child){border-color:transparent;--radius-bottom-left:var(--radius, 0.5rem);--radius-bottom-right:var(--radius, 0.5rem)}:host([interactive]:hover){--background:var(--background-row-hover, rgb(var(--adjust-tone)))}";
 
 let MdsTableRow = class {
   constructor(hostRef) {
@@ -55,7 +14,7 @@ let MdsTableRow = class {
     this.interactive = event.detail;
   }
   render() {
-    return (index.h(index.Host, { class: clsx('table-row', this.interactive && 'table-row--interactive'), role: "row" }, index.h("slot", null)));
+    return (index.h(index.Host, { role: "row" }, index.h("slot", null)));
   }
 };
 MdsTableRow.style = mdsTableRowCss;

package/dist/cjs/mds-table-row.cjs.js

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-797b786c.js');
+const index = require('./index-b308d20f.js');
 
 /*
- Stencil Client Patch Browser v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.14.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-table-row.cjs.js', document.baseURI).href));
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mds-table-row.cjs",[[4,"mds-table-row",{"interactive":[32]},[[16,"tableInteractive","tableInteractiveHandler"]]]]]], options);
+  return index.bootstrapLazy([["mds-table-row.cjs",[[1,"mds-table-row",{"interactive":[1540]},[[16,"tableInteractive","tableInteractiveHandler"]]]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -4,8 +4,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.10.0",
-    "typescriptVersion": "4.3.5"
+    "version": "2.14.0",
+    "typescriptVersion": "4.5.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/mds-table-row/mds-table-row.css

@@ -1,8 +1,3 @@
-.table-row {
-
-  display: table-row;
-}
-
 .border {
 
   border-width: 1px;
@@ -10,49 +5,44 @@
 
 .shadow {
 
-  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
 
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
- {
+/**
+* @prop --background-row-hover: The cell background-color when the mouse go over the table row element
+* @prop --border-color: The border color between table rows
+* @prop --border-width: The border width between table rows
+* @prop --radius: The radius of the table (header and footer excluded)
+*/
 
-  display: table-row;
-}
+:host {
 
-.table-row {
+  display: table-row;
 
   border-bottom-width: 1px;
 
-  border-bottom-color: var(--border-color, rgb(var(--adjust-tone-09)));
+  border-bottom: var(--border-width, 2px) solid var(--border-color, rgb(var(--adjust-tone-09)));
 }
 
-.table-row:last-child {
+:host ( :first-child ) {
 
-  border-color: transparent;
-}
-
-.table-row:first-child .table-cell:first-child {
-  border-top-left-radius: var(--radius, 0.5rem);
+  --radius-top-left: var(--radius, 0.5rem);
+  --radius-top-right: var(--radius, 0.5rem);
 }
 
-.table-row:last-child .table-cell:first-child {
-  border-bottom-left-radius: var(--radius, 0.5rem);
-}
+:host ( :last-child ) {
 
-.table-row:first-child .table-cell:last-child {
-  border-top-right-radius: var(--radius, 0.5rem);
-}
+  border-color: transparent;
 
-.table-row:last-child .table-cell:last-child {
-  border-bottom-right-radius: var(--radius, 0.5rem);
+  --radius-bottom-left: var(--radius, 0.5rem);
+  --radius-bottom-right: var(--radius, 0.5rem);
 }
 
-.table-row:focus {
-
-  opacity: 0.5;
-}
+:host ( [interactive]:hover ) {
 
-.table-row--interactive:hover .table-cell {
-  background-color: var(--row-background-hover, rgb(var(--adjust-tone-10)));
+  --background: var(--background-row-hover, rgb(var(--adjust-tone)));
 }

package/dist/collection/components/mds-table-row/mds-table-row.js

@@ -1,22 +1,38 @@
-import { Component, Host, h, Listen, State } from '@stencil/core';
-import clsx from 'clsx';
+import { Component, Host, h, Listen, Prop } from '@stencil/core';
 export class MdsTableRow {
   tableInteractiveHandler(event) {
     this.interactive = event.detail;
   }
   render() {
-    return (h(Host, { class: clsx('table-row', this.interactive && 'table-row--interactive'), role: "row" },
+    return (h(Host, { role: "row" },
       h("slot", null)));
   }
   static get is() { return "mds-table-row"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["mds-table-row.css"]
   }; }
   static get styleUrls() { return {
     "$": ["mds-table-row.css"]
   }; }
-  static get states() { return {
-    "interactive": {}
+  static get properties() { return {
+    "interactive": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "interactive",
+      "reflect": true
+    }
   }; }
   static get listeners() { return [{
       "name": "tableInteractive",

package/dist/collection/dictionary/icon.js

@@ -1,3 +1,6 @@
-import mggIconsDictionary from '@maggioli-design-system/icons/original/dictionary.json';
-const iconsDictionary = Object.keys(mggIconsDictionary).sort();
+import mggIconsDictionary from '@maggioli-design-system/icons/dist/original/dictionary.json';
+const iconsDictionary = [];
+for (const icon of Object.keys(mggIconsDictionary).sort()) {
+  iconsDictionary.push(`mgg-icons-${icon}`);
+}
 export { iconsDictionary, };

package/dist/collection/dictionary/typography.js

@@ -13,6 +13,7 @@ const typographyDictionary = [
   'label',
   'option',
   'paragraph',
+  'tip',
 ];
 const typographyMonoDictionary = [
   'code',
@@ -33,5 +34,10 @@ const typographySecondaryDictionary = [
   'label',
   'option',
   'paragraph',
+  'tip',
 ];
-export { typographyDictionary, typographyMonoDictionary, typographyPrimaryDictionary, typographySecondaryDictionary, };
+const typographySmallerDictionary = [
+  'option',
+  'tip',
+];
+export { typographyDictionary, typographyMonoDictionary, typographyPrimaryDictionary, typographySecondaryDictionary, typographySmallerDictionary, };

package/dist/collection/dictionary/variant.js

@@ -3,6 +3,7 @@ const themeVariantDictionary = [
   'error',
   'info',
   'light',
+  'primary',
   'success',
   'warning',
 ];
@@ -57,4 +58,8 @@ const toneSimpleVariantDictionary = [
   'weak',
   'quiet',
 ];
-export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };
+const toneMinimalVariantDictionary = [
+  'strong',
+  'weak',
+];
+export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };

package/dist/{custom-elements → components}/index.d.ts

@@ -1,25 +1,7 @@
-/* MdsTableRow custom elements bundle */
+/* MdsTableRow custom elements */
 
 import type { Components, JSX } from "../types/components";
 
-interface MdsTableRow extends Components.MdsTableRow, HTMLElement {}
-export const MdsTableRow: {
-  prototype: MdsTableRow;
-  new (): MdsTableRow;
-};
-
-/**
- * Utility to define all custom elements within this package using the tag name provided in the component's source. 
- * When defining each custom element, it will also check it's safe to define by:
- *
- * 1. Ensuring the "customElements" registry is available in the global context (window).
- * 2. The component tag name is not already defined.
- *
- * Use the standard [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) 
- * method instead to define custom elements individually, or to provide a different tag name.
- */
-export declare const defineCustomElements: (opts?: any) => void;
-
 /**
  * Used to manually set the base path where assets can be found.
  * If the script is used as "module", it's recommended to use "import.meta.url",
@@ -36,7 +18,6 @@ export interface SetPlatformOptions {
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
-  ce?: (eventName: string, opts?: any) => CustomEvent;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
 

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';

package/dist/components/mds-table-row.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MdsTableRow extends Components.MdsTableRow, HTMLElement {}
+export const MdsTableRow: {
+  prototype: MdsTableRow;
+  new (): MdsTableRow;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/mds-table-row.js

@@ -0,0 +1,39 @@
+import { HTMLElement, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+const mdsTableRowCss = ".border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{display:table-row;border-bottom-width:1px;border-bottom:var(--border-width, 2px) solid var(--border-color, rgb(var(--adjust-tone-09)))}:host(:first-child){--radius-top-left:var(--radius, 0.5rem);--radius-top-right:var(--radius, 0.5rem)}:host(:last-child){border-color:transparent;--radius-bottom-left:var(--radius, 0.5rem);--radius-bottom-right:var(--radius, 0.5rem)}:host([interactive]:hover){--background:var(--background-row-hover, rgb(var(--adjust-tone)))}";
+
+let MdsTableRow$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  tableInteractiveHandler(event) {
+    this.interactive = event.detail;
+  }
+  render() {
+    return (h(Host, { role: "row" }, h("slot", null)));
+  }
+  static get style() { return mdsTableRowCss; }
+};
+MdsTableRow$1 = /*@__PURE__*/ proxyCustomElement(MdsTableRow$1, [1, "mds-table-row", {
+    "interactive": [1540]
+  }, [[16, "tableInteractive", "tableInteractiveHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mds-table-row"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mds-table-row":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MdsTableRow$1);
+      }
+      break;
+  } });
+}
+
+const MdsTableRow = MdsTableRow$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MdsTableRow, defineCustomElement };