@proximus/lavender-banner 1.0.0-alpha.7 → 1.0.0-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.js +54 -54
  2. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import { PxElement as d, backgroundSizeValues as c, gradientValues as l, backgroundColorValues as g } from "@proximus/lavender-common";
2
- const b = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8em}.banner[reduced]{min-height:5em}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();
1
+ import { PxElement as d, backgroundSizeValues as c, gradientValues as g, backgroundColorValues as l } from "@proximus/lavender-common";
2
+ const b = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8em}.banner[reduced]{min-height:5em}px-container{height:100%}.banner-content{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,auto);row-gap:var(--px-spacing-s-mobile);z-index:2;position:relative}[reduced] .banner-content{grid-template-columns:min-content minmax(0,1fr);column-gap:var(--px-spacing-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-default-mobile) - var(--px-spacing-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-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}@media only screen and (min-width: 1025px){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}', s = new CSSStyleSheet();
3
3
  s.replaceSync(b);
4
4
  const o = class o extends d {
5
5
  constructor() {
@@ -34,70 +34,70 @@ const o = class o extends d {
34
34
  ];
35
35
  }
36
36
  connectedCallback() {
37
- var e;
38
- (e = super.connectedCallback) == null || e.call(this), this.creategridTemplateAreas();
37
+ var t;
38
+ (t = super.connectedCallback) == null || t.call(this), this.createGridTemplateAreas();
39
39
  }
40
- attributeChangedCallback(e, a, t) {
41
- if (a !== t)
42
- switch (e) {
40
+ attributeChangedCallback(t, a, e) {
41
+ if (a !== e)
42
+ switch (t) {
43
43
  case "background-color":
44
- this.$container.backgroundColor = g.indexOf(t) > 0 ? t : "none";
44
+ this.$container.backgroundColor = l.indexOf(e) > 0 ? e : "none";
45
45
  break;
46
46
  case "background-gradient":
47
- this.$container.gradient = l.indexOf(t) > 0 ? t : "none";
47
+ this.$container.gradient = g.indexOf(e) > 0 ? e : "none";
48
48
  break;
49
49
  case "background-image":
50
- this.$container.backgroundImage = t;
50
+ this.$container.backgroundImage = e;
51
51
  break;
52
52
  case "background-image--mobile":
53
- this.$container.backgroundImageMobile = t;
53
+ this.$container.backgroundImageMobile = e;
54
54
  break;
55
55
  case "background-image--tablet":
56
- this.$container.backgroundImageTablet = t;
56
+ this.$container.backgroundImageTablet = e;
57
57
  break;
58
58
  case "background-image--laptop":
59
- this.$container.backgroundImageLaptop = t;
59
+ this.$container.backgroundImageLaptop = e;
60
60
  break;
61
61
  case "background-size":
62
- this.$container.backgroundSize = c.indexOf(t) > 0 ? t : "";
62
+ this.$container.backgroundSize = c.indexOf(e) > 0 ? e : "";
63
63
  break;
64
64
  case "background-position":
65
- this.$container.backgroundPosition = t;
65
+ this.$container.backgroundPosition = e;
66
66
  break;
67
67
  case "reduced":
68
- this.$el.toggleAttribute("reduced", t !== null), this.creategridTemplateAreas();
68
+ this.$el.toggleAttribute("reduced", e !== null), this.createGridTemplateAreas();
69
69
  break;
70
70
  case "inverted":
71
71
  for (let r = 0; r < this.$children.length; r++)
72
72
  this.$children[r].hasAttribute("inverted") || this.$children[r].toggleAttribute("inverted");
73
- this.$el.toggleAttribute("inverted", t !== null);
73
+ this.$el.toggleAttribute("inverted", e !== null);
74
74
  break;
75
75
  default:
76
- super.attributeChangedCallback(e, a, t);
76
+ super.attributeChangedCallback(t, a, e);
77
77
  break;
78
78
  }
79
79
  }
80
- creategridTemplateAreas() {
81
- const e = this.shadowRoot.querySelector(
80
+ createGridTemplateAreas() {
81
+ const t = this.shadowRoot.querySelector(
82
82
  ".banner-content"
83
83
  ), a = ["tag", "media", "title", "description", "content", "action"];
84
- let t = "";
84
+ let e = "";
85
85
  this.reduced ? a.forEach((r) => {
86
- const n = this.shadowRoot.querySelector(
86
+ const i = this.shadowRoot.querySelector(
87
87
  `slot[name="${r}"]`
88
88
  );
89
- if (n && n.assignedElements().length > 0) {
89
+ if (i && i.assignedElements().length > 0) {
90
90
  if (r === "media") return;
91
- t += `'media ${r}'
91
+ e += `'media ${r}'
92
92
  `;
93
93
  }
94
94
  }) : a.forEach((r) => {
95
- const n = this.shadowRoot.querySelector(
95
+ const i = this.shadowRoot.querySelector(
96
96
  `slot[name="${r}"]`
97
97
  );
98
- n && n.assignedElements().length > 0 && (t += `'${r}'
98
+ i && i.assignedElements().length > 0 && (e += `'${r}'
99
99
  `);
100
- }), t || (t = "'content'"), e.style.gridTemplateAreas = t;
100
+ }), e || (e = "'content'"), t.style.gridTemplateAreas = e;
101
101
  }
102
102
  get $container() {
103
103
  return this.shadowRoot.querySelector("px-container");
@@ -108,79 +108,79 @@ const o = class o extends d {
108
108
  get backgroundColor() {
109
109
  return this.getAttribute("background-color");
110
110
  }
111
- set backgroundColor(e) {
112
- this.setAttribute("background-color", e);
111
+ set backgroundColor(t) {
112
+ this.setAttribute("background-color", t);
113
113
  }
114
114
  get gradient() {
115
115
  return this.getAttribute("background-gradient");
116
116
  }
117
- set gradient(e) {
118
- this.setAttribute("background-gradient", e);
117
+ set gradient(t) {
118
+ this.setAttribute("background-gradient", t);
119
119
  }
120
120
  get backgroundImage() {
121
121
  return this.getAttribute("background-image");
122
122
  }
123
- set backgroundImage(e) {
124
- this.setAttribute("background-image", e);
123
+ set backgroundImage(t) {
124
+ this.setAttribute("background-image", t);
125
125
  }
126
126
  get backgroundImageMobile() {
127
127
  return this.getAttribute("background-image--mobile");
128
128
  }
129
- set backgroundImageMobile(e) {
130
- this.setAttribute("background-image--mobile", e);
129
+ set backgroundImageMobile(t) {
130
+ this.setAttribute("background-image--mobile", t);
131
131
  }
132
132
  get backgroundImageTablet() {
133
133
  return this.getAttribute("background-image--tablet");
134
134
  }
135
- set backgroundImageTablet(e) {
136
- this.setAttribute("background-image--tablet", e);
135
+ set backgroundImageTablet(t) {
136
+ this.setAttribute("background-image--tablet", t);
137
137
  }
138
138
  get backgroundImageLaptop() {
139
139
  return this.getAttribute("background-image--laptop");
140
140
  }
141
- set backgroundImageLaptop(e) {
142
- this.setAttribute("background-image--laptop", e);
141
+ set backgroundImageLaptop(t) {
142
+ this.setAttribute("background-image--laptop", t);
143
143
  }
144
144
  get backgroundSize() {
145
145
  return this.getAttribute("background-size");
146
146
  }
147
- set backgroundSize(e) {
148
- this.setAttribute("background-size", e);
147
+ set backgroundSize(t) {
148
+ this.setAttribute("background-size", t);
149
149
  }
150
150
  get backgroundPosition() {
151
151
  return this.getAttribute("background-position");
152
152
  }
153
- set backgroundPosition(e) {
154
- this.setAttribute("background-position", e);
153
+ set backgroundPosition(t) {
154
+ this.setAttribute("background-position", t);
155
155
  }
156
156
  get gradientContrastHelper() {
157
157
  return this.hasAttribute("contrast-helper-gradient");
158
158
  }
159
- set gradientContrastHelper(e) {
160
- e ? this.setAttribute("contrast-helper-gradient", "") : this.removeAttribute("contrast-helper-gradient");
159
+ set gradientContrastHelper(t) {
160
+ t ? this.setAttribute("contrast-helper-gradient", "") : this.removeAttribute("contrast-helper-gradient");
161
161
  }
162
162
  get overlayContrastHelper() {
163
163
  return this.hasAttribute("contrast-helper-overlay");
164
164
  }
165
- set overlayContrastHelper(e) {
166
- e ? this.setAttribute("contrast-helper-overlay", "") : this.removeAttribute("contrast-helper-overlay");
165
+ set overlayContrastHelper(t) {
166
+ t ? this.setAttribute("contrast-helper-overlay", "") : this.removeAttribute("contrast-helper-overlay");
167
167
  }
168
168
  get inverted() {
169
169
  return this.hasAttribute("inverted");
170
170
  }
171
- set inverted(e) {
172
- e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
171
+ set inverted(t) {
172
+ t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
173
173
  }
174
174
  get reduced() {
175
175
  return this.hasAttribute("reduced");
176
176
  }
177
- set reduced(e) {
178
- e ? this.setAttribute("reduced", "") : this.removeAttribute("reduced");
177
+ set reduced(t) {
178
+ t ? this.setAttribute("reduced", "") : this.removeAttribute("reduced");
179
179
  }
180
180
  };
181
181
  o.nativeName = "div";
182
- let i = o;
183
- customElements.define("px-banner", i);
182
+ let n = o;
183
+ customElements.define("px-banner", n);
184
184
  export {
185
- i as Banner
185
+ n as Banner
186
186
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-banner",
3
- "version": "1.0.0-alpha.7",
3
+ "version": "1.0.0-alpha.8",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
@@ -42,5 +42,5 @@
42
42
  }
43
43
  }
44
44
  },
45
- "gitHead": "632aad11570412a005e2ec7417eab5be24bc207e"
45
+ "gitHead": "7683b6952d1da07fe58b0f4ddef292e3954ab85d"
46
46
  }