@duetds/components 4.30.1 → 4.33.1

package/lib/types/utils/js-utils.d.ts

@@ -0,0 +1 @@
+export declare const debounce: (func: any, timeout?: number) => (...args: any[]) => void;

package/lib/types/utils/language-utils.d.ts

@@ -18,6 +18,7 @@ export interface DuetLangObject {
   sv: any;
 }
 export declare type DuetMonetaryDefaults = "$" | "€" | "£";
+export declare const getCurrentLanguage: () => string;
 export declare const isOfTypeLanguage: (keyInput: string) => keyInput is DuetLanguage;
 /**
  * Returns the current language as a string representation (taken from html lang attribute)
@@ -37,13 +38,17 @@ export declare const getLocale: (lang: DuetLanguageWithUs) => {
   money: DuetMonetaryDefaults;
   locale: DuetLocale;
 };
+/**
+ * Takes any json object that is passed and/or htmlencoded and converts it to proper json
+ */
+export declare const sanitizeString: (string: any) => Record<string, any> | string;
 /**
  * Returns the current string / object from a given translation object
  * If language is not fi|sv|en it will default to "fi"
  * special case where lang can be ALSO be "us" in addition to other types - if user decides to override local language
- * @param {object} langObject - {fi: "finnish", sv: "swedish", en: "english"}
+ * @param {object} langObject - {fi: "finnish", sv: "swedish", en: "english"} | string will get JSON.parsed
  * @param {boolean} languageOverride = false - in case you want to override the actual language set in html tag
  * @default {object} {locale: "fi-FI", money: "€"}
- * @returns {(string|Object)} given example contains {fi:"something"} and langua===fi this will return "something"
+ * @returns {(string|Object)} given example contains {fi:"something"} and language===fi this will return "something"
  */
-export declare const getLocaleString: (langObject: DuetLangObject, languageOverride?: string) => any;
+export declare const getLocaleString: (langObject: DuetLangObject | string, languageOverride?: string) => any;

package/lib/types/utils/string-utils.d.ts

@@ -1,2 +1,3 @@
 export declare const parsePossibleJSON: (maybeJSON: unknown) => any;
 export declare function sanitizeString(string: string): string;
+export declare const convertHtmlQuotes: (string: any) => any;

package/lib/types/utils/watch-options.d.ts

@@ -1,2 +1,4 @@
 export declare const watchForOptions: <T extends HTMLElement>(containerEl: HTMLElement, tagName: string, onChange: (el: T) => void) => any;
+export declare const watchForElement: <T extends HTMLElement>(containerEl: HTMLElement, tagName: string, onChange: (el: T) => void) => any;
 export declare const findCheckedOption: (el: any, tagName: string) => HTMLElement;
+export declare const findErrorItems: (el: any, tagName: string) => HTMLElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "4.30.1",
+  "version": "4.33.1",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -20,14 +20,16 @@
   "scripts": {
     "precommit": "stencil test --spec --silent",
     "test": "stencil test --spec --e2e --silent",
-    "test:ci": "npm run test:scss:ci && stencil test --spec --e2e --reporters=default --reporters=jest-junit",
+    "test:ci": "cross-env-shell CI=true run-p test:scss:ci test:stencil:ci",
     "test:scss": "stylelint **/*.scss --config ../../.stylelintrc.js",
     "test:scss:ci": "npm run test:scss --silent -- --custom-formatter '../../node_modules/stylelint-junit-formatter' > junit-scsscomponents.xml",
-    "test:dev": "run-p test:watch koa:ci",
+    "test:dev": "run-p test:watch",
     "test:watch": "stencil test --spec --e2e --watchAll",
-    "test:fixtures": "run-p test:stencil:fixtures koa:ci",
-    "test:fixtures:watch": "run-p test:stencil:fixtures:watch koa",
-    "test:fixtures:ci": "run-p test:stencil:fixtures:ci koa:ci",
+    "test:fixtures": "run-p koa:ci test:stencil:fixtures",
+    "test:stencil": "stencil test --maxWorkers=50% --e2e --spec --passWithNoTests",
+    "test:stencil:ci": "stencil test --spec --passWithNoTests",
+    "test:fixtures:watch": "run-p koa:ci test:stencil:fixtures:watch",
+    "test:fixtures:ci": "cross-env-shell CI=true run-p koa:ci test:stencil:fixtures:ci",
     "test:stencil:fixtures": "cross-env-shell VIZDIF=true stencil test --maxWorkers=50% --e2e -t vizdif",
     "test:stencil:fixtures:watch": "cross-env-shell VIZDIF=true stencil test --maxWorkers=25% --e2e --watch -t vizdif",
     "test:stencil:fixtures:ci": "cross-env-shell VIZDIF=true stencil test --ci --e2e -t vizdif",
@@ -39,23 +41,25 @@
     "stencil:koa": "stencil build --dev --watch",
     "start": "run-p koa stencil:koa",
     "start:dev": "npm run stencil:dev",
-    "koa": "onchange -k -i --await-write-finish 600 \"helpers/*.js\" \"lib/**\" \"src/index.html\" \"../fonts/lib/**\" \"../tokens/lib/**\" \"../css/lib/**\" \"../icons/lib/**\" -- npm run koa:ci",
-    "koa:ci": "node helpers/koa-server.js",
+    "koa": "onchange -k -i --await-write-finish 600 \"helpers/*.js\" \"lib/**\" \"src/index.html\" \"../fonts/lib/**\" \"../tokens/lib/**\" \"../css/lib/**\" \"../icons/lib/**\" -- npm run koa:dev",
+    "koa:ci": "node helpers/koa-server.js &",
+    "koa:dev": "node helpers/koa-server.js",
     "duet:build:testsite": "stencil build --serve",
     "copy:vscode": "copyfiles --flat \"./lib/html.html-data.json\" \"../vscode\""
   },
   "dependencies": {
-    "body-scroll-lock": "3.1.5"
+    "body-scroll-lock": "3.1.5",
+    "koa-colorful-logger": "0.0.3"
   },
   "devDependencies": {
-    "@duetds/fonts": "1.4.0",
-    "@duetds/icons": "2.2.0",
+    "@duetds/fonts": "1.4.4",
+    "@duetds/icons": "2.2.4",
     "@duetds/stencil-angular-output-target": "0.0.2",
     "@duetds/stencil-react-output-target": "0.0.10",
-    "@duetds/tokens": "2.4.0",
+    "@duetds/tokens": "2.4.4",
     "@koa/cors": "3.1.0",
     "@rollup/plugin-replace": "3.0.0",
-    "@stencil/core": "2.9.0",
+    "@stencil/core": "2.11.0",
     "@stencil/sass": "1.5.2",
     "@stencil/utils": "0.0.5",
     "@types/jest": "26.0.24",
@@ -64,7 +68,7 @@
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "dotenv": "10.0.0",
-    "http-server": "13.0.2",
+    "find-up": "5.0.0",
     "jest": "26.6.3",
     "jest-cli": "26.6.3",
     "jest-environment-node": "26.6.2",
@@ -80,6 +84,7 @@
     "onchange": "7.1.0",
     "prettier": "2.4.1",
     "puppeteer": "9.1.1",
+    "rollup-plugin-node-polyfills": "0.2.1",
     "sass": "1.42.1",
     "stylelint": "13.13.1",
     "stylelint-config-recess-order": "2.5.0",
@@ -91,5 +96,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "213a82a451886b272330050ef1e4b86d83aa226e"
+  "gitHead": "43d69ade79c0291bfb0ae22468e186171b49a5d6"
 }

package/lib/cjs/duet-table.cjs.entry.js

@@ -1,132 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0c949193.js');
-const tokens_module = require('./tokens.module-53b3bd92.js');
-const themeableComponent = require('./themeable-component-0c1be552.js');
-
-const duetTableCss = "duet-table{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:block;font-variant-numeric:tabular-nums}duet-table table,duet-table thead,duet-table tbody,duet-table tfoot,duet-table th,duet-table td,duet-table tr{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}duet-table.duet-m-0{margin:0 !important}duet-table table{width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;text-align:left;border-spacing:0;border-collapse:separate}duet-table.duet-theme-turva table{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}duet-table td{-webkit-hyphens:auto;hyphens:auto;color:#00294d}duet-table.duet-theme-turva td{color:#171c3a}duet-table th{font-weight:600;line-height:1.25;color:#657787;text-align:left}duet-table.duet-theme-turva th{color:#747475}duet-table tbody th{font-weight:600;color:#00294d}duet-table.duet-theme-turva tbody th{color:#171c3a}.duet-table-flattened table,.duet-table-flattened thead,.duet-table-flattened tbody,.duet-table-flattened tfoot,.duet-table-flattened th,.duet-table-flattened td,.duet-table-flattened tr{display:block}.duet-table-flattened thead tr{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-table-flattened td{line-height:1.25}.duet-table-flattened td:not(:last-child){margin-bottom:16px !important}.duet-table-flattened tbody td,.duet-table-flattened tbody th,.duet-table-flattened tfoot td{padding:0 !important;text-align:left !important}.duet-table-flattened tbody th{font-weight:600;line-height:1.25;color:#657787;text-align:left}.duet-table-flattened td[data-heading]::before{margin-bottom:4px !important;display:block;font-size:1rem;font-weight:600;color:#00294d;content:attr(data-heading)}.duet-table-flattened.duet-theme-turva td[data-heading]::before{color:#171c3a}.duet-table-sticky thead th{position:sticky;top:0;background:white}.duet-table-striped td,.duet-table-striped th{padding:20px !important}@media (max-width: 35.9375em){.duet-table-striped td,.duet-table-striped th{padding:20px 12px !important}}.duet-table-striped tbody th{background:white}.duet-table-striped.duet-table-sticky thead th{border-bottom:1px solid #e1e3e6}.duet-table-striped.duet-table-sticky.duet-theme-turva thead th{border-bottom-color:#e4e4e6}.duet-table-striped tbody:not(:first-of-type) th{padding-top:40px !important}.duet-table-striped tbody:only-of-type tr:nth-of-type(odd){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tfoot td{border-top:1px solid #e1e3e6}.duet-table-striped.duet-theme-turva tfoot td{border-top-color:#e4e4e6}.duet-table-striped.duet-table-flattened tbody:not(:first-of-type) th{padding-top:20px !important}.duet-table-striped.duet-table-flattened tr{padding:20px !important}.duet-table-striped.duet-table-flattened tfoot td{border-top:0}.duet-table-striped.duet-table-flattened tfoot tr{border-top:1px solid #e1e3e6}.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr{border-top-color:#e4e4e6}.duet-table-minimal th,.duet-table-plain th{padding:16px !important;border-bottom:1px solid #657787}.duet-table-minimal th:first-child,.duet-table-plain th:first-child{padding-left:0 !important}.duet-table-minimal th:last-child,.duet-table-plain th:last-child{padding-right:0 !important}.duet-theme-turva.duet-table-minimal th,.duet-theme-turva.duet-table-plain th{border-bottom-color:#444445}.duet-table-minimal tbody th,.duet-table-plain tbody th{padding-top:40px !important;border-bottom-color:#e1e3e6}.duet-theme-turva.duet-table-minimal tbody th,.duet-theme-turva.duet-table-plain tbody th{border-bottom-color:#e4e4e6}.duet-table-minimal td,.duet-table-plain td{padding:16px !important}.duet-table-minimal td:first-child,.duet-table-plain td:first-child{padding-left:0 !important}.duet-table-minimal td:last-child,.duet-table-plain td:last-child{padding-right:0 !important}.duet-table-minimal tbody td,.duet-table-plain tbody td{border-bottom:1px solid #e1e3e6}.duet-theme-turva.duet-table-minimal tbody td,.duet-theme-turva.duet-table-plain tbody td{border-bottom-color:#e4e4e6}.duet-table-flattened.duet-table-minimal tbody:first-of-type th,.duet-table-flattened.duet-table-plain tbody:first-of-type th{padding-top:0 !important}.duet-table-flattened.duet-table-minimal td,.duet-table-flattened.duet-table-plain td,.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{border-bottom:0}.duet-table-flattened.duet-table-minimal tr,.duet-table-flattened.duet-table-plain tr{padding:20px 0 !important}.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{padding-top:20px !important}.duet-table-flattened.duet-table-minimal tfoot td,.duet-table-flattened.duet-table-plain tfoot td{margin-bottom:4px !important}.duet-table-flattened.duet-table-minimal tbody:not(:only-of-type) tr:first-child,.duet-table-flattened.duet-table-plain tbody:not(:only-of-type) tr:first-child{border-bottom:0}.duet-table-plain.duet-table-flattened tbody tr{border-bottom:1px solid #e1e3e6}.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr{border-bottom-color:#e4e4e6}.duet-table-minimal tbody tr,.duet-table-minimal tbody tr td{vertical-align:top;border-bottom:0 none}.duet-table-minimal tbody tr:last-of-type,.duet-table-minimal tbody tr:last-of-type td{border-bottom:1px solid #e1e3e6}.duet-table-minimal.duet-table-flattened tbody tr,.duet-table-minimal.duet-table-flattened tbody tr td{border-bottom:0 none}.duet-table-minimal.duet-table-flattened tbody tr td[data-heading]::before{display:none}.duet-table-minimal.duet-table-flattened tfoot{border-top:1px solid #e1e3e6}.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot{border-top-color:#e4e4e6}.duet-table-scrollable{position:relative;width:100%;overflow-x:auto;background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0)), linear-gradient(-90deg, #fff 0%, rgba(255, 255, 255, 0)) 100% 0, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 100% 0%;background-repeat:no-repeat;background-attachment:local, local, scroll, scroll;background-size:100px 100%, 100px 100%, 12px 100%, 12px 100%}.duet-table-selected-column{background:rgba(0, 119, 179, 0.08)}.duet-theme-turva .duet-table-selected-column{background:rgba(68, 68, 69, 0.08)}";
-
-// remove wrapping speech marks.
-// media query tokens are wrapped in speech marks,
-// which need to be removed before use with matchMedia.
-const unwrap = (str) => str.substring(1, str.length - 1);
-const breakpointToToken = {
-  none: "all",
-  "none-scrollable": "all",
-  small: unwrap(tokens_module.mediaQuerySmall),
-  medium: unwrap(tokens_module.mediaQueryMedium),
-  large: unwrap(tokens_module.mediaQueryLarge),
-  "x-large": unwrap(tokens_module.mediaQueryXLarge),
-  "xx-large": unwrap(tokens_module.mediaQueryXxLarge),
-  "xxx-large": unwrap(tokens_module.mediaQueryXxxLarge),
-};
-const stickyTopValues = {
-  none: 0,
-  "with-links": parseFloat(tokens_module.sizeNavigation) * 16,
-  "without-links": parseFloat(tokens_module.sizeHeader) * 16,
-};
-let DuetTable = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Tracks whether the breakpoint is matched. This is set to true by default so that JavaScript disabled in SSR mode we get accessible table data first.
-     */
-    this.matchesBreakpoint = true;
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Style variation of the table.
-     */
-    this.variation = "striped";
-    /**
-     * Controls whether the table has a sticky header.
-     * Sticky headers are not compatible with breakpoint="none-scrollable".
-     */
-    this.sticky = false;
-    /**
-     * Adjust the distance from top of the viewport (in pixels) when the
-     * table header becomes sticky.
-     */
-    this.stickyDistance = "with-links";
-    /**
-     * By default the table is responsive - it will be flattened at narrow viewport widths.
-     * This prop controls the breakpoint at which the table should be rendered as a _regular_ table.
-     * Set to "none" to disable the responsive functionality.
-     * Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling -
-     * this is useful for comparison tables where it's important to maintain column and row layout.
-     */
-    this.breakpoint = "small";
-    this.handleMediaQueryChange = (mq) => {
-      this.matchesBreakpoint = mq.matches;
-    };
-  }
-  connectedCallback() {
-    this.mq = matchMedia(breakpointToToken[this.breakpoint]);
-    this.mq.addListener(this.handleMediaQueryChange);
-    this.handleMediaQueryChange(this.mq);
-    this.observer = new MutationObserver(() => this.copyHeadingsToCells());
-    this.observer.observe(this.element, {
-      childList: true,
-      subtree: true,
-    });
-  }
-  componentWillLoad() {
-    themeableComponent.inheritGlobalTheme(this);
-    this.copyHeadingsToCells();
-    if (this.sticky && this.breakpoint === "none-scrollable") {
-      console.warn(`[DUET WARNING]: sticky and breakpoint="none-scrollable" are incompatible. Scrollable takes precedence`);
-    }
-    if (this.sticky) {
-      const stickyTop = stickyTopValues[this.stickyDistance];
-      const headingElements = this.element.querySelectorAll("thead th");
-      headingElements.forEach(th => (th.style.top = `${stickyTop}px`));
-    }
-  }
-  componentDidLoad() {
-    // this clears all pending mutations,
-    // that way we avoid dealing with any initial changes
-    // and only get genuine mutations as rows are added/removed
-    this.observer.takeRecords();
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-    this.observer = null;
-    this.mq.removeListener(this.handleMediaQueryChange);
-    this.mq = null;
-    this.matchesBreakpoint = true;
-  }
-  copyHeadingsToCells() {
-    const headingElements = this.element.querySelectorAll("thead th");
-    const rowElements = this.element.querySelectorAll("tbody tr");
-    const headings = Array.from(headingElements).map(th => th.textContent.trim());
-    rowElements.forEach(tr => {
-      tr.querySelectorAll("td").forEach((td, i) => {
-        if (headings[i]) {
-          td.dataset.heading = headings[i];
-        }
-      });
-    });
-  }
-  render() {
-    return (index.h(index.Host, { class: {
-        [`duet-table-${this.variation}`]: true,
-        "duet-table-flattened": !this.matchesBreakpoint,
-        // sticky only valid when in regular table layout
-        "duet-table-sticky": this.matchesBreakpoint && this.sticky,
-        "duet-table-scrollable": this.breakpoint === "none-scrollable",
-        "duet-m-0": this.margin === "none",
-        "duet-theme-turva": this.theme === "turva",
-      } }, index.h("slot", null)));
-  }
-  get element() { return index.getElement(this); }
-};
-DuetTable.style = duetTableCss;
-
-exports.duet_table = DuetTable;