@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/remove-tag/remove-tag.js

@@ -1,39 +1,71 @@
-import n from "classnames";
-import { css as m, html as g } from "lit";
-import { property as o } from "lit/decorators.js";
-import { c as h } from "../../icon-D22g8aWB.js";
-import { Cre8Element as p } from "../cre8-element.js";
-const v = m`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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))}}}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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-remove-tag{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:flex;align-items:center;align-content:center;appearance:none;white-space:nowrap;padding-left:var(--cre8-spacing-16);padding-right:var(--cre8-spacing-16);padding-top:var(--cre8-spacing-4);padding-bottom:var(--cre8-spacing-4);gap:var(--cre8-spacing-8);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);cursor:pointer}.cre8-c-remove-tag:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-remove-tag.cre8-c-remove-tag--neutral{background-color:var(--cre8-color-bg-default);color:var(--cre8-color-content-default);border-color:var(--cre8-color-border-strong)}.cre8-c-remove-tag.cre8-c-remove-tag--neutral:hover,.cre8-c-remove-tag.cre8-c-remove-tag--neutral:focus{background-color:var(--cre8-color-bg-default-hover)}.cre8-c-remove-tag.cre8-c-remove-tag--branded{background-color:var(--cre8-color-bg-brand);color:var(--cre8-color-content-default);border-color:var(--cre8-color-border-transparent)}.cre8-c-remove-tag.cre8-c-remove-tag--branded:hover,.cre8-c-remove-tag.cre8-c-remove-tag--branded:focus{background-color:var(--cre8-color-bg-brand-hover)}.cre8-c-remove-tag.cre8-c-remove-tag--neutral-hybrid{background-color:var(--cre8-color-bg-default);color:var(--cre8-color-content-brand);border-color:var(--cre8-color-border-strong)}.cre8-c-remove-tag.cre8-c-remove-tag--neutral-hybrid:hover,.cre8-c-remove-tag.cre8-c-remove-tag--neutral-hybrid:focus{background-color:var(--cre8-color-bg-default-hover)}.cre8-c-remove-tag.cre8-c-remove-tag--round{border-radius:var(--cre8-border-radius-round)}.cre8-c-remove-tag.cre8-c-remove-tag--square{border-radius:var(--cre8-border-radius-small)}.cre8-c-remove-tag:disabled{background-color:var(--cre8-color-bg-disabled);color:var(--cre8-color-content-disabled);border-color:var(--cre8-color-border-disabled);cursor:not-allowed}.cre8-c-remove-tag:disabled:hover,.cre8-c-remove-tag:disabled:focus{background-color:var(--cre8-color-bg-disabled)}.cre8-c-remove-tag-item__icon{align-items:center;width:1rem;height:1rem}`;
-var u = Object.defineProperty, c = (e, t, l, y) => {
-  for (var a = void 0, i = e.length - 1, s; i >= 0; i--)
-    (s = e[i]) && (a = s(t, l, a) || a);
-  return a && u(t, l, a), a;
-}, b = /* @__PURE__ */ ((e) => (e.Round = "round", e.Square = "square", e))(b || {}), f = /* @__PURE__ */ ((e) => (e.Neutral = "neutral", e.Branded = "branded", e.NeutralHybrid = "neutral-hybrid", e))(f || {});
-const d = class d extends p {
-  constructor() {
-    super(...arguments), this.color = "neutral", this.shape = "round";
-  }
-  /**
-   * Dispatches an event when the tag is clicked
-   */
-  _handleRemoveTagClicked() {
-    const t = new CustomEvent("removeTagClicked", {
-      detail: { message: "Remove Tag clicked." },
-      bubbles: !0,
-      composed: !0
-    });
-    this.dispatchEvent(t);
-  }
-  render() {
-    const t = n("cre8-c-remove-tag", {
-      "cre8-c-remove-tag--neutral": this.color === "neutral",
-      "cre8-c-remove-tag--branded": this.color === "branded",
-      "cre8-c-remove-tag--neutral-hybrid": this.color === "neutral-hybrid",
-      "cre8-c-remove-tag--round": this.shape === "round",
-      "cre8-c-remove-tag--square": this.shape === "square"
-    });
-    return g` <button
-      class="${t}"
+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 svgClose from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Close.svg?raw';
+import { Cre8Element } from '../cre8-element';
+import '../icon/icon';
+import styles from './remove-tag.styles.js';
+export var Shape;
+(function (Shape) {
+    Shape["Round"] = "round";
+    Shape["Square"] = "square";
+})(Shape || (Shape = {}));
+export var Color;
+(function (Color) {
+    Color["Neutral"] = "neutral";
+    Color["Branded"] = "branded";
+    Color["NeutralHybrid"] = "neutral-hybrid";
+})(Color || (Color = {}));
+/**
+ * Clicking a Remove Tag causes it to disappear from the page or field (in the case of Multi-Select).
+ * These tags always display a "Close" icon.
+ */
+export class Cre8RemoveTag extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * The tag color scheme
+         *
+         *  - **neutral** should be used when doing non-link actions such as filters or multi-select, within forms, etc.
+         *  - **neutral-hybrid** should be used for when tags are doing an action like a button or a link
+         *  - **branded** should be used like Neutral, but for marketing / actionable items
+         */
+        this.color = Color.Neutral;
+        /**
+         * The tag shape
+         *
+         * - **round** will give the tag a rounded border
+         * - **square** will give the tag a squared border
+         */
+        this.shape = Shape.Round;
+    }
+    /**
+     * Dispatches an event when the tag is clicked
+     */
+    _handleRemoveTagClicked() {
+        const customEvent = new CustomEvent('removeTagClicked', {
+            detail: { message: 'Remove Tag clicked.' },
+            bubbles: true,
+            composed: true,
+        });
+        this.dispatchEvent(customEvent);
+    }
+    render() {
+        const componentClassName = classnames('cre8-c-remove-tag', {
+            'cre8-c-remove-tag--neutral': this.color === 'neutral',
+            'cre8-c-remove-tag--branded': this.color === 'branded',
+            'cre8-c-remove-tag--neutral-hybrid': this.color === 'neutral-hybrid',
+            'cre8-c-remove-tag--round': this.shape === 'round',
+            'cre8-c-remove-tag--square': this.shape === 'square',
+        });
+        return html ` <button
+      class="${componentClassName}"
       @click="${this._handleRemoveTagClicked}"
       ?disabled=${this.disabled}
     >
@@ -42,31 +74,28 @@ const d = class d extends p {
         <cre8-icon
           width="16"
           height="16"
-          svg="${h}"
+          svg="${svgClose}"
           aria-label="remove"
         ></cre8-icon>
       </div>
     </button>`;
-  }
-};
-d.styles = [v];
-let r = d;
-c([
-  o({ type: String })
-], r.prototype, "text");
-c([
-  o({ type: String })
-], r.prototype, "color");
-c([
-  o({ type: String })
-], r.prototype, "shape");
-c([
-  o({ type: Boolean })
-], r.prototype, "disabled");
-customElements.get("cre8-remove-tag") === void 0 && customElements.define("cre8-remove-tag", r);
-export {
-  f as Color,
-  r as Cre8RemoveTag,
-  b as Shape,
-  r as default
-};
+    }
+}
+Cre8RemoveTag.styles = [styles];
+__decorate([
+    property({ type: String })
+], Cre8RemoveTag.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], Cre8RemoveTag.prototype, "color", void 0);
+__decorate([
+    property({ type: String })
+], Cre8RemoveTag.prototype, "shape", void 0);
+__decorate([
+    property({ type: Boolean })
+], Cre8RemoveTag.prototype, "disabled", void 0);
+if (customElements.get('cre8-remove-tag') === undefined) {
+    customElements.define('cre8-remove-tag', Cre8RemoveTag);
+}
+export default Cre8RemoveTag;
+//# sourceMappingURL=remove-tag.js.map

package/lib/components/remove-tag/remove-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"remove-tag.js","sourceRoot":"","sources":["../../../components/remove-tag/remove-tag.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,QAAQ,MAAM,mGAAmG,CAAC;AACzH,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C,MAAM,CAAN,IAAY,KAGX;AAHD,WAAY,KAAK;IACf,wBAAe,CAAA;IACf,0BAAiB,CAAA;AACnB,CAAC,EAHW,KAAK,KAAL,KAAK,QAGhB;AAED,MAAM,CAAN,IAAY,KAIX;AAJD,WAAY,KAAK;IACf,4BAAmB,CAAA;IACnB,4BAAmB,CAAA;IACnB,yCAAgC,CAAA;AAClC,CAAC,EAJW,KAAK,KAAL,KAAK,QAIhB;AAED;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAA9C;;QASE;;;;;;WAMG;QAEC,UAAK,GAAwD,KAAK,CAAC,OAAO,CAAC;QAE/E;;;;;WAKG;QAEC,UAAK,GAA+B,KAAK,CAAC,KAAK,CAAC;IA6CtD,CAAC;IArCC;;OAEG;IACK,uBAAuB;QAC3B,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,kBAAkB,EAAE;YACpD,MAAM,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;YAC1C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACF,MAAM,kBAAkB,GAAG,UAAU,CAAC,mBAAmB,EAAE;YACvD,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACtD,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACtD,mCAAmC,EAAE,IAAI,CAAC,KAAK,KAAK,gBAAgB;YACpE,0BAA0B,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;YAClD,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;SACvD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;eACF,kBAAkB;gBACjB,IAAI,CAAC,uBAAuB;kBAC1B,IAAI,CAAC,QAAQ;;cAEjB,IAAI,CAAC,IAAI;;;;;iBAKN,QAAQ;;;;cAIX,CAAC;IACb,CAAC;;AArEQ,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACT;AAUd;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACoD;AAS3E;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACyB;AAMhD;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACL;AAyCzB,IAAI,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,SAAS,EAAE,CAAC;IACtD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,aAAa,CAAC","sourcesContent":["import classnames from 'classnames';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport svgClose from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Close.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport styles from './remove-tag.styles.js';\n\nexport enum Shape {\n  Round = 'round',\n  Square = 'square',\n}\n\nexport enum Color {\n  Neutral = 'neutral',\n  Branded = 'branded',\n  NeutralHybrid = 'neutral-hybrid',\n}\n\n/**\n * Clicking a Remove Tag causes it to disappear from the page or field (in the case of Multi-Select).\n * These tags always display a \"Close\" icon.\n */\nexport class Cre8RemoveTag extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The tag text\n   */\n  @property({ type: String })\n      text?: string;\n\n  /**\n   * The tag color scheme\n   *\n   *  - **neutral** should be used when doing non-link actions such as filters or multi-select, within forms, etc.\n   *  - **neutral-hybrid** should be used for when tags are doing an action like a button or a link\n   *  - **branded** should be used like Neutral, but for marketing / actionable items\n   */\n  @property({ type: String })\n      color: Color.Neutral | Color.Branded | Color.NeutralHybrid = Color.Neutral;\n\n  /**\n   * The tag shape\n   *\n   * - **round** will give the tag a rounded border\n   * - **square** will give the tag a squared border\n   */\n  @property({ type: String })\n      shape: Shape.Round | Shape.Square = Shape.Round;\n\n  /**\n   * Disabled state for remove tag\n   */\n  @property({ type: Boolean })\n      disabled?: boolean;\n\n  /**\n   * Dispatches an event when the tag is clicked\n   */\n  private _handleRemoveTagClicked() {\n      const customEvent = new CustomEvent('removeTagClicked', {\n          detail: { message: 'Remove Tag clicked.' },\n          bubbles: true,\n          composed: true,\n      });\n      this.dispatchEvent(customEvent);\n  }\n\n  render() {\n      const componentClassName = classnames('cre8-c-remove-tag', {\n          'cre8-c-remove-tag--neutral': this.color === 'neutral',\n          'cre8-c-remove-tag--branded': this.color === 'branded',\n          'cre8-c-remove-tag--neutral-hybrid': this.color === 'neutral-hybrid',\n          'cre8-c-remove-tag--round': this.shape === 'round',\n          'cre8-c-remove-tag--square': this.shape === 'square',\n      });\n\n      return html` <button\n      class=\"${componentClassName}\"\n      @click=\"${this._handleRemoveTagClicked}\"\n      ?disabled=${this.disabled}\n    >\n      <span>${this.text}</span>\n      <div class=\"cre8-c-remove-tag-item__icon\">\n        <cre8-icon\n          width=\"16\"\n          height=\"16\"\n          svg=\"${svgClose}\"\n          aria-label=\"remove\"\n        ></cre8-icon>\n      </div>\n    </button>`;\n  }\n}\n\nif (customElements.get('cre8-remove-tag') === undefined) {\n    customElements.define('cre8-remove-tag', Cre8RemoveTag);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-remove-tag': Cre8RemoveTag;\n  }\n}\n\nexport default Cre8RemoveTag;\n"]}

package/lib/components/remove-tag/remove-tag.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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))}}}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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-remove-tag{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:flex;align-items:center;align-content:center;appearance:none;white-space:nowrap;padding-left:var(--cre8-spacing-16);padding-right:var(--cre8-spacing-16);padding-top:var(--cre8-spacing-4);padding-bottom:var(--cre8-spacing-4);gap:var(--cre8-spacing-8);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);cursor:pointer}.cre8-c-remove-tag:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-remove-tag.cre8-c-remove-tag--neutral{background-color:var(--cre8-color-bg-default);color:var(--cre8-color-content-default);border-color:var(--cre8-color-border-strong)}.cre8-c-remove-tag.cre8-c-remove-tag--neutral:hover,.cre8-c-remove-tag.cre8-c-remove-tag--neutral:focus{background-color:var(--cre8-color-bg-default-hover)}.cre8-c-remove-tag.cre8-c-remove-tag--branded{background-color:var(--cre8-color-bg-brand);color:var(--cre8-color-content-default);border-color:var(--cre8-color-border-transparent)}.cre8-c-remove-tag.cre8-c-remove-tag--branded:hover,.cre8-c-remove-tag.cre8-c-remove-tag--branded:focus{background-color:var(--cre8-color-bg-brand-hover)}.cre8-c-remove-tag.cre8-c-remove-tag--neutral-hybrid{background-color:var(--cre8-color-bg-default);color:var(--cre8-color-content-brand);border-color:var(--cre8-color-border-strong)}.cre8-c-remove-tag.cre8-c-remove-tag--neutral-hybrid:hover,.cre8-c-remove-tag.cre8-c-remove-tag--neutral-hybrid:focus{background-color:var(--cre8-color-bg-default-hover)}.cre8-c-remove-tag.cre8-c-remove-tag--round{border-radius:var(--cre8-border-radius-round)}.cre8-c-remove-tag.cre8-c-remove-tag--square{border-radius:var(--cre8-border-radius-small)}.cre8-c-remove-tag:disabled{background-color:var(--cre8-color-bg-disabled);color:var(--cre8-color-content-disabled);border-color:var(--cre8-color-border-disabled);cursor:not-allowed}.cre8-c-remove-tag:disabled:hover,.cre8-c-remove-tag:disabled:focus{background-color:var(--cre8-color-bg-disabled)}.cre8-c-remove-tag-item__icon{align-items:center;width:1rem;height:1rem}`;
+export default styles;
+//# sourceMappingURL=remove-tag.styles.js.map

package/lib/components/remove-tag/remove-tag.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"remove-tag.styles.js","sourceRoot":"","sources":["../../../components/remove-tag/remove-tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,qqIAAqqI,CAAC;AACxrI,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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))}}}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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-remove-tag{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:flex;align-items:center;align-content:center;appearance:none;white-space:nowrap;padding-left:var(--cre8-spacing-16);padding-right:var(--cre8-spacing-16);padding-top:var(--cre8-spacing-4);padding-bottom:var(--cre8-spacing-4);gap:var(--cre8-spacing-8);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);cursor:pointer}.cre8-c-remove-tag:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-remove-tag.cre8-c-remove-tag--neutral{background-color:var(--cre8-color-bg-default);color:var(--cre8-color-content-default);border-color:var(--cre8-color-border-strong)}.cre8-c-remove-tag.cre8-c-remove-tag--neutral:hover,.cre8-c-remove-tag.cre8-c-remove-tag--neutral:focus{background-color:var(--cre8-color-bg-default-hover)}.cre8-c-remove-tag.cre8-c-remove-tag--branded{background-color:var(--cre8-color-bg-brand);color:var(--cre8-color-content-default);border-color:var(--cre8-color-border-transparent)}.cre8-c-remove-tag.cre8-c-remove-tag--branded:hover,.cre8-c-remove-tag.cre8-c-remove-tag--branded:focus{background-color:var(--cre8-color-bg-brand-hover)}.cre8-c-remove-tag.cre8-c-remove-tag--neutral-hybrid{background-color:var(--cre8-color-bg-default);color:var(--cre8-color-content-brand);border-color:var(--cre8-color-border-strong)}.cre8-c-remove-tag.cre8-c-remove-tag--neutral-hybrid:hover,.cre8-c-remove-tag.cre8-c-remove-tag--neutral-hybrid:focus{background-color:var(--cre8-color-bg-default-hover)}.cre8-c-remove-tag.cre8-c-remove-tag--round{border-radius:var(--cre8-border-radius-round)}.cre8-c-remove-tag.cre8-c-remove-tag--square{border-radius:var(--cre8-border-radius-small)}.cre8-c-remove-tag:disabled{background-color:var(--cre8-color-bg-disabled);color:var(--cre8-color-content-disabled);border-color:var(--cre8-color-border-disabled);cursor:not-allowed}.cre8-c-remove-tag:disabled:hover,.cre8-c-remove-tag:disabled:focus{background-color:var(--cre8-color-bg-disabled)}.cre8-c-remove-tag-item__icon{align-items:center;width:1rem;height:1rem}`;\nexport default styles;\n"]}

package/lib/components/section/section.js

@@ -1,21 +1,41 @@
-import { css as l, html as s } from "lit";
-import { property as h } from "lit/decorators.js";
-import { Cre8Element as c } from "../cre8-element.js";
-const m = l`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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))}}}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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}#SECTION .cre8-c-section{margin-bottom:2rem;display:block}.cre8-c-section-header{display:flex;justify-content:space-between}.cre8-c-section__body{padding-top:1rem}@media all and (min-width: 960px){.cre8-c-section__body{padding-top:2rem}}`;
-var p = Object.defineProperty, f = (d, t, n, x) => {
-  for (var e = void 0, i = d.length - 1, o; i >= 0; i--)
-    (o = d[i]) && (e = o(t, n, e) || e);
-  return e && p(t, n, e), e;
+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;
 };
-const a = class a extends c {
-  render() {
-    const t = this.componentClassNames("cre8-c-section", {});
-    return s`
-      <section class="${t}">
-        ${this.headline ? s`<header class="cre8-c-section__header">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './section.styles.js';
+/**
+ * The section component acts as a block level HTML element that takes a 'headline' property
+ * that renders the section's heading which wraps around any HTML template
+ * that is found under this heading in the page layout.
+ *
+ * # How to Use
+ * 1. Use the headline attribute to create the section header, or if you need a more custom header
+ *    there is a slot="header" that you can target for inserting a custom template.
+ * 2. For the main body contents, any html template can be placed inside the cre8-section component
+ *    and will automatically render below the header.
+ *
+ * Note: for a section with a dark background please control this with the internal Components' inverted attributes.
+ *
+ *
+ * @slot The content of the section should go here.
+ * It could be a cre8-text-passage, a cre8-card or any other block level html.
+ */
+export class Cre8Section extends Cre8Element {
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-section', {});
+        return html `
+      <section class="${componentClassName}">
+        ${this.headline
+            ? html `<header class="cre8-c-section__header">
               <cre8-heading tagVariant="h2">${this.headline}</cre8-heading>
               <slot name="header"></slot>
-            </header>` : s`<header class="cre8-c-section__header">
+            </header>`
+            : html `<header class="cre8-c-section__header">
               <slot name="header"></slot>
             </header>`}
         <div class="cre8-c-section__body">
@@ -23,15 +43,14 @@ const a = class a extends c {
         </div>
       </section>
     `;
-  }
-};
-a.styles = [m];
-let r = a;
-f([
-  h()
-], r.prototype, "headline");
-customElements.get("cre8-section") === void 0 && customElements.define("cre8-section", r);
-export {
-  r as Cre8Section,
-  r as default
-};
+    }
+}
+Cre8Section.styles = [styles];
+__decorate([
+    property()
+], Cre8Section.prototype, "headline", void 0);
+if (customElements.get('cre8-section') === undefined) {
+    customElements.define('cre8-section', Cre8Section);
+}
+export default Cre8Section;
+//# sourceMappingURL=section.js.map

package/lib/components/section/section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.js","sourceRoot":"","sources":["../../../components/section/section.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAU1C,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;QAE1E,OAAO,IAAI,CAAA;wBACO,kBAAkB;UAChC,IAAI,CAAC,QAAQ;YACf,CAAC,CAAC,IAAI,CAAA;8CACgC,IAAI,CAAC,QAAQ;;sBAErC;YACd,CAAC,CAAC,IAAI,CAAA;;sBAEQ;;;;;KAKjB,CAAC;IACJ,CAAC;;AA3BQ,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOvB;IADH,QAAQ,EAAE;6CACW;AAuBxB,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AACvD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './section.styles.js';\n/**\n * The section component acts as a block level HTML element that takes a 'headline' property\n * that renders the section's heading which wraps around any HTML template\n * that is found under this heading in the page layout.\n *\n * # How to Use\n * 1. Use the headline attribute to create the section header, or if you need a more custom header\n *    there is a slot=\"header\" that you can target for inserting a custom template.\n * 2. For the main body contents, any html template can be placed inside the cre8-section component\n *    and will automatically render below the header.\n *\n * Note: for a section with a dark background please control this with the internal Components' inverted attributes.\n *\n *\n * @slot The content of the section should go here.\n * It could be a cre8-text-passage, a cre8-card or any other block level html.\n */\n\nexport class Cre8Section extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The Headline will be rendered as the Section Headline with the correct brand styling applied\n   */\n\n  @property()\n      headline?: string;\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-section', {});\n\n      return html`\n      <section class=\"${componentClassName}\">\n        ${this.headline\n        ? html`<header class=\"cre8-c-section__header\">\n              <cre8-heading tagVariant=\"h2\">${this.headline}</cre8-heading>\n              <slot name=\"header\"></slot>\n            </header>`\n        : html`<header class=\"cre8-c-section__header\">\n              <slot name=\"header\"></slot>\n            </header>`}\n        <div class=\"cre8-c-section__body\">\n          <slot></slot>\n        </div>\n      </section>\n    `;\n  }\n}\n\nif (customElements.get('cre8-section') === undefined) {\n    customElements.define('cre8-section', Cre8Section);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-section': Cre8Section;\n  }\n}\n\nexport default Cre8Section;\n"]}

package/lib/components/section/section.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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))}}}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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}#SECTION .cre8-c-section{margin-bottom:2rem;display:block}.cre8-c-section-header{display:flex;justify-content:space-between}.cre8-c-section__body{padding-top:1rem}@media all and (min-width: 960px){.cre8-c-section__body{padding-top:2rem}}`;
+export default styles;
+//# sourceMappingURL=section.styles.js.map

package/lib/components/section/section.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.styles.js","sourceRoot":"","sources":["../../../components/section/section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,u/DAAu/D,CAAC;AAC1gE,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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))}}}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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}#SECTION .cre8-c-section{margin-bottom:2rem;display:block}.cre8-c-section-header{display:flex;justify-content:space-between}.cre8-c-section__body{padding-top:1rem}@media all and (min-width: 960px){.cre8-c-section__body{padding-top:2rem}}`;\nexport default styles;\n"]}