@maggioli-design-system/mds-table-row 1.0.1 → 1.2.1

package/dist/types/dictionary/loading.d.ts

@@ -0,0 +1,2 @@
+declare const loadingDictionary: string[];
+export { loadingDictionary, };

package/dist/types/dictionary/typography.d.ts

@@ -0,0 +1,6 @@
+declare const typographyDictionary: string[];
+declare const typographyMonoDictionary: string[];
+declare const typographyPrimaryDictionary: string[];
+declare const typographySecondaryDictionary: string[];
+declare const typographySmallerDictionary: string[];
+export { typographyDictionary, typographyMonoDictionary, typographyPrimaryDictionary, typographySecondaryDictionary, typographySmallerDictionary, };

package/dist/types/dictionary/variant.d.ts

@@ -0,0 +1,9 @@
+declare const themeVariantDictionary: string[];
+declare const themeLuminanceVariantDictionary: string[];
+declare const themeStatusVariantDictionary: string[];
+declare const themeFullVariantDictionary: string[];
+declare const themeLabelVariantDictionary: string[];
+declare const toneVariantDictionary: string[];
+declare const toneSimpleVariantDictionary: string[];
+declare const toneMinimalVariantDictionary: string[];
+export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };

package/dist/types/fixtures/cities.d.ts

@@ -0,0 +1,2 @@
+declare const citiesDictionary: string[];
+export { citiesDictionary, };

package/dist/types/interface/input-value.d.ts

@@ -0,0 +1,4 @@
+import { InputValueType } from '../types/input-value-type';
+export interface InputValue {
+  value: InputValueType;
+}

package/dist/types/stencil-public-runtime.d.ts

@@ -666,7 +666,7 @@ export declare namespace JSXBase {
         use: JSXBase.SVGAttributes;
         view: JSXBase.SVGAttributes;
     }
-    interface SlotAttributes {
+    interface SlotAttributes extends JSXAttributes {
         name?: string;
         slot?: string;
         onSlotchange?: (event: Event) => void;
@@ -1427,9 +1427,7 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
-    interface DOMAttributes<T = Element> {
-        key?: string | number;
-        ref?: (elm?: T) => void;
+    interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
         exportparts?: string;
@@ -1550,6 +1548,10 @@ export declare namespace JSXBase {
         onTransitionEndCapture?: (event: TransitionEvent) => void;
     }
 }
+export interface JSXAttributes<T = Element> {
+    key?: string | number;
+    ref?: (elm?: T) => void;
+}
 export interface CustomElementsDefineOptions {
     exclude?: string[];
     resourcesUrl?: string;

package/dist/types/types/autocomplete.d.ts

@@ -0,0 +1,2 @@
+export declare type AutocompleteType = 'additional-name' | 'address' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'cc-additional-name' | 'cc-csc' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-family-name' | 'cc-family-name' | 'cc-given-name' | 'cc-name' | 'cc-number' | 'cc-type' | 'country' | 'country-name' | 'current-password' | 'email' | 'family-name' | 'given-name' | 'honorific-prefix' | 'honorific-suffix' | 'impp' | 'language' | 'name' | 'new-password' | 'nickname' | 'off' | 'on' | 'one-time-code' | 'organization' | 'organization-title' | 'photo' | 'postal-code' | 'sex' | 'street-address' | 'tel' | 'tel-area-code' | 'tel-country-code' | 'tel-extension' | 'tel-local' | 'tel-national' | 'transaction-amount' | 'transaction-currency' | 'url' | 'username';
+export declare type InputTextType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';

package/dist/types/types/button.d.ts

@@ -0,0 +1,4 @@
+export declare type ButtonType = 'a' | 'button' | 'reset' | 'submit';
+export declare type ButtonSizeType = 'sm' | 'md' | 'lg' | 'xl';
+export declare type ButtonIconPositionType = 'left' | 'right';
+export declare type ButtonVariantType = 'primary' | 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning';

package/dist/types/types/form-rel.d.ts

@@ -0,0 +1 @@
+export declare type FormRelType = 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noopener' | 'noreferrer' | 'opener' | 'prev' | 'search';

package/dist/types/types/input-text-type.d.ts

@@ -0,0 +1 @@
+export declare type InputTextType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';

package/dist/types/types/input-value-type.d.ts

@@ -0,0 +1 @@
+export declare type InputValueType = null | number | string | undefined;

package/dist/types/types/loading.d.ts

@@ -0,0 +1 @@
+export declare type LoadingType = 'eager' | 'lazy';

package/dist/types/types/typography.d.ts

@@ -0,0 +1,5 @@
+export declare type TypographyType = 'action' | 'caption' | 'code' | 'detail' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'hack' | 'label' | 'option' | 'paragraph' | 'tip';
+export declare type TypographyPrimaryType = 'action' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export declare type TypographySecondaryType = 'caption' | 'detail' | 'label' | 'option' | 'paragraph' | 'tip';
+export declare type TypographySmallerType = 'tip' | 'option';
+export declare type TypographyMonoType = 'code' | 'hack';

package/dist/types/types/variant.d.ts

@@ -0,0 +1,10 @@
+export declare type ThemeStatusVariantType = 'error' | 'info' | 'success' | 'warning';
+export declare type ThemeVariantType = 'dark' | 'error' | 'info' | 'light' | 'primary' | 'success' | 'warning';
+export declare type ThemeFullVariantType = 'amaranth' | 'aqua' | 'blue' | 'dark' | 'error' | 'green' | 'info' | 'light' | 'lime' | 'orange' | 'orchid' | 'sky' | 'success' | 'violet' | 'warning' | 'yellow';
+export declare type ThemeLuminanceVariantType = 'dark' | 'light';
+export declare type LabelVariantType = 'amaranth' | 'aqua' | 'blue' | 'green' | 'lime' | 'orange' | 'orchid' | 'sky' | 'violet' | 'yellow';
+export declare type ActionVariantType = 'primary' | 'dark' | 'light';
+export declare type StateVariantType = 'disabled' | 'focused' | 'readonly';
+export declare type ToneVariantType = 'strong' | 'weak' | 'ghost' | 'quiet';
+export declare type ToneSimpleVariantType = 'strong' | 'weak' | 'quiet';
+export declare type ToneMinimalVariantType = 'strong' | 'weak';

package/loader/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "magma-components-loader",
+  "name": "mds-table-row-loader",
   "typings": "./index.d.ts",
   "module": "./index.js",
   "main": "./index.cjs.js",

package/package.json

@@ -1,52 +1,49 @@
 {
   "name": "@maggioli-design-system/mds-table-row",
-  "version": "1.0.1",
+  "version": "1.2.1",
   "description": "mds-table-row is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
   "main": "dist/index.cjs.js",
-  "module": "dist/custom-elements/index.js",
+  "module": "dist/index.js",
   "es2015": "dist/esm/index.mjs",
   "es2017": "dist/esm/index.mjs",
-  "types": "dist/custom-elements/index.d.ts",
+  "types": "dist/types/components.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/mds-table-row/mds-table-row.esm.js",
   "files": [
-    "src/components.d.ts",
     "dist/",
     "loader/",
-    "readme.md"
+    "readme.md",
+    "src/",
+    "www/"
   ],
   "scripts": {
-    "build": "stencil build --docs --docs-readme"
+    "build": "rm src/components.d.ts || true && stencil build --docs-readme"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-table": "latest",
-    "@maggioli-design-system/mds-table-body": "latest",
-    "@maggioli-design-system/mds-table-cell": "latest",
-    "@maggioli-design-system/mds-table-footer": "latest",
-    "@maggioli-design-system/mds-table-header": "latest"
-},
+    "@maggioli-design-system/mds-table": "^1.1.3",
+    "@maggioli-design-system/mds-table-body": "^1.2.1",
+    "@maggioli-design-system/mds-table-cell": "^1.1.1",
+    "@maggioli-design-system/mds-table-footer": "^1.0.4",
+    "@maggioli-design-system/mds-table-header": "^1.0.4",
+    "@stencil/core": "^2.12.0"
+  },
   "license": "MIT",
   "author": {
     "name": "Vittorio Vittori",
     "email": "vittorio.vittori@maggioli.it",
     "url": "http://vit.to"
-},
+  },
   "contributors": [
     {
-        "name": "Andrea Pruccoli",
-        "email": "andrea.pruccoli@maggioli.it",
-        "role": "Software Engineer"
-    },
-    {
-        "name": "Stefano Pascazi",
-        "email": "stefano.pascazi@maggioli.it",
-        "role": "Software Engineer"
+      "name": "Andrea Pruccoli",
+      "email": "andrea.pruccoli@maggioli.it",
+      "role": "Software Engineer"
     },
     {
-        "name": "Vittorio Vittori",
-        "email": "vittorio.vittori@maggioli.it",
-        "role": "UX UI Designer"
+      "name": "Vittorio Vittori",
+      "email": "vittorio.vittori@maggioli.it",
+      "role": "UX UI Designer"
     }
-]
+  ]
 }

package/readme.md

@@ -5,6 +5,15 @@
 <!-- Auto Generated Below -->
 
 
+## CSS Custom Properties
+
+| Name                     | Description                                                            |
+| ------------------------ | ---------------------------------------------------------------------- |
+| `--background-row-hover` | The cell background-color when the mouse go over the table row element |
+| `--border-color`         | The border color between table rows                                    |
+| `--radius`               | The radius of the table (header and footer excluded)                   |
+
+
 ----------------------------------------------
 
-Build with love @ **Maggioli Informatica / R&D Department**
+Built with love @ **Maggioli Informatica / R&D Department**

package/src/components/mds-table-row/mds-table-row.css

@@ -0,0 +1,44 @@
+@tailwind utilities;
+
+/**
+* @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 --radius: The radius of the table (header and footer excluded)
+*/
+
+mds-table-row {
+  @apply
+    border-b
+    table-row;
+
+  border-bottom-color: var(--border-color, theme('colors.adjust-tone-09'));
+  border-bottom-style: solid;
+}
+
+mds-table-row:last-child {
+  @apply border-transparent;
+}
+
+mds-table-row:first-child mds-table-cell:first-child {
+  border-top-left-radius: var(--radius, theme('borderRadius.lg'));
+}
+
+mds-table-row:last-child mds-table-cell:first-child {
+  border-bottom-left-radius: var(--radius, theme('borderRadius.lg'));
+}
+
+mds-table-row:first-child mds-table-cell:last-child {
+  border-top-right-radius: var(--radius, theme('borderRadius.lg'));
+}
+
+mds-table-row:last-child mds-table-cell:last-child {
+  border-bottom-right-radius: var(--radius, theme('borderRadius.lg'));
+}
+
+mds-table-row:focus {
+  @apply opacity-50;
+}
+
+mds-table-row.interactive:hover mds-table-cell {
+  background-color: var(--background-row-hover, theme('colors.adjust-tone')) !important;
+}

package/src/components/mds-table-row/mds-table-row.tsx

@@ -0,0 +1,25 @@
+import { Component, Host, h, Listen, State } from '@stencil/core'
+import clsx from 'clsx'
+@Component({
+  tag: 'mds-table-row',
+  styleUrl: 'mds-table-row.css',
+  shadow: false,
+})
+export class MdsTableRow {
+
+  @State() interactive?: boolean
+
+  @Listen('tableInteractive', { target: 'body' })
+  tableInteractiveHandler (event: CustomEvent<boolean>): void {
+    this.interactive = event.detail
+  }
+
+  render () {
+    return (
+      <Host class={clsx(this.interactive && 'interactive')} role="row">
+        <slot/>
+      </Host>
+    )
+  }
+
+}

package/src/components/mds-table-row/readme.md

@@ -0,0 +1,19 @@
+# mds-table-row
+
+
+
+<!-- Auto Generated Below -->
+
+
+## CSS Custom Properties
+
+| Name                     | Description                                                            |
+| ------------------------ | ---------------------------------------------------------------------- |
+| `--background-row-hover` | The cell background-color when the mouse go over the table row element |
+| `--border-color`         | The border color between table rows                                    |
+| `--radius`               | The radius of the table (header and footer excluded)                   |
+
+
+----------------------------------------------
+
+Built with love @ **Maggioli Informatica / R&D Department**

package/src/dictionary/autocomplete.ts

@@ -0,0 +1,62 @@
+const autoCompleteDictionary = [
+  'additional-name',
+  'address',
+  'address-level1',
+  'address-level2',
+  'address-level3',
+  'address-level4',
+  'address-line1',
+  'address-line2',
+  'address-line3',
+  'bday',
+  'bday-day',
+  'bday-month',
+  'bday-year',
+  'cc-additional-name',
+  'cc-csc',
+  'cc-exp',
+  'cc-exp-month',
+  'cc-exp-year',
+  'cc-family-name',
+  'cc-family-name',
+  'cc-given-name',
+  'cc-name',
+  'cc-number',
+  'cc-type',
+  'country',
+  'country-name',
+  'current-password',
+  'email',
+  'family-name',
+  'given-name',
+  'honorific-prefix',
+  'honorific-suffix',
+  'impp',
+  'language',
+  'name',
+  'new-password',
+  'nickname',
+  'off',
+  'on',
+  'one-time-code',
+  'organization',
+  'organization-title',
+  'photo',
+  'postal-code',
+  'sex',
+  'street-address',
+  'tel',
+  'tel-area-code',
+  'tel-country-code',
+  'tel-extension',
+  'tel-local',
+  'tel-national',
+  'transaction-amount',
+  'transaction-currency',
+  'url',
+  'username',
+]
+
+export {
+  autoCompleteDictionary,
+}

package/src/dictionary/button.ts

@@ -0,0 +1,35 @@
+const buttonVariantDictionary = [
+  'dark',
+  'error',
+  'info',
+  'light',
+  'primary',
+  'success',
+  'warning',
+]
+
+const buttonToneVariantDictionary = [
+  'strong',
+  'weak',
+  'ghost',
+  'quiet',
+]
+
+const buttonSizeDictionary = [
+  'sm',
+  'md',
+  'lg',
+  'xl',
+]
+
+const buttonIconPositionDictionary = [
+  'left',
+  'right',
+]
+
+export {
+  buttonSizeDictionary,
+  buttonToneVariantDictionary,
+  buttonVariantDictionary,
+  buttonIconPositionDictionary,
+}

package/src/dictionary/color.ts

@@ -0,0 +1,24 @@
+const colorLabelDictionary = [
+  'amaranth',
+  'aqua',
+  'blue',
+  'green',
+  'lime',
+  'orange',
+  'orchid',
+  'sky',
+  'violet',
+  'yellow',
+]
+
+const colorStatusDictionary = [
+  'error',
+  'info',
+  'success',
+  'warning',
+]
+
+export {
+  colorLabelDictionary,
+  colorStatusDictionary,
+}

package/src/dictionary/icon.ts

@@ -0,0 +1,5 @@
+import mggIconsDictionary from '@maggioli-design-system/icons/dist/original/dictionary.json'
+const iconsDictionary = Object.keys(mggIconsDictionary).sort()
+export {
+  iconsDictionary,
+}

package/src/dictionary/input-text-type.ts

@@ -0,0 +1,17 @@
+const inputTextTypeDictionary = [
+  'date',
+  'email',
+  'number',
+  'password',
+  'search',
+  'tel',
+  'text',
+  'textarea',
+  'time',
+  'url',
+]
+
+export {
+  inputTextTypeDictionary,
+}
+

package/src/dictionary/loading.ts

@@ -0,0 +1,9 @@
+const loadingDictionary = [
+  'eager',
+  'lazy',
+]
+
+export {
+  loadingDictionary,
+}
+

package/src/dictionary/typography.ts

@@ -0,0 +1,54 @@
+const typographyDictionary = [
+  'action',
+  'caption',
+  'code',
+  'detail',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'hack',
+  'label',
+  'option',
+  'paragraph',
+  'tip',
+]
+
+const typographyMonoDictionary = [
+  'code',
+  'hack',
+]
+
+const typographyPrimaryDictionary = [
+  'action',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+]
+
+const typographySecondaryDictionary = [
+  'caption',
+  'detail',
+  'label',
+  'option',
+  'paragraph',
+  'tip',
+]
+
+const typographySmallerDictionary = [
+  'option',
+  'tip',
+]
+
+export {
+  typographyDictionary,
+  typographyMonoDictionary,
+  typographyPrimaryDictionary,
+  typographySecondaryDictionary,
+  typographySmallerDictionary,
+}

package/src/dictionary/variant.ts

@@ -0,0 +1,82 @@
+const themeVariantDictionary = [
+  'dark',
+  'error',
+  'info',
+  'light',
+  'primary',
+  'success',
+  'warning',
+]
+
+const themeLuminanceVariantDictionary = [
+  'dark',
+  'light',
+]
+
+const themeStatusVariantDictionary = [
+  'error',
+  'info',
+  'success',
+  'warning',
+]
+
+const themeFullVariantDictionary = [
+  'amaranth',
+  'aqua',
+  'blue',
+  'dark',
+  'error',
+  'green',
+  'info',
+  'light',
+  'lime',
+  'orange',
+  'orchid',
+  'sky',
+  'success',
+  'violet',
+  'warning',
+  'yellow',
+]
+
+const themeLabelVariantDictionary = [
+  'amaranth',
+  'aqua',
+  'blue',
+  'green',
+  'lime',
+  'orange',
+  'orchid',
+  'sky',
+  'violet',
+  'yellow',
+]
+
+const toneVariantDictionary = [
+  'strong',
+  'weak',
+  'ghost',
+  'quiet',
+]
+
+const toneSimpleVariantDictionary = [
+  'strong',
+  'weak',
+  'quiet',
+]
+
+const toneMinimalVariantDictionary = [
+  'strong',
+  'weak',
+]
+
+export {
+  themeFullVariantDictionary,
+  themeLabelVariantDictionary,
+  themeLuminanceVariantDictionary,
+  themeStatusVariantDictionary,
+  themeVariantDictionary,
+  toneMinimalVariantDictionary,
+  toneSimpleVariantDictionary,
+  toneVariantDictionary,
+}