@proximus/lavender-device-card 2.0.0-alpha.203 → 2.0.0-alpha.205
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.
- package/dist/DeviceCard.d.ts +1 -1
- package/dist/custom-elements.json +7 -8
- package/dist/index.es.js +10 -7
- package/dist/web-types.json +2 -5
- package/package.json +1 -1
package/dist/DeviceCard.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { VerticallyExtendedElement } from '@proximus/lavender-common';
|
|
2
2
|
export declare class DeviceCard extends VerticallyExtendedElement<HTMLLinkElement> {
|
|
3
|
+
protected static readonly template: HTMLTemplateElement;
|
|
3
4
|
static nativeName: string;
|
|
4
|
-
template: () => string;
|
|
5
5
|
constructor();
|
|
6
6
|
static get observedAttributes(): string[];
|
|
7
7
|
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
@@ -11,6 +11,13 @@
|
|
|
11
11
|
"description": "",
|
|
12
12
|
"name": "DeviceCard",
|
|
13
13
|
"members": [
|
|
14
|
+
{
|
|
15
|
+
"kind": "field",
|
|
16
|
+
"name": "template",
|
|
17
|
+
"privacy": "protected",
|
|
18
|
+
"static": true,
|
|
19
|
+
"readonly": true
|
|
20
|
+
},
|
|
14
21
|
{
|
|
15
22
|
"kind": "field",
|
|
16
23
|
"name": "nativeName",
|
|
@@ -19,14 +26,6 @@
|
|
|
19
26
|
},
|
|
20
27
|
"static": true,
|
|
21
28
|
"default": "'a'"
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
"kind": "field",
|
|
25
|
-
"name": "template"
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
"kind": "field",
|
|
29
|
-
"name": "innerHTML"
|
|
30
29
|
}
|
|
31
30
|
],
|
|
32
31
|
"superclass": {
|
package/dist/index.es.js
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
import { VerticallyExtendedElement as e } from "@proximus/lavender-common";
|
|
1
|
+
import { VerticallyExtendedElement as e, createTemplate as t, renderTemplate as n } from "@proximus/lavender-common";
|
|
2
2
|
//#region src/device-card.css?inline
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
var
|
|
3
|
+
var r = ":host{display:block}:host *{box-sizing:border-box}.device-card{gap:var(--px-spacing-default-mobile);height:100%;font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-color-text-neutral-default);--btn-transition:all .2s ease-in-out 0s;transition:var(--btn-transition);border-radius:var(--px-radius-main);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);border:var(--px-size-border-m) solid transparent;background-color:var(--px-color-background-surface-light);padding:var(--px-padding-m-mobile);flex-direction:column;text-decoration:none;display:flex}.device-card ::slotted([slot=brand]){font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-dimmed-default)}.device-card ::slotted([slot=model]){font-size:var(--px-text-size-heading-l-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);color:var(--px-color-text-neutral-default);flex-grow:1}.device-card ::slotted([slot=energy-rating]),.device-card ::slotted([slot=model-visual]){flex-shrink:0}.device-card ::slotted([slot=color-options]),.device-card ::slotted([slot=storage-options]){gap:var(--px-spacing-xs-mobile);flex-wrap:wrap;display:flex}.device-card ::slotted([slot=as-from-label]){font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-dimmed-default);text-align:right}.device-card ::slotted([slot=with-subscription-label]){font-size:var(--px-text-size-body-l-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);color:var(--px-color-text-neutral-default)}.device-card ::slotted([slot=without-subscription-label]),.device-card ::slotted([slot=without-subscription-price]){font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default)}.device-card ::slotted([slot=without-subscription-price]){text-align:right}.device-card:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}.device-card:hover{border-color:var(--px-color-border-state-hover-default);background-color:var(--px-color-background-state-hover-bordered-default)}@media screen and (width>=48rem){.device-card{gap:var(--px-spacing-default-tablet);outline-width:var(--px-focus-outline-tablet);padding:var(--px-padding-m-tablet)}.device-card ::slotted([slot=brand]){font-size:var(--px-text-size-body-m-tablet)}.device-card ::slotted([slot=model]){font-size:var(--px-text-size-heading-l-tablet)}.device-card ::slotted([slot=color-options]),.device-card ::slotted([slot=storage-options]){gap:var(--px-spacing-xs-tablet)}.device-card ::slotted([slot=as-from-label]){font-size:var(--px-text-size-body-m-tablet)}.device-card ::slotted([slot=with-subscription-label]){font-size:var(--px-text-size-body-l-tablet)}.device-card ::slotted([slot=without-subscription-label]),.device-card ::slotted([slot=without-subscription-price]){font-size:var(--px-text-size-body-m-tablet)}.device-card:focus-visible{outline-offset:var(--px-focus-offset-tablet)}}@media screen and (width>=64.0625rem){.device-card{gap:var(--px-spacing-default-laptop);outline-width:var(--px-focus-outline-laptop);padding:var(--px-padding-m-laptop)}.device-card ::slotted([slot=brand]){font-size:var(--px-text-size-body-m-laptop)}.device-card ::slotted([slot=model]){font-size:var(--px-text-size-heading-l-laptop)}.device-card ::slotted([slot=color-options]),.device-card ::slotted([slot=storage-options]){gap:var(--px-spacing-xs-laptop)}.device-card ::slotted([slot=as-from-label]){font-size:var(--px-text-size-body-m-laptop)}.device-card ::slotted([slot=with-subscription-label]){font-size:var(--px-text-size-body-l-laptop)}.device-card ::slotted([slot=without-subscription-label]),.device-card ::slotted([slot=without-subscription-price]){font-size:var(--px-text-size-body-m-laptop)}.device-card:focus-visible{outline-offset:var(--px-focus-offset-laptop)}}@media screen and (width>=90.0625rem){.device-card{gap:var(--px-spacing-default-desktop);outline-width:var(--px-focus-outline-desktop);padding:var(--px-padding-m-desktop)}.device-card ::slotted([slot=brand]){font-size:var(--px-text-size-body-m-desktop)}.device-card ::slotted([slot=model]){font-size:var(--px-text-size-heading-l-desktop)}.device-card ::slotted([slot=color-options]),.device-card ::slotted([slot=storage-options]){gap:var(--px-spacing-xs-desktop)}.device-card ::slotted([slot=as-from-label]){font-size:var(--px-text-size-body-m-desktop)}.device-card ::slotted([slot=with-subscription-label]){font-size:var(--px-text-size-body-l-desktop)}.device-card ::slotted([slot=without-subscription-label]),.device-card ::slotted([slot=without-subscription-price]){font-size:var(--px-text-size-body-m-desktop)}.device-card:focus-visible{outline-offset:var(--px-focus-offset-desktop)}}", i = new CSSStyleSheet();
|
|
4
|
+
i.replaceSync(r);
|
|
5
|
+
var a = class r extends e {
|
|
6
|
+
static {
|
|
7
|
+
this.template = t("<a class=\"device-card\"><px-hstack gap=\"xs\" grow=\"1\"><px-vstack grow=\"1\"><slot name=\"brand\"></slot><slot name=\"model\"></slot></px-vstack><slot name=\"energy-rating\"></slot></px-hstack><px-hstack gap=\"default\" grow=\"1\"><slot name=\"model-visual\"></slot><px-vstack gap=\"s\"><slot name=\"color-options\"></slot><slot name=\"storage-options\"></slot></px-vstack></px-hstack><px-separator></px-separator><px-vstack><slot name=\"as-from-label\"></slot><px-hstack\n gap=\"xs\"\n justify-content=\"space-between\"\n align-items=\"center\"\n ><slot name=\"with-subscription-label\"></slot><slot name=\"with-subscription-price\"></slot></px-hstack><px-hstack gap=\"xs\" justify-content=\"space-between\"><slot name=\"without-subscription-label\"></slot><slot name=\"without-subscription-price\"></slot></px-hstack></px-vstack></a>");
|
|
8
|
+
}
|
|
6
9
|
static {
|
|
7
10
|
this.nativeName = "a";
|
|
8
11
|
}
|
|
9
12
|
constructor() {
|
|
10
|
-
super(
|
|
13
|
+
super(i), n(this.shadowRoot, r.template);
|
|
11
14
|
}
|
|
12
15
|
static get observedAttributes() {
|
|
13
16
|
return [...super.observedAttributes];
|
|
@@ -18,6 +21,6 @@ var r = class extends e {
|
|
|
18
21
|
}
|
|
19
22
|
}
|
|
20
23
|
};
|
|
21
|
-
customElements.get("px-device-card") || customElements.define("px-device-card",
|
|
24
|
+
customElements.get("px-device-card") || customElements.define("px-device-card", a);
|
|
22
25
|
//#endregion
|
|
23
|
-
export {
|
|
26
|
+
export { a as DeviceCard };
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@proximus/lavender-device-card",
|
|
4
|
-
"version": "2.0.0-alpha.
|
|
4
|
+
"version": "2.0.0-alpha.205",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -12,10 +12,7 @@
|
|
|
12
12
|
"doc-url": "",
|
|
13
13
|
"attributes": [],
|
|
14
14
|
"events": [],
|
|
15
|
-
"js": {
|
|
16
|
-
"properties": [{ "name": "template" }, { "name": "innerHTML" }],
|
|
17
|
-
"events": []
|
|
18
|
-
}
|
|
15
|
+
"js": { "properties": [], "events": [] }
|
|
19
16
|
}
|
|
20
17
|
]
|
|
21
18
|
},
|