@tmorrow/cre8-wc 1.2.4 → 1.2.5

package/lib/components/badge/badge.js

@@ -1,768 +1,76 @@
-import s from "classnames";
-import { css as m, html as l } from "lit";
-import { property as a } from "lit/decorators.js";
-import { Cre8Element as p } from "../cre8-element.js";
-import "../icon/icon.js";
-const h = 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
- */
-/*
-=======
-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));
-    }
-  }
-}
-@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));
+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 classnames from 'classnames';
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import '../icon/icon';
+import styles from './badge.styles.js';
+export var status;
+(function (status) {
+    status[status["error"] = 0] = "error";
+    status[status["warning"] = 1] = "warning";
+    status[status["success"] = 2] = "success";
+    status[status["info"] = 3] = "info";
+    status[status["attention"] = 4] = "attention";
+    status[status["undefined"] = 5] = "undefined";
+})(status || (status = {}));
+export var variant;
+(function (variant) {
+    variant[variant["light"] = 0] = "light";
+    variant[variant["white"] = 1] = "white";
+    variant[variant["undefined"] = 2] = "undefined";
+})(variant || (variant = {}));
+/**
+ * Status badges are used most often in tables or fat rows in a list.
+ * These Components serve a contextual purpose and don't provide any functionality.
+ * Badges should be organized inside a dedicated table row communicating status such as pending, approved or rejected.
+ *
+ */
+export class Cre8Badge extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * The badge text
+         */
+        this.text = undefined;
     }
-  }
-}
-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
- */
-:host {
-  display: inline-flex;
-}
-
-/**
- * 1) Badges are blocks of color with text inside used for messaging
- */
-.cre8-c-badge {
-  font-family: var(--cre8-typography-label-small-font-family);
-  font-size: var(--cre8-typography-label-small-font-size);
-  font-weight: var(--cre8-typography-label-small-font-weight);
-  line-height: var(--cre8-typography-label-small-line-height);
-  text-decoration: var(--cre8-typography-label-small-text-decoration);
-  text-transform: var(--cre8-typography-label-small-text-transform);
-  display: inline-flex;
-  border-radius: var(--cre8-border-radius-badge);
-  padding: var(--cre8-badge-padding-vertical) var(--cre8-badge-padding-horizontal);
-  color: var(--cre8-color-content-knockout);
-  background-color: var(--cre8-color-bg-strong);
-  align-items: center;
-}
-
-/**
- * Success badge
- */
-.cre8-c-badge--success {
-  background-color: var(--cre8-color-bg-success-strong);
-}
-
-/**
- * Warning badge
- */
-.cre8-c-badge--warning {
-  background-color: var(--cre8-color-bg-warning-strong);
-  color: var(--cre8-color-content-default);
-}
-
-/**
-* Creating space between icon and text
-*/
-cre8-icon {
-  height: var(--cre8-icon-height, 1rem);
-  margin-right: 0.25rem;
-}
-
-/**
- * Error badge
- */
-.cre8-c-badge--error {
-  background-color: var(--cre8-color-bg-error-strong);
-}
-
-/**
- * Info badge
- */
-.cre8-c-badge--info {
-  background-color: var(--cre8-color-bg-info-strong);
-}
-
-/**
- * Attention badge
- */
-.cre8-c-badge--attention {
-  background-color: var(--cre8-color-bg-attention-strong);
-}
-
-/**
- * Light neutral (default) badge
- */
-.cre8-c-badge--light {
-  background-color: var(--cre8-color-bg-subtle);
-  color: var(--cre8-color-content-default);
-}
-
-/**
- * Light Success badge
- */
-.cre8-c-badge--light.cre8-c-badge--success {
-  background-color: var(--cre8-color-bg-success);
-  color: var(--cre8-color-content-success);
-}
-
-/**
- * Light Warning badge
- */
-.cre8-c-badge--light.cre8-c-badge--warning {
-  background-color: var(--cre8-color-bg-warning);
-}
-
-/**
- * Light Error badge
- */
-.cre8-c-badge--light.cre8-c-badge--error {
-  background-color: var(--cre8-color-bg-error);
-  color: var(--cre8-color-content-error);
-}
-
-/**
- * Light Info badge
- */
-.cre8-c-badge--light.cre8-c-badge--info {
-  background-color: var(--cre8-color-bg-info);
-}
-
-/**
- * Light Attention badge
- */
-.cre8-c-badge--light.cre8-c-badge--attention {
-  background-color: var(--cre8-color-bg-attention);
-}
-
-/**
- * White neutral (default) badge
- */
-.cre8-c-badge--white {
-  background-color: var(--cre8-color-bg-default);
-  color: var(--cre8-color-content-default);
-}
-
-/**
- * White Success badge
- */
-.cre8-c-badge--white.cre8-c-badge--success {
-  color: var(--cre8-color-content-success);
-}
-
-/**
- * White Error badge
- */
-.cre8-c-badge--white.cre8-c-badge--error {
-  background-color: none;
-  color: var(--cre8-color-content-error);
-}`;
-var u = Object.defineProperty, o = (e, i, c, x) => {
-  for (var t = void 0, n = e.length - 1, g; n >= 0; n--)
-    (g = e[n]) && (t = g(i, c, t) || t);
-  return t && u(i, c, t), t;
-}, f = /* @__PURE__ */ ((e) => (e[e.error = 0] = "error", e[e.warning = 1] = "warning", e[e.success = 2] = "success", e[e.info = 3] = "info", e[e.attention = 4] = "attention", e[e.undefined = 5] = "undefined", e))(f || {}), b = /* @__PURE__ */ ((e) => (e[e.light = 0] = "light", e[e.white = 1] = "white", e[e.undefined = 2] = "undefined", e))(b || {});
-const d = class d extends p {
-  constructor() {
-    super(...arguments), this.text = void 0;
-  }
-  render() {
-    const i = s("cre8-c-badge", {
-      "cre8-c-badge--success": this.status === "success",
-      "cre8-c-badge--warning": this.status === "warning",
-      "cre8-c-badge--error": this.status === "error",
-      "cre8-c-badge--info": this.status === "info",
-      "cre8-c-badge--attention": this.status === "attention",
-      "cre8-c-badge--light": this.variant === "light",
-      "cre8-c-badge--white": this.variant === "white"
-    });
-    return l`<div class="${i}">
-        ${this.svg ? l` <cre8-icon 
+    render() {
+        const componentClassName = classnames('cre8-c-badge', {
+            'cre8-c-badge--success': this.status === 'success',
+            'cre8-c-badge--warning': this.status === 'warning',
+            'cre8-c-badge--error': this.status === 'error',
+            'cre8-c-badge--info': this.status === 'info',
+            'cre8-c-badge--attention': this.status === 'attention',
+            'cre8-c-badge--light': this.variant === 'light',
+            'cre8-c-badge--white': this.variant === 'white',
+        });
+        return html `<div class="${componentClassName}">
+        ${this.svg ? html ` <cre8-icon 
             svg='${this.svg}' aria-hidden='true'></cre8-icon>
-        </cre8-icon>` : ""} 
+        </cre8-icon>` : ''} 
         ${this.text} 
         </div> `;
-  }
-};
-d.styles = [h];
-let r = d;
-o([
-  a({ type: String })
-], r.prototype, "text");
-o([
-  a({ type: String })
-], r.prototype, "status");
-o([
-  a({ type: String })
-], r.prototype, "variant");
-o([
-  a({ type: String })
-], r.prototype, "svg");
-customElements.get("cre8-badge") === void 0 && customElements.define("cre8-badge", r);
-export {
-  r as Cre8Badge,
-  f as status,
-  b as variant
-};
+    }
+}
+Cre8Badge.styles = [styles];
+__decorate([
+    property({ type: String })
+], Cre8Badge.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], Cre8Badge.prototype, "status", void 0);
+__decorate([
+    property({ type: String })
+], Cre8Badge.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], Cre8Badge.prototype, "svg", void 0);
+if (customElements.get('cre8-badge') === undefined) {
+    customElements.define('cre8-badge', Cre8Badge);
+}
+//# sourceMappingURL=badge.js.map