@proximus/lavender-banner 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/index.js

@@ -0,0 +1,186 @@
+import { PxElement as c, backgroundSizeValues as d, gradientValues as l, backgroundColorValues as g } from "@proximus/lavender-common";
+const b = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8rem}.banner[reduced]{min-height:5rem}px-container{height:100%}.banner-content{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,auto);row-gap:var(--px-spacing-after-element-s-mobile);z-index:2;position:relative}[reduced] .banner-content{grid-template-columns:min-content minmax(0,1fr);column-gap:var(--px-spacing-after-element-default-mobile)}::slotted([slot="tag"]){grid-area:tag}::slotted([slot="media"]){grid-area:media;align-self:start}::slotted([slot="title"]){grid-area:title}::slotted([slot="description"]){grid-area:description}::slotted([slot="content"]){grid-area:content}:host(:not([reduced])) ::slotted([slot="action"]){grid-area:action;margin-top:calc(var(--px-spacing-after-element-default-mobile) - var(--px-spacing-after-element-s-mobile))}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none;border-radius:var(--px-radius-main)}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 768px){.banner-content{row-gap:var(--px-spacing-after-element-s-tablet)}[reduced] .banner-content{column-gap:var(--px-spacing-after-element-default-tablet)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-after-element-default-tablet) - var(--px-spacing-after-element-s-tablet))}}@media only screen and (min-width: 1025px){.banner-content{row-gap:var(--px-spacing-after-element-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-after-element-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-after-element-default-desktop) - var(--px-spacing-after-element-s-desktop))}}', s = new CSSStyleSheet();
+s.replaceSync(b);
+const o = class o extends c {
+  constructor() {
+    super(s), this.template = () => `<div class="banner">
+      <div class="contrast-helper"></div>
+      <px-container padding="${this.reduced ? "m" : "l"}" border-radius="main" >
+        <div class="banner-content">
+          <slot name="tag"></slot>
+          <slot name="media"></slot>
+          <slot name="title"></slot>
+          <slot name="description"></slot>
+          <slot name="content"></slot>
+          <slot name="action"></slot>
+        </div>
+      </px-container>
+    </div>`, this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [
+      "background-color",
+      "background-gradient",
+      "background-image",
+      "background-image--mobile",
+      "background-image--tablet",
+      "background-image--laptop",
+      "background-size",
+      "background-position",
+      "contrast-helper-gradient",
+      "contrast-helper-overlay",
+      "reduced",
+      "inverted"
+    ];
+  }
+  connectedCallback() {
+    var e;
+    (e = super.connectedCallback) == null || e.call(this), this.creategridTemplateAreas();
+  }
+  attributeChangedCallback(e, a, t) {
+    if (a !== t)
+      switch (e) {
+        case "background-color":
+          this.$container.backgroundColor = g.indexOf(t) > 0 ? t : "none";
+          break;
+        case "background-gradient":
+          this.$container.gradient = l.indexOf(t) > 0 ? t : "none";
+          break;
+        case "background-image":
+          this.$container.backgroundImage = t;
+          break;
+        case "background-image--mobile":
+          this.$container.backgroundImageMobile = t;
+          break;
+        case "background-image--tablet":
+          this.$container.backgroundImageTablet = t;
+          break;
+        case "background-image--laptop":
+          this.$container.backgroundImageLaptop = t;
+          break;
+        case "background-size":
+          this.$container.backgroundSize = d.indexOf(t) > 0 ? t : "";
+          break;
+        case "background-position":
+          this.$container.backgroundPosition = t;
+          break;
+        case "reduced":
+          this.$el.toggleAttribute("reduced", t !== null), this.creategridTemplateAreas();
+          break;
+        case "inverted":
+          for (let r = 0; r < this.$children.length; r++)
+            this.$children[r].hasAttribute("inverted") || this.$children[r].toggleAttribute("inverted");
+          this.$el.toggleAttribute("inverted", t !== null);
+          break;
+        default:
+          super.attributeChangedCallback(e, a, t);
+          break;
+      }
+  }
+  creategridTemplateAreas() {
+    const e = this.shadowRoot.querySelector(
+      ".banner-content"
+    ), a = ["tag", "media", "title", "description", "content", "action"];
+    let t = "";
+    this.reduced ? a.forEach((r) => {
+      const n = this.shadowRoot.querySelector(
+        `slot[name="${r}"]`
+      );
+      if (n && n.assignedElements().length > 0) {
+        if (r === "media") return;
+        t += `'media ${r}'
+`;
+      }
+    }) : a.forEach((r) => {
+      const n = this.shadowRoot.querySelector(
+        `slot[name="${r}"]`
+      );
+      n && n.assignedElements().length > 0 && (t += `'${r}'
+`);
+    }), t || (t = "'content'"), e.style.gridTemplateAreas = t;
+  }
+  get $container() {
+    return this.shadowRoot.querySelector("px-container");
+  }
+  get $children() {
+    return this.querySelectorAll("px-banner > *");
+  }
+  get backgroundColor() {
+    return this.getAttribute("background-color");
+  }
+  set backgroundColor(e) {
+    this.setAttribute("background-color", e);
+  }
+  get gradient() {
+    return this.getAttribute("background-gradient");
+  }
+  set gradient(e) {
+    this.setAttribute("background-gradient", e);
+  }
+  get backgroundImage() {
+    return this.getAttribute("background-image");
+  }
+  set backgroundImage(e) {
+    this.setAttribute("background-image", e);
+  }
+  get backgroundImageMobile() {
+    return this.getAttribute("background-image--mobile");
+  }
+  set backgroundImageMobile(e) {
+    this.setAttribute("background-image--mobile", e);
+  }
+  get backgroundImageTablet() {
+    return this.getAttribute("background-image--tablet");
+  }
+  set backgroundImageTablet(e) {
+    this.setAttribute("background-image--tablet", e);
+  }
+  get backgroundImageLaptop() {
+    return this.getAttribute("background-image--laptop");
+  }
+  set backgroundImageLaptop(e) {
+    this.setAttribute("background-image--laptop", e);
+  }
+  get backgroundSize() {
+    return this.getAttribute("background-size");
+  }
+  set backgroundSize(e) {
+    this.setAttribute("background-size", e);
+  }
+  get backgroundPosition() {
+    return this.getAttribute("background-position");
+  }
+  set backgroundPosition(e) {
+    this.setAttribute("background-position", e);
+  }
+  get gradientContrastHelper() {
+    return this.hasAttribute("contrast-helper-gradient");
+  }
+  set gradientContrastHelper(e) {
+    e ? this.setAttribute("contrast-helper-gradient", "") : this.removeAttribute("contrast-helper-gradient");
+  }
+  get overlayContrastHelper() {
+    return this.hasAttribute("contrast-helper-overlay");
+  }
+  set overlayContrastHelper(e) {
+    e ? this.setAttribute("contrast-helper-overlay", "") : this.removeAttribute("contrast-helper-overlay");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(e) {
+    e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  }
+  get reduced() {
+    return this.hasAttribute("reduced");
+  }
+  set reduced(e) {
+    e ? this.setAttribute("reduced", "") : this.removeAttribute("reduced");
+  }
+};
+o.nativeName = "div";
+let i = o;
+customElements.define("px-banner", i);
+export {
+  i as Banner
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-banner",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.3",
   "description": "",
   "main": "dist/index.js",
   "exports": {
@@ -33,10 +33,14 @@
           "dist/*.js",
           "dist/*.cjs",
           "dist/css/**/*.css",
-          "dist/js/**/*.js"
+          "dist/js/**/*.js",
+          "dist/*.svg",
+          "dist/*.ttf",
+          "dist/glyphmap.json",
+          "dist/*.d.ts"
         ]
       }
     }
   },
-  "gitHead": "19c7c8d586ed423ecfdffc7a7e9140b2d90f38c7"
+  "gitHead": "2373cc5b922977abc7f827fbb6e8051e7662d07c"
 }

package/dist/PxSection.es.js

@@ -1 +0,0 @@
-