@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/table-row/table-row.js

@@ -1,723 +1,50 @@
-import { css as m, html as o } from "lit";
-import { property as a } from "lit/decorators.js";
-import { Cre8Element as c } from "../cre8-element.js";
-import "../button/button.js";
-import "../table-cell/table-cell.js";
-const g = m`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import svgCaretUp from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './table-row.styles.js';
+import '../button/button';
+import '../table-cell/table-cell';
+/**
+ * @slot - The component content
  */
-/*
-=======
-Animations
-=======
-*/
-:host {
-  --cre8-z-index-1: 1;
-  --cre8-z-index-50: 50;
-  --cre8-z-index-100: 100;
-  --cre8-z-index-200: 200;
-  --cre8-z-index-1030: 1030;
-  --cre8-anim-fade-quick: 0.35s;
-  --cre8-anim-ease: ease;
-}
-
-@keyframes fadeIn {
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes slideIn {
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes slideInFwd {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideOutRight {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideUp {
-  100% {
-    transform: translateY(0);
-  }
-}
-@media (width >= 481px) {
-  @keyframes slideInFwd {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
+export class Cre8TableRow extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Expanded button text
+         */
+        this.expandedButtonText = 'Collapse Table Row';
+        /**
+         * Expand button text
+         */
+        this.collapsedButtonText = 'Expand Table Row';
     }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
-    }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
+    toggleIsExpanded() {
+        this.isExpanded = !this.isExpanded;
+        if (this.classList.contains('cre8-is-expanded')) {
+            this.classList.remove('cre8-is-expanded');
+        }
+        else {
+            this.classList.add('cre8-is-expanded');
+        }
     }
-  }
-}
-span.ripple {
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  animation: ripple 600ms linear;
-  background-color: var(--ripple-bg-color);
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 1;
-  }
-}
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*------------------------------------*\\
-#TABLE ROW
-\\*------------------------------------*/
-/**
-* Set the host to display the contents within the table header or table body wrapper
-*/
-:host {
-  display: contents;
-}
-
-/**
-* 1) Row of the cre8 table
-*/
-.cre8-c-table__row {
-  display: var(--cre8-table-row-display, table-row);
-  border-bottom: var(--cre8-table-row-border-bottom);
-  /**
-  * Table row hover state
-  * 1) Set the row hover background via custom property to allow
-  * the table variant to control the color
-  */
-}
-.cre8-c-table__row:hover {
-  background: var(--cre8-table-row-hover-background);
-}
-.cre8-c-table__row {
-  /**
-  * Table row within odd cre8-table-row wrappers
-  * 1) Set the odd row and odd row hover background via
-  * custom property to allow the table variant to control the color
-  */
-}
-:host(:nth-child(odd)) .cre8-c-table__row {
-  background: var(--cre8-table-row-odd-background, none);
-}
-:host(:nth-child(odd)) .cre8-c-table__row:hover {
-  background: var(--cre8-table-row-odd-hover-background, inherit);
-}
-@media all and (min-width: 768px) {
-  .cre8-c-table__row {
-    border-bottom: inherit;
-    display: table-row;
-  }
-}
-
-/**
- * Bare variant to remove border
- */
-.cre8-c-table__row--bare {
-  --cre8-table-cell-border-bottom-color: transparent;
-}
-
-/**
-* Slotted table row in expanded content following expandable table row
-* 1) Don't show the collapsed table row by default
-*/
-.cre8-c-table__row--expandable + ::slotted(cre8-table-row) {
-  display: none; /* 1 */
-}
-
-.cre8-c-table__row--expandable.cre8-is-expanded {
-  --cre8-table-cell-border-bottom-color: transparent;
-}
-
-/**
-* Slotted table row in expanded content following expanded table row class
-* 1) Display contents to get the proper table-row display for the row
-*/
-.cre8-c-table__row--expandable.cre8-is-expanded + ::slotted(cre8-table-row) {
-  display: contents; /* 1 */
-}
-
-/**
-* Button that expands the next table row
-*/
-.cre8-c-table__expand-button {
-  background-color: var(--cre8-color-bg-transparent);
-  border-width: var(--cre8-border-width-none);
-}
-
-/**
-* Text within the button that expands the next table row
-*/
-.cre8-c-table__expand-button-text {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-/**
-* Icon within the button that expands the next table row
-*/
-.cre8-c-table__expand-button-icon {
-  display: block;
-  transition: transform 0.2s ease;
-  /**
-  * Icon within the button that expands the next table row when the table row is expanded
-  * 1) Rotate the icon to show that it's open
-  */
-}
-.cre8-is-expanded .cre8-c-table__expand-button-icon {
-  transform: rotate(90deg); /* 1 */
-}`;
-var h = Object.defineProperty, r = (l, i, s, b) => {
-  for (var e = void 0, n = l.length - 1, p; n >= 0; n--)
-    (p = l[n]) && (e = p(i, s, e) || e);
-  return e && h(i, s, e), e;
-};
-const u = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.7867 12.1506C15.7192 12.2183 15.639 12.2719 15.5507 12.3085C15.4624 12.3451 15.3678 12.3639 15.2722 12.3639C15.1766 12.3639 15.082 12.3451 14.9937 12.3085C14.9054 12.2719 14.8252 12.2183 14.7577 12.1506L7.99992 5.39197L1.24215 12.1506C1.10569 12.2871 0.920613 12.3638 0.727633 12.3638C0.534652 12.3638 0.349576 12.2871 0.213119 12.1506C0.076661 12.0142 3.8041e-09 11.8291 0 11.6361C-3.8041e-09 11.4432 0.076661 11.2581 0.213119 11.1216L7.4854 3.84933C7.55294 3.78172 7.63315 3.72808 7.72143 3.69148C7.80972 3.65488 7.90435 3.63605 7.99992 3.63605C8.09548 3.63605 8.19012 3.65488 8.2784 3.69148C8.36668 3.72808 8.44689 3.78172 8.51443 3.84933L15.7867 11.1216C15.8543 11.1892 15.908 11.2694 15.9446 11.3576C15.9812 11.4459 16 11.5406 16 11.6361C16 11.7317 15.9812 11.8263 15.9446 11.9146C15.908 12.0029 15.8543 12.0831 15.7867 12.1506Z"/>
-</svg>
-`, d = class d extends c {
-  constructor() {
-    super(...arguments), this.expandedButtonText = "Collapse Table Row", this.collapsedButtonText = "Expand Table Row";
-  }
-  toggleIsExpanded() {
-    this.isExpanded = !this.isExpanded, this.classList.contains("cre8-is-expanded") ? this.classList.remove("cre8-is-expanded") : this.classList.add("cre8-is-expanded");
-  }
-  render() {
-    const i = this.componentClassNames("cre8-c-table__row", {
-      "cre8-c-table__row--expandable": this.isExpandable,
-      "cre8-c-table__row--bare": this.variant === "bare",
-      "cre8-is-expanded": this.isExpanded
-    });
-    return o`
-      <tr role="row" class="${i}">
-        ${this.isExpandable ? o`<cre8-table-cell>
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-table__row', {
+            'cre8-c-table__row--expandable': this.isExpandable,
+            'cre8-c-table__row--bare': this.variant === 'bare',
+            'cre8-is-expanded': this.isExpanded,
+        });
+        return html `
+      <tr role="row" class="${componentClassNames}">
+        ${this.isExpandable
+            ? html `<cre8-table-cell>
               <button
                 class="cre8-c-table__expand-button" 
                 aria-expanded=${!!this.isExpanded}
@@ -726,34 +53,36 @@ const u = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" x
                 <span class="cre8-c-table__expand-button-text">
                   ${this.isExpanded ? this.expandedButtonText : this.collapsedButtonText}
                 </span>
-                <cre8-icon svg='${u}' rotate="90" class="cre8-c-table__expand-button-icon"></cre8-icon>
+                <cre8-icon svg='${svgCaretUp}' rotate="90" class="cre8-c-table__expand-button-icon"></cre8-icon>
               </button>
-            </cre8-table-cell>` : ""}
-        ${o`<slot></slot>`}
+            </cre8-table-cell>`
+            : ''}
+        ${html `<slot></slot>`}
       </tr>
-      ${this.isExpandable ? o` <slot class="cre8-c-table__expandable-content" name="expandableContent"><slot></slot></slot>` : ""}
+      ${this.isExpandable
+            ? html ` <slot class="cre8-c-table__expandable-content" name="expandableContent"><slot></slot></slot>`
+            : ''}
     `;
-  }
-};
-d.styles = [g];
-let t = d;
-r([
-  a({ type: Boolean, reflect: !0 })
-], t.prototype, "isExpanded");
-r([
-  a({ type: Boolean, reflect: !0 })
-], t.prototype, "isExpandable");
-r([
-  a()
-], t.prototype, "variant");
-r([
-  a()
-], t.prototype, "expandedButtonText");
-r([
-  a()
-], t.prototype, "collapsedButtonText");
-customElements.get("cre8-table-row") === void 0 && customElements.define("cre8-table-row", t);
-export {
-  t as Cre8TableRow,
-  t as default
-};
+    }
+}
+Cre8TableRow.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8TableRow.prototype, "isExpanded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8TableRow.prototype, "isExpandable", void 0);
+__decorate([
+    property()
+], Cre8TableRow.prototype, "variant", void 0);
+__decorate([
+    property()
+], Cre8TableRow.prototype, "expandedButtonText", void 0);
+__decorate([
+    property()
+], Cre8TableRow.prototype, "collapsedButtonText", void 0);
+if (customElements.get('cre8-table-row') === undefined) {
+    customElements.define('cre8-table-row', Cre8TableRow);
+}
+export default Cre8TableRow;
+//# sourceMappingURL=table-row.js.map