@jumpgroup/jump-design-system 0.2.1 → 0.2.3
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/cjs/{index-79e97f36.js → index-12f40d28.js} +58 -8
- package/dist/cjs/index-12f40d28.js.map +1 -0
- package/dist/cjs/jump-badge.cjs.entry.js +1 -1
- package/dist/cjs/jump-button.cjs.entry.js +9 -6
- package/dist/cjs/jump-button.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-card.cjs.entry.js +2 -2
- package/dist/cjs/jump-card.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-design-system.cjs.js +2 -2
- package/dist/cjs/jump-icon.cjs.entry.js +1 -1
- package/dist/cjs/jump-pagination.cjs.entry.js +5 -4
- package/dist/cjs/jump-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/components/jump-button/jump-button-anchor.stories.js +253 -0
- package/dist/collection/components/jump-button/jump-button-anchor.stories.js.map +1 -0
- package/dist/collection/components/jump-button/jump-button-dimension.stories.js +236 -0
- package/dist/collection/components/jump-button/jump-button-dimension.stories.js.map +1 -0
- package/dist/collection/components/jump-button/jump-button-filled.stories.js +5 -259
- package/dist/collection/components/jump-button/jump-button-filled.stories.js.map +1 -1
- package/dist/collection/components/jump-button/jump-button-only-icon.stories.js +342 -0
- package/dist/collection/components/jump-button/jump-button-only-icon.stories.js.map +1 -0
- package/dist/collection/components/jump-button/jump-button-outline.stories.js +5 -74
- package/dist/collection/components/jump-button/jump-button-outline.stories.js.map +1 -1
- package/dist/collection/components/jump-button/jump-button-text.stories.js +289 -0
- package/dist/collection/components/jump-button/jump-button-text.stories.js.map +1 -0
- package/dist/collection/components/jump-button/jump-button.css +92 -43
- package/dist/collection/components/jump-button/jump-button.js +20 -17
- package/dist/collection/components/jump-button/jump-button.js.map +1 -1
- package/dist/collection/components/jump-button/test/jump-button.spec.js +2 -2
- package/dist/collection/components/jump-button/test/jump-button.spec.js.map +1 -1
- package/dist/collection/components/jump-card/jump-card-border-radius.stories.js +2 -14
- package/dist/collection/components/jump-card/jump-card-border-radius.stories.js.map +1 -1
- package/dist/collection/components/jump-card/jump-card-top-border-content-radius.stories.js +1 -2
- package/dist/collection/components/jump-card/jump-card-top-border-content-radius.stories.js.map +1 -1
- package/dist/collection/components/jump-card/jump-card.css +50 -1
- package/dist/collection/components/jump-pagination/jump-pagination-pages.stories.js +8 -0
- package/dist/collection/components/jump-pagination/jump-pagination-pages.stories.js.map +1 -1
- package/dist/collection/components/jump-pagination/jump-pagination-products.stories.js +8 -1
- package/dist/collection/components/jump-pagination/jump-pagination-products.stories.js.map +1 -1
- package/dist/collection/components/jump-pagination/jump-pagination.js +22 -3
- package/dist/collection/components/jump-pagination/jump-pagination.js.map +1 -1
- package/dist/collection/utils/utils.js +13 -0
- package/dist/collection/utils/utils.js.map +1 -1
- package/dist/components/jump-button.js +24 -20
- package/dist/components/jump-button.js.map +1 -1
- package/dist/components/jump-card.js +1 -1
- package/dist/components/jump-card.js.map +1 -1
- package/dist/components/jump-pagination.js +5 -3
- package/dist/components/jump-pagination.js.map +1 -1
- package/dist/esm/{index-7feee8ea.js → index-d09b8a38.js} +58 -8
- package/dist/esm/index-d09b8a38.js.map +1 -0
- package/dist/esm/jump-badge.entry.js +1 -1
- package/dist/esm/jump-button.entry.js +9 -6
- package/dist/esm/jump-button.entry.js.map +1 -1
- package/dist/esm/jump-card.entry.js +2 -2
- package/dist/esm/jump-card.entry.js.map +1 -1
- package/dist/esm/jump-design-system.js +3 -3
- package/dist/esm/jump-icon.entry.js +1 -1
- package/dist/esm/jump-pagination.entry.js +5 -4
- package/dist/esm/jump-pagination.entry.js.map +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/jump-design-system/jump-design-system.esm.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
- package/dist/jump-design-system/p-062fa189.entry.js +2 -0
- package/dist/jump-design-system/p-062fa189.entry.js.map +1 -0
- package/dist/jump-design-system/p-407027a9.js +3 -0
- package/dist/jump-design-system/p-407027a9.js.map +1 -0
- package/dist/jump-design-system/{p-99238e3f.entry.js → p-81fba573.entry.js} +2 -2
- package/dist/jump-design-system/{p-bc02e346.entry.js → p-b2967e30.entry.js} +2 -2
- package/dist/jump-design-system/p-e0c9453d.entry.js +2 -0
- package/dist/jump-design-system/p-e0c9453d.entry.js.map +1 -0
- package/dist/jump-design-system/p-fea57bd7.entry.js +2 -0
- package/dist/jump-design-system/p-fea57bd7.entry.js.map +1 -0
- package/dist/jump-design-system-elements.json +4 -0
- package/dist/types/components/jump-button/jump-button-anchor.stories.d.ts +160 -0
- package/dist/types/components/jump-button/jump-button-dimension.stories.d.ts +158 -0
- package/dist/types/components/jump-button/jump-button-filled.stories.d.ts +0 -13
- package/dist/types/components/jump-button/jump-button-only-icon.stories.d.ts +164 -0
- package/dist/types/components/jump-button/jump-button-outline.stories.d.ts +0 -2
- package/dist/types/components/jump-button/jump-button-text.stories.d.ts +161 -0
- package/dist/types/components/jump-button/jump-button.d.ts +2 -1
- package/dist/types/components/jump-pagination/jump-pagination-pages.stories.d.ts +5 -0
- package/dist/types/components/jump-pagination/jump-pagination-products.stories.d.ts +5 -0
- package/dist/types/components/jump-pagination/jump-pagination.d.ts +1 -0
- package/dist/types/components.d.ts +2 -0
- package/dist/types/utils/utils.d.ts +2 -1
- package/package.json +1 -1
- package/readme.md +1 -1
- package/dist/cjs/index-79e97f36.js.map +0 -1
- package/dist/esm/index-7feee8ea.js.map +0 -1
- package/dist/jump-design-system/p-7cfed9c6.entry.js +0 -2
- package/dist/jump-design-system/p-7cfed9c6.entry.js.map +0 -1
- package/dist/jump-design-system/p-8ec7e589.entry.js +0 -2
- package/dist/jump-design-system/p-8ec7e589.entry.js.map +0 -1
- package/dist/jump-design-system/p-9fd6e0a0.entry.js +0 -2
- package/dist/jump-design-system/p-9fd6e0a0.entry.js.map +0 -1
- package/dist/jump-design-system/p-c560071a.js +0 -3
- package/dist/jump-design-system/p-c560071a.js.map +0 -1
- /package/dist/jump-design-system/{p-99238e3f.entry.js.map → p-81fba573.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-bc02e346.entry.js.map → p-b2967e30.entry.js.map} +0 -0
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const jumpButtonCss = "
|
|
3
|
+
const jumpButtonCss = ":root{--neutral-grey-background:#eeeeee;--neutral-grey-disabled:#cbcbcb;--neutral-grey-primary:#282828;--neutral-grey-secondary:#707070;--neutral-white:#ffffff;--primary-hard:#e75a50;--primary-soft:#ffeae9;--primary-standard:#fa7268;--secondary-hard:#435171;--secondary-soft:#dde3ed;--secondary-standard:#5e79ba;--status-danger-hard:#ba250a;--status-danger-soft:#fdd3d1;--status-danger-standard:#d72c0d;--status-interaction-hard:#22559e;--status-interaction-soft:#f2f7fe;--status-interaction-standard:#2c6ecb;--status-success-hard:#156048;--status-success-soft:#f1f8f5;--status-success-standard:#1d7f60;--status-warning-hard:#987100;--status-warning-soft:#fef5ea;--status-warning-standard:#b98900;--ff-primary:\"Inter\";--ff-secondary:\"Prompt\";--lh-300:1.25rem;--lh-400:1.5rem;--lh-500:1.625rem;--lh-600:2rem;--lh-700:2.75rem;--lh-800:3.5rem;--lh-850:4.375rem;--lh-900:5.5rem;--fs-300:0.875rem;--fs-400:1rem;--fs-500:1.125rem;--fs-600:1.5rem;--fs-700:2.25rem;--fs-800:3rem;--fs-850:3.75rem;--fs-900:4.5rem;--fw-300:300;--fw-400:400;--fw-900:700}:host button,:host a{background-color:transparent;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host{display:inline-flex;align-items:center;--jump-button-color:#ffffff;--jump-button-color-disabled:#cbcbcb;--jump-button-background:var(--primary-standard);--jump-button-background-outline:transparent;--jump-button-color-hover:#ffffff;--jump-button-background-hover:var(--primary-hard);--jump-button-border-radius:var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);--jump-button-padding:1rem 1.25rem}:host button,:host a{background-color:var(--jump-button-background);border-radius:var(--jump-button-border-radius);color:var(--jump-button-color);position:relative;font-family:var(--ff-primary, \"Arial\"), sans-serif;font-weight:var(--fw-700, 700);font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3);display:flex;align-items:center;gap:var(--jump-button-gap, 0.5rem);text-decoration:none;padding:var(--jump-button-padding)}:host button:hover,:host a:hover{background-color:var(--jump-button-background-hover);color:var(--jump-button-color-hover)}:host button[data-variant=primary],:host a[data-variant=primary]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--primary-standard);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--primary-hard)}:host button[data-variant=secondary],:host a[data-variant=secondary]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--secondary-standard);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--secondary-hard)}:host button[data-variant=neutral],:host a[data-variant=neutral]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--neutral-grey-secondary);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--neutral-grey-primary)}:host button[data-variant=white],:host a[data-variant=white]{--jump-button-color:var(--neutral-grey-primary);--jump-button-background:var(--neutral-white);--jump-button-color-hover:var(--neutral-grey-primary);--jump-button-background-hover:var(--neutral-grey-background)}:host button[disabled],:host a[disabled]{--jump-button-background:var(--jump-button-color-disabled);--jump-button-background-hover:var(--jump-button-color-disabled);cursor:not-allowed}:host button[data-pill],:host a[data-pill]{border-radius:100rem}:host button[data-size=small],:host a[data-size=small]{font-size:var(--fs-300, 0.875rem);line-height:var(--lh-300, 1.2);--jump-button-padding:0.5rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3)}:host button[data-size=large],:host a[data-size=large]{font-size:var(--fs-500, 1.125rem);line-height:var(--lh-500, 1.4);--jump-button-padding:1.125rem 1.5rem}:host button[data-outline],:host a[data-outline]{background-color:var(--jump-button-background-outline);border:1px solid var(--jump-button-background);color:var(--jump-button-background)}:host button[data-outline]:hover,:host a[data-outline]:hover{background-color:var(--jump-button-background-hover);border:1px solid var(--jump-button-background-hover);color:var(--jump-button-color-hover)}:host button[data-text],:host a[data-text]{background-color:transparent;border:none;color:var(--jump-button-background);padding:0}:host button[data-text]:hover,:host a[data-text]:hover{background-color:transparent;border:none;color:var(--jump-button-background-hover)}:host button[data-only-icon],:host a[data-only-icon]{--jump-button-padding:1.125rem}:host button[data-only-icon][data-size=small],:host a[data-only-icon][data-size=small]{--jump-button-padding:0.5rem}:host button[data-only-icon][data-size=medium],:host a[data-only-icon][data-size=medium]{--jump-button-padding:1rem}:host button[data-only-icon][data-size=large],:host a[data-only-icon][data-size=large]{--jump-button-padding:1.125rem}:host button.chat,:host a.chat{--jump-button-color:var(--neutral-white);--jump-button-background:hsla(133, 54%, 58%, 1);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:hsla(161, 63%, 31%, 1)}";
|
|
4
4
|
const JumpButtonStyle0 = jumpButtonCss;
|
|
5
5
|
|
|
6
|
-
const
|
|
6
|
+
const JumpButton$1 = /*@__PURE__*/ proxyCustomElement(class JumpButton extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
8
8
|
super();
|
|
9
9
|
this.__registerHost();
|
|
10
|
+
this.__attachShadow();
|
|
10
11
|
this.disabled = false;
|
|
11
12
|
this.variant = 'primary';
|
|
12
13
|
this.outline = false;
|
|
@@ -23,26 +24,29 @@ const AppButton = /*@__PURE__*/ proxyCustomElement(class AppButton extends HTMLE
|
|
|
23
24
|
this.class = undefined;
|
|
24
25
|
this.buttonId = undefined;
|
|
25
26
|
}
|
|
27
|
+
componentWillLoad() {
|
|
28
|
+
this.target = this.href ? this.target : '_self';
|
|
29
|
+
}
|
|
26
30
|
render() {
|
|
27
|
-
return (h(Host, { key: '
|
|
31
|
+
return (h(Host, { key: '6b61dcd618e7aee12b9f539c6a092d524566ba47' }, this.href ? (h("a", { href: this.href, id: this.buttonId, class: this.class, "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, "aria-label": this.ariaLabel, target: this.target }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" }))) : (h("button", { id: this.buttonId, class: this.class, "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, disabled: this.disabled, "aria-label": this.ariaLabel, type: this.type, name: this.name, value: this.value }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" })))));
|
|
28
32
|
}
|
|
29
33
|
static get style() { return JumpButtonStyle0; }
|
|
30
|
-
}, [
|
|
34
|
+
}, [1, "jump-button", {
|
|
31
35
|
"disabled": [4],
|
|
32
|
-
"variant": [
|
|
33
|
-
"outline": [
|
|
34
|
-
"size": [
|
|
35
|
-
"pill": [
|
|
36
|
-
"text": [
|
|
37
|
-
"onlyIcon": [
|
|
38
|
-
"href": [
|
|
39
|
-
"target": [
|
|
40
|
-
"type": [
|
|
41
|
-
"name": [
|
|
42
|
-
"value": [
|
|
43
|
-
"ariaLabel": [
|
|
44
|
-
"class": [
|
|
45
|
-
"buttonId": [
|
|
36
|
+
"variant": [1],
|
|
37
|
+
"outline": [4],
|
|
38
|
+
"size": [1],
|
|
39
|
+
"pill": [4],
|
|
40
|
+
"text": [4],
|
|
41
|
+
"onlyIcon": [4, "only-icon"],
|
|
42
|
+
"href": [1],
|
|
43
|
+
"target": [1],
|
|
44
|
+
"type": [1],
|
|
45
|
+
"name": [1],
|
|
46
|
+
"value": [1],
|
|
47
|
+
"ariaLabel": [1, "aria-label"],
|
|
48
|
+
"class": [1],
|
|
49
|
+
"buttonId": [1, "button-id"]
|
|
46
50
|
}]);
|
|
47
51
|
function defineCustomElement$1() {
|
|
48
52
|
if (typeof customElements === "undefined") {
|
|
@@ -52,13 +56,13 @@ function defineCustomElement$1() {
|
|
|
52
56
|
components.forEach(tagName => { switch (tagName) {
|
|
53
57
|
case "jump-button":
|
|
54
58
|
if (!customElements.get(tagName)) {
|
|
55
|
-
customElements.define(tagName,
|
|
59
|
+
customElements.define(tagName, JumpButton$1);
|
|
56
60
|
}
|
|
57
61
|
break;
|
|
58
62
|
} });
|
|
59
63
|
}
|
|
60
64
|
|
|
61
|
-
const JumpButton =
|
|
65
|
+
const JumpButton = JumpButton$1;
|
|
62
66
|
const defineCustomElement = defineCustomElement$1;
|
|
63
67
|
|
|
64
68
|
export { JumpButton, defineCustomElement };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-button.js","mappings":";;AAAA,MAAM,aAAa,GAAG,s3IAAs3I,CAAC;AAC74I,yBAAe,aAAa;;MCMf,SAAS;;;;wBAIQ,KAAK;uBAK4C,SAAS;uBAK5C,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;wBAKD,KAAK;oBAKV,SAAS;;oBAUU,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEnD,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,IACR,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAChQ,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,KAEJ,cAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAC7S,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/jump-button/jump-button.scss?tag=jump-button","src/components/jump-button/jump-button.tsx"],"sourcesContent":["%reset-button {\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\njump-button {\n display: inline-flex;\n align-items: center;\n --jump-button-color: #ffffff;\n --jump-button-color-disabled: #cbcbcb;\n --jump-button-background: var(--primary-standard);\n --jump-button-background-outline: transparent;\n --jump-button-color-hover: #ffffff;\n --jump-button-background-hover: var(--primary-hard);\n --jump-button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);\n --jump-button-padding: 1rem 1.25rem;\n\n button,\n a {\n @extend %reset-button;\n background-color: var(--jump-button-background);\n border-radius: var(--jump-button-border-radius);\n color: var(--jump-button-color);\n position: relative;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n font-weight: var(--fw-700, 700);\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n display: flex;\n align-items: center;\n gap: var(--jump-button-gap, 0.5rem);\n text-decoration: none;\n\n //TODO: internal padding of the button\n padding: var(--jump-button-padding);\n\n // TODO: gestire il focus con un outline\n &:hover {\n background-color: var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n\n &[data-variant='primary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--primary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--primary-hard);\n }\n\n &[data-variant='secondary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--secondary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--secondary-hard);\n }\n\n &[data-variant='neutral'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--neutral-grey-secondary);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--neutral-grey-primary);\n }\n\n &[data-variant='white'] {\n --jump-button-color: var(--neutral-grey-primary);\n --jump-button-background: var(--neutral-white);\n --jump-button-color-hover: var(--neutral-grey-primary);\n --jump-button-background-hover: var(--neutral-grey-background);\n }\n\n &[disabled] {\n --jump-button-background: var(--jump-button-color-disabled);\n --jump-button-background-hover: var(--jump-button-color-disabled);\n cursor: not-allowed;\n }\n\n &[data-pill] {\n border-radius: 100rem;\n }\n\n &[data-size='small'] {\n font-size: var(--fs-300, 0.875rem);\n line-height: var(--lh-300, 1.2);\n --jump-button-padding: 0.5rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n }\n\n &[data-size='large'] {\n font-size: var(--fs-500, 1.125rem);\n line-height: var(--lh-500, 1.4);\n --jump-button-padding: 1.125rem 1.5rem;\n }\n\n &[data-outline] {\n background-color: var(--jump-button-background-outline);\n border: 1px solid var(--jump-button-background);\n color: var(--jump-button-background);\n &:hover {\n background-color: var(--jump-button-background-hover);\n border: 1px solid var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n }\n\n &[data-text] {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background);\n padding: 0;\n &:hover {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background-hover);\n }\n }\n\n &[data-only-icon] {\n --jump-button-padding: 1.125rem;\n }\n &[data-only-icon][data-size='small'] {\n --jump-button-padding: 0.5rem;\n }\n &[data-only-icon][data-size='medium'] {\n --jump-button-padding: 1rem;\n }\n &[data-only-icon][data-size='large'] {\n --jump-button-padding: 1.125rem;\n }\n\n &.chat {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: hsla(133, 54%, 58%, 1);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: hsla(161, 63%, 31%, 1);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-button',\n styleUrl: 'jump-button.scss',\n shadow: false,\n})\nexport class AppButton {\n /**\n * Set the button as disabled; Vale solo per i bottoni\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Indicates the variant of the button\n */\n @Prop({reflect: true}) variant: 'primary'|'secondary'|'tertiary'|'neutral' = 'primary';\n\n /**\n * Indicates the button as outline\n */\n @Prop({reflect: true}) outline: boolean = false;\n\n /**\n * Indicates the size of the button\n */\n @Prop({reflect: true}) size: string = 'medium';\n\n /**\n * Indicates the button as pill\n */\n @Prop({reflect: true}) pill: boolean = false;\n\n /**\n * Indicates the button as text\n */\n @Prop({reflect: true}) text: boolean = false;\n\n /**\n * Indicates the button as only icon\n **/\n @Prop({reflect: true}) onlyIcon: boolean = false;\n\n /**\n * Indicates if button becames a anchor\n **/\n @Prop({reflect: true}) href: string = undefined;\n\n /**\n * Indicates the type of anchor's target \n **/\n @Prop({reflect: true}) target: '_blank' | '_parent' | '_self' | '_top'\n\n /**\n * Indicates type button\n **/\n @Prop({reflect: true}) type: 'button'|'submit'|'reset' = 'button';\n\n /**\n * Indicates the name that the sender button will send\n **/\n @Prop({reflect: true}) name: string = undefined;\n\n /**\n * Indicates the value that the sender button will send\n **/\n @Prop({reflect: true}) value: string = undefined;\n\n /**\n * Indicates the value of text alternative to an element that has no visible text on the screen\n **/\n @Prop({reflect: true}) ariaLabel: string = undefined;\n\n /**\n * Indicates classes of the component\n **/\n @Prop({reflect: true}) class: string = undefined;\n\n /**\n * Indicates classes of the component\n **/\n @Prop({reflect: true}) buttonId: string = undefined;\n\n render() {\n return (\n <Host>\n {this.href ? (\n <a href={this.href} id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} aria-label={this.ariaLabel} target={this.target}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot>}\n <slot name=\"suffix\"></slot>\n </a>\n ) : ( \n <button id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} aria-label={this.ariaLabel} type={this.type} name={this.name} value={this.value}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot> }\n <slot name=\"suffix\"></slot>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
1
|
+
{"file":"jump-button.js","mappings":";;AAAA,MAAM,aAAa,GAAG,2oKAA2oK,CAAC;AAClqK,yBAAe,aAAa;;MCMfA,YAAU;;;;;wBAIO,KAAK;uBAK6B,SAAS;uBAK5C,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;wBAKD,KAAK;;;oBAeS,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEpC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;KACjD;IAED,MAAM;QAEJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,IACR,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAChQ,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,KAEJ,cAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAC7S,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpButton"],"sources":["src/components/jump-button/jump-button.scss?tag=jump-button&encapsulation=shadow","src/components/jump-button/jump-button.tsx"],"sourcesContent":[":root {\n /*BASE COLOR RULES*/\n --neutral-grey-background: #eeeeee;\n --neutral-grey-disabled: #cbcbcb;\n --neutral-grey-primary: #282828;\n --neutral-grey-secondary: #707070;\n --neutral-white: #ffffff;\n --primary-hard: #e75a50;\n --primary-soft: #ffeae9;\n --primary-standard: #fa7268;\n --secondary-hard: #435171;\n --secondary-soft: #dde3ed;\n --secondary-standard: #5e79ba;\n --status-danger-hard: #ba250a;\n --status-danger-soft: #fdd3d1;\n --status-danger-standard: #d72c0d;\n --status-interaction-hard: #22559e;\n --status-interaction-soft: #f2f7fe;\n --status-interaction-standard: #2c6ecb;\n --status-success-hard: #156048;\n --status-success-soft: #f1f8f5;\n --status-success-standard: #1d7f60;\n --status-warning-hard: #987100;\n --status-warning-soft: #fef5ea;\n --status-warning-standard: #b98900;\n\n /*TYPOGRAPHY RULES*/\n --ff-primary: 'Inter';\n --ff-secondary: 'Prompt';\n\n --lh-300: 1.25rem;\n --lh-400: 1.5rem;\n --lh-500: 1.625rem;\n --lh-600: 2rem;\n --lh-700: 2.75rem;\n --lh-800: 3.5rem;\n --lh-850: 4.375rem;\n --lh-900: 5.5rem;\n --fs-300: 0.875rem;\n --fs-400: 1rem;\n --fs-500: 1.125rem;\n --fs-600: 1.5rem;\n --fs-700: 2.25rem;\n --fs-800: 3rem;\n --fs-850: 3.75rem;\n --fs-900: 4.5rem;\n --fw-300: 300;\n --fw-400: 400;\n --fw-900: 700;\n}\n\n%reset-button {\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\n:host {\n display: inline-flex;\n align-items: center;\n --jump-button-color: #ffffff;\n --jump-button-color-disabled: #cbcbcb;\n --jump-button-background: var(--primary-standard);\n --jump-button-background-outline: transparent;\n --jump-button-color-hover: #ffffff;\n --jump-button-background-hover: var(--primary-hard);\n --jump-button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);\n --jump-button-padding: 1rem 1.25rem;\n\n button,\n a {\n @extend %reset-button;\n background-color: var(--jump-button-background);\n border-radius: var(--jump-button-border-radius);\n color: var(--jump-button-color);\n position: relative;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n font-weight: var(--fw-700, 700);\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n display: flex;\n align-items: center;\n gap: var(--jump-button-gap, 0.5rem);\n text-decoration: none;\n\n //TODO: internal padding of the button\n padding: var(--jump-button-padding);\n\n // TODO: gestire il focus con un outline\n &:hover {\n background-color: var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n\n &[data-variant='primary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--primary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--primary-hard);\n }\n\n &[data-variant='secondary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--secondary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--secondary-hard);\n }\n\n &[data-variant='neutral'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--neutral-grey-secondary);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--neutral-grey-primary);\n }\n\n &[data-variant='white'] {\n --jump-button-color: var(--neutral-grey-primary);\n --jump-button-background: var(--neutral-white);\n --jump-button-color-hover: var(--neutral-grey-primary);\n --jump-button-background-hover: var(--neutral-grey-background);\n }\n\n &[disabled] {\n --jump-button-background: var(--jump-button-color-disabled);\n --jump-button-background-hover: var(--jump-button-color-disabled);\n cursor: not-allowed;\n }\n\n &[data-pill] {\n border-radius: 100rem;\n }\n\n &[data-size='small'] {\n font-size: var(--fs-300, 0.875rem);\n line-height: var(--lh-300, 1.2);\n --jump-button-padding: 0.5rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n }\n\n &[data-size='large'] {\n font-size: var(--fs-500, 1.125rem);\n line-height: var(--lh-500, 1.4);\n --jump-button-padding: 1.125rem 1.5rem;\n }\n\n &[data-outline] {\n background-color: var(--jump-button-background-outline);\n border: 1px solid var(--jump-button-background);\n color: var(--jump-button-background);\n &:hover {\n background-color: var(--jump-button-background-hover);\n border: 1px solid var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n }\n\n &[data-text] {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background);\n padding: 0;\n &:hover {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background-hover);\n }\n }\n\n &[data-only-icon] {\n --jump-button-padding: 1.125rem;\n }\n &[data-only-icon][data-size='small'] {\n --jump-button-padding: 0.5rem;\n }\n &[data-only-icon][data-size='medium'] {\n --jump-button-padding: 1rem;\n }\n &[data-only-icon][data-size='large'] {\n --jump-button-padding: 1.125rem;\n }\n\n &.chat {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: hsla(133, 54%, 58%, 1);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: hsla(161, 63%, 31%, 1);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-button',\n styleUrl: 'jump-button.scss',\n shadow: true,\n})\nexport class JumpButton {\n /**\n * Set the button as disabled; Vale solo per i bottoni\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Indicates the variant of the button\n */\n @Prop() variant: 'primary'|'secondary'|'tertiary'|'neutral' = 'primary';\n\n /**\n * Indicates the button as outline\n */\n @Prop() outline: boolean = false;\n\n /**\n * Indicates the size of the button\n */\n @Prop() size: string = 'medium';\n\n /**\n * Indicates the button as pill\n */\n @Prop() pill: boolean = false;\n\n /**\n * Indicates the button as text\n */\n @Prop() text: boolean = false;\n\n /**\n * Indicates the button as only icon\n **/\n @Prop() onlyIcon: boolean = false;\n\n /**\n * Indicates if button becames a anchor\n **/\n @Prop() href: string;\n\n /**\n * Indicates the type of anchor's target \n **/\n @Prop() target: '_blank' | '_parent' | '_self' | '_top'\n\n /**\n * Indicates type button\n **/\n @Prop() type: 'button'|'submit'|'reset' = 'button';\n\n /**\n * Indicates the name that the sender button will send\n **/\n @Prop() name: string = undefined;\n\n /**\n * Indicates the value that the sender button will send\n **/\n @Prop() value: string = undefined;\n\n /**\n * Indicates the value of text alternative to an element that has no visible text on the screen\n **/\n @Prop() ariaLabel: string = undefined;\n\n /**\n * Indicates classes of the component\n **/\n @Prop() class: string = undefined;\n\n /**\n * Indicates classes of the component\n **/\n @Prop() buttonId: string = undefined;\n\n componentWillLoad() {\n this.target = this.href ? this.target : '_self';\n }\n\n render() {\n \n return (\n <Host>\n {this.href ? (\n <a href={this.href} id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} aria-label={this.ariaLabel} target={this.target}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot>}\n <slot name=\"suffix\"></slot>\n </a>\n ) : ( \n <button id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} aria-label={this.ariaLabel} type={this.type} name={this.name} value={this.value}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot> }\n <slot name=\"suffix\"></slot>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const jumpCardCss = "jump-card{display:flex;flex-direction:column;position:relative;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:#fff;--jump-card-color-dark:#fff;--jump-card-border-color:var(--neutral-grey-background);--jump-card-border-radius:6px;--jump-card-border-top-radius:1rem;--jump-card-top-border-body-radius:1.5rem 1rem;--jump-card-padding:1rem 1.25rem;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color);overflow:hidden}jump-card img,jump-card video{aspect-ratio:4/3;overflow:hidden;position:relative}jump-card .Content{padding:1.5rem 1rem;display:flex;flex-direction:column;gap:0.75rem;flex:1;background-color:var(--jump-card-background)}jump-card[dark]{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[dark] .Content{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[border]{border:1px solid var(--jump-card-border-color)}jump-card[border-radius]{border-radius:var(--jump-card-border-radius)}jump-card[top-border-content-radius]{border-radius:var(--jump-card-border-top-radius)}jump-card[top-border-content-radius] .Content{border-top-left-radius:var(--jump-card-border-top-radius);border-top-right-radius:var(--jump-card-border-top-radius);margin-top:-1rem;z-index:2}jump-card[boxed]{border-radius:var(--jump-card-border-radius)}jump-card[boxed] img,jump-card[boxed] video{border-radius:var(--jump-card-border-radius);background-color:var(--jump-card-background);margin:0.5rem 0.5rem 0}jump-card[horizontal]{flex-direction:row;gap:0.5rem;align-items:center;max-width:var(--jump-card-max-width-horizontal)}jump-card[rounded-media]{align-items:center;justify-content:center;text-align:center;background-color:transparent}jump-card[rounded-media] img,jump-card[rounded-media] video{background-color:transparent;border-radius:50%;aspect-ratio:1;
|
|
3
|
+
const jumpCardCss = ":root{--neutral-grey-background:#eeeeee;--neutral-grey-disabled:#cbcbcb;--neutral-grey-primary:#282828;--neutral-grey-secondary:#707070;--neutral-white:#ffffff;--primary-hard:#e75a50;--primary-soft:#ffeae9;--primary-standard:#fa7268;--secondary-hard:#435171;--secondary-soft:#dde3ed;--secondary-standard:#5e79ba;--status-danger-hard:#ba250a;--status-danger-soft:#fdd3d1;--status-danger-standard:#d72c0d;--status-interaction-hard:#22559e;--status-interaction-soft:#f2f7fe;--status-interaction-standard:#2c6ecb;--status-success-hard:#156048;--status-success-soft:#f1f8f5;--status-success-standard:#1d7f60;--status-warning-hard:#987100;--status-warning-soft:#fef5ea;--status-warning-standard:#b98900;--ff-primary:\"Inter\";--ff-secondary:\"Prompt\";--lh-300:1.25rem;--lh-400:1.5rem;--lh-500:1.625rem;--lh-600:2rem;--lh-700:2.75rem;--lh-800:3.5rem;--lh-850:4.375rem;--lh-900:5.5rem;--fs-300:0.875rem;--fs-400:1rem;--fs-500:1.125rem;--fs-600:1.5rem;--fs-700:2.25rem;--fs-800:3rem;--fs-850:3.75rem;--fs-900:4.5rem;--fw-300:300;--fw-400:400;--fw-900:700}jump-card{display:flex;flex-direction:column;position:relative;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:#fff;--jump-card-color-dark:#fff;--jump-card-border-color:var(--neutral-grey-background);--jump-card-border-radius:6px;--jump-card-border-top-radius:1rem;--jump-card-top-border-body-radius:1.5rem 1rem;--jump-card-padding:1rem 1.25rem;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color);overflow:hidden}jump-card img,jump-card video{aspect-ratio:4/3;overflow:hidden;position:relative;object-fit:cover}jump-card .Content{padding:1.5rem 1rem;display:flex;flex-direction:column;gap:0.75rem;flex:1;background-color:var(--jump-card-background)}jump-card[dark]{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[dark] .Content{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[border]{border:1px solid var(--jump-card-border-color)}jump-card[border-radius]{border-radius:var(--jump-card-border-radius)}jump-card[top-border-content-radius]{border-radius:var(--jump-card-border-top-radius)}jump-card[top-border-content-radius] .Content{border-top-left-radius:var(--jump-card-border-top-radius);border-top-right-radius:var(--jump-card-border-top-radius);margin-top:-1rem;z-index:2}jump-card[boxed]{border-radius:var(--jump-card-border-radius)}jump-card[boxed] img,jump-card[boxed] video{border-radius:var(--jump-card-border-radius);background-color:var(--jump-card-background);margin:0.5rem 0.5rem 0}jump-card[horizontal]{flex-direction:row;gap:0.5rem;align-items:center;max-width:var(--jump-card-max-width-horizontal)}jump-card[rounded-media]{align-items:center;justify-content:center;text-align:center;background-color:transparent}jump-card[rounded-media] img,jump-card[rounded-media] video{background-color:transparent;border-radius:50%;aspect-ratio:1;width:100%;flex:0 1 40%}jump-card[rounded-media] .Content{background-color:transparent;align-items:center}jump-card[rounded-media][horizontal]{text-align:left}jump-card[rounded-media][horizontal] .Content{align-items:flex-start}jump-card[shadow]{box-shadow:0px 2px 25px 0px hsla(0, 0%, 0%, 0.1)}";
|
|
4
4
|
const JumpCardStyle0 = jumpCardCss;
|
|
5
5
|
|
|
6
6
|
const AppCard = /*@__PURE__*/ proxyCustomElement(class AppCard extends HTMLElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-card.js","mappings":";;AAAA,MAAM,WAAW,GAAG,
|
|
1
|
+
{"file":"jump-card.js","mappings":";;AAAA,MAAM,WAAW,GAAG,8wGAA8wG,CAAC;AACnyG,uBAAe,WAAW;;MCMb,OAAO;;;;0BAI2B,KAAK;oBAKX,KAAK;;;4BAeG,KAAK;sCAKK,KAAK;qBAKtB,KAAK;4BAKE,KAAK;sBAKZ,EAAE;sBAKF,EAAE;wBAKA,EAAE;;IAE5C,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU,mBAAiB,IAAI,CAAC,YAAY,mBAAiB,IAAI,CAAC,YAAY,+BAA6B,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACvN,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,WAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAQ,GAAG,EAAE,EACpF,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM;YAC5B,aAAO,QAAQ,UACb,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE,EAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE,EAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,YAAY,GAAE,CACzC,GAAG,EAAE,EACf,4DAAK,KAAK,EAAC,SAAS,IAClB,6DAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/jump-card/jump-card.scss?tag=jump-card","src/components/jump-card/jump-card.tsx"],"sourcesContent":[":root {\n /*BASE COLOR RULES*/\n --neutral-grey-background: #eeeeee;\n --neutral-grey-disabled: #cbcbcb;\n --neutral-grey-primary: #282828;\n --neutral-grey-secondary: #707070;\n --neutral-white: #ffffff;\n --primary-hard: #e75a50;\n --primary-soft: #ffeae9;\n --primary-standard: #fa7268;\n --secondary-hard: #435171;\n --secondary-soft: #dde3ed;\n --secondary-standard: #5e79ba;\n --status-danger-hard: #ba250a;\n --status-danger-soft: #fdd3d1;\n --status-danger-standard: #d72c0d;\n --status-interaction-hard: #22559e;\n --status-interaction-soft: #f2f7fe;\n --status-interaction-standard: #2c6ecb;\n --status-success-hard: #156048;\n --status-success-soft: #f1f8f5;\n --status-success-standard: #1d7f60;\n --status-warning-hard: #987100;\n --status-warning-soft: #fef5ea;\n --status-warning-standard: #b98900;\n\n /*TYPOGRAPHY RULES*/\n --ff-primary: 'Inter';\n --ff-secondary: 'Prompt';\n\n --lh-300: 1.25rem;\n --lh-400: 1.5rem;\n --lh-500: 1.625rem;\n --lh-600: 2rem;\n --lh-700: 2.75rem;\n --lh-800: 3.5rem;\n --lh-850: 4.375rem;\n --lh-900: 5.5rem;\n --fs-300: 0.875rem;\n --fs-400: 1rem;\n --fs-500: 1.125rem;\n --fs-600: 1.5rem;\n --fs-700: 2.25rem;\n --fs-800: 3rem;\n --fs-850: 3.75rem;\n --fs-900: 4.5rem;\n --fw-300: 300;\n --fw-400: 400;\n --fw-900: 700;\n}\n\njump-card {\n display: flex;\n flex-direction: column;\n position: relative;\n // --jump-card-max-width: 320px;\n --jump-card-max-width-horizontal: 100%;\n --jump-card-color: var(--neutral-grey-primary);\n --jump-card-background: #fff;\n --jump-card-color-dark: #fff;\n --jump-card-border-color: var(--neutral-grey-background);\n --jump-card-border-radius: 6px;\n --jump-card-border-top-radius: 1rem;\n --jump-card-top-border-body-radius: 1.5rem 1rem;\n --jump-card-padding: 1rem 1.25rem;\n\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n line-height: var(--lh-400, 1.3);\n background-color: var(--jump-card-background);\n color: var(--jump-card-color);\n // max-width: var(--jump-card-max-width);\n overflow: hidden;\n\n img,\n video {\n aspect-ratio: 4/3;\n overflow: hidden;\n position: relative;\n object-fit: cover;\n }\n\n .Content {\n padding: 1.5rem 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n flex: 1;\n background-color: var(--jump-card-background);\n }\n\n &[dark] {\n background-color: var(--neutral-grey-primary);\n color: var(--jump-card-color-dark);\n\n .Content {\n background-color: var(--neutral-grey-primary);\n color: var(--jump-card-color-dark);\n }\n }\n\n &[border] {\n border: 1px solid var(--jump-card-border-color);\n }\n\n &[border-radius] {\n border-radius: var(--jump-card-border-radius);\n }\n\n &[top-border-content-radius] {\n border-radius: var(--jump-card-border-top-radius);\n\n .Content {\n border-top-left-radius: var(--jump-card-border-top-radius);\n border-top-right-radius: var(--jump-card-border-top-radius);\n margin-top: -1rem;\n z-index: 2;\n }\n }\n\n &[boxed] {\n border-radius: var(--jump-card-border-radius);\n\n img,\n video {\n border-radius: var(--jump-card-border-radius);\n background-color: var(--jump-card-background);\n margin: 0.5rem 0.5rem 0;\n }\n }\n\n &[horizontal] {\n flex-direction: row;\n gap: 0.5rem;\n align-items: center;\n max-width: var(--jump-card-max-width-horizontal);\n }\n\n &[rounded-media] {\n align-items: center;\n justify-content: center;\n text-align: center;\n background-color: transparent;\n\n img,\n video {\n background-color: transparent;\n border-radius: 50%;\n aspect-ratio: 1;\n width: 100%;\n flex: 0 1 40%;\n }\n\n .Content {\n background-color: transparent;\n align-items: center;\n }\n }\n\n &[rounded-media][horizontal] {\n text-align: left;\n\n .Content {\n align-items: flex-start;\n }\n }\n\n &[shadow] {\n box-shadow: 0px 2px 25px 0px hsla(0, 0%, 0%, 0.1);\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-card',\n styleUrl: 'jump-card.scss',\n shadow: false,\n})\nexport class AppCard {\n /**\n * Indicates if the card is horizontal\n */\n @Prop({reflect: true}) horizontal: boolean = false;\n\n /**\n * Indicates if the card is horizontal\n */\n @Prop({reflect: true}) dark: boolean = false;\n\n /**\n * Indicates if card has shadow\n */\n @Prop({reflect: true}) shadow: boolean;\n\n /**\n * Indicates if card has borders\n */\n @Prop({reflect: true}) border: boolean;\n\n /**\n * Indicates if borders of the entire card are rounded\n */\n @Prop({reflect: true}) borderRadius: boolean = false;\n\n /**\n * Indicates if border top of the body is rounded; Not compatible with boxed\n */\n @Prop({reflect: true}) topBorderContentRadius: boolean = false;\n\n /**\n * Indicates if media has padding; Not compatible with roundedMedia\n */\n @Prop({reflect: true}) boxed: boolean = false;\n\n /**\n * Indicates if image is rounded and there isnt a bg\n */\n @Prop({reflect: true}) roundedMedia: boolean = false;\n\n /**\n * Indicates the imgSrc of the card\n */\n @Prop({reflect: true}) imgSrc: string = '';\n\n /**\n * Indicates the img's alt of the card\n */\n @Prop({reflect: true}) imgAlt: string = '';\n\n /**\n * Indicates the videoSrc of the card\n */\n @Prop({reflect: true}) videoSrc: string = '';\n\n render() {\n return (\n <Host horizontal={this.horizontal} border-radius={this.borderRadius} rounded-media={this.roundedMedia} top-border-content-radius={this.topBorderContentRadius} boxed={this.boxed} shadow={this.shadow} border={this.border}>\n {this.imgSrc && !this.videoSrc ? <img src={this.imgSrc} alt={this.imgAlt}></img> : ''}\n {this.videoSrc && !this.imgSrc ? \n <video autoplay> \n <source src={this.videoSrc} type=\"video/mp4\"/> \n <source src={this.videoSrc} type=\"video/mov\"/> \n <source src={this.videoSrc} type=\"video/webm\"/> \n </video> : ''}\n <div class=\"Content\">\n <slot name=\"body\"></slot>\n <slot name=\"footer\"></slot>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -9,6 +9,7 @@ const JumpPagination$1 = /*@__PURE__*/ proxyCustomElement(class JumpPagination e
|
|
|
9
9
|
super();
|
|
10
10
|
this.__registerHost();
|
|
11
11
|
this.totalElements = undefined;
|
|
12
|
+
this.pagLabel = 'di';
|
|
12
13
|
this.currentPage = undefined;
|
|
13
14
|
this.lastPage = undefined;
|
|
14
15
|
this.labelElementsPerPage = 'Elementi per pagina';
|
|
@@ -19,15 +20,16 @@ const JumpPagination$1 = /*@__PURE__*/ proxyCustomElement(class JumpPagination e
|
|
|
19
20
|
}
|
|
20
21
|
render() {
|
|
21
22
|
var _a;
|
|
22
|
-
return (h(Host, { key: '
|
|
23
|
-
h("div", { class: "elementsPerPage" }, h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (h("option", { value: range }, range))))), h("div", { key: '
|
|
23
|
+
return (h(Host, { key: '97d153323192675905ef7efc310edd9544917194', class: "JumpPagination" }, h("div", { key: '706326dbd689f2250863df55db66a868deb98465', class: "JumpPagination__Wrapper" }, this.completeVersion &&
|
|
24
|
+
h("div", { class: "elementsPerPage" }, h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (h("option", { value: range }, range))))), h("div", { key: 'ba6b84fcfc0cb4d2f0f52767f2be99386a6f004c', class: "indicators" }, h("div", { key: 'b0786315ca18db1608bd07c5658ec37ae9931802', class: "elements" }, this.completeVersion ?
|
|
24
25
|
h("span", null, h("span", null, this.firstPage), " - ", h("span", null, this.currentPage), " di ", h("span", null, this.totalElements))
|
|
25
26
|
:
|
|
26
|
-
h("span", null, h("span", null, this.currentPage), " di ", h("span", null, this.lastPage))), h("div", { key: '
|
|
27
|
+
h("span", null, h("span", null, this.currentPage), " di ", h("span", null, this.lastPage))), h("div", { key: '93343a7729d7bbd8512d65bc1877041c25f77cdf', class: "arrow" }, this.showAdditionalChrevrons && h("jump-icon", { id: "first-page", name: "chevrons-left" }), h("jump-icon", { key: 'ed735fb41710b632485cc9a24151590842fbdc48', id: "prev-page", name: "chevron-left" }), h("jump-icon", { key: 'fffdbf1d84cee94bf0d2ab561cb36d4de82cc763', id: "next-page", name: "chevron-right" }), this.showAdditionalChrevrons && h("jump-icon", { id: "last-page", name: "chevrons-right" }))))));
|
|
27
28
|
}
|
|
28
29
|
static get style() { return JumpPaginationStyle0; }
|
|
29
30
|
}, [0, "jump-pagination", {
|
|
30
31
|
"totalElements": [514, "total-elements"],
|
|
32
|
+
"pagLabel": [513, "pag-label"],
|
|
31
33
|
"currentPage": [514, "current-page"],
|
|
32
34
|
"lastPage": [514, "last-page"],
|
|
33
35
|
"labelElementsPerPage": [513, "label-elements-per-page"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-pagination.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,o1BAAo1B,CAAC;AAC/2B,6BAAe,iBAAiB;;MCMnBA,gBAAc
|
|
1
|
+
{"file":"jump-pagination.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,o1BAAo1B,CAAC;AAC/2B,6BAAe,iBAAiB;;MCMnBA,gBAAc;;;;;wBAMiB,IAAI;;;oCAWU,qBAAqB;8BAKpB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;;+BAUtB,KAAK;uCAEG,KAAK;;IAEjE,MAAM;;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC1B,4DAAK,KAAK,EAAC,yBAAyB,IAChC,IAAI,CAAC,eAAe;YACpB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,aAAO,OAAO,EAAC,UAAU,IAAE,MAAA,IAAI,CAAC,oBAAoB,mCAAI,mBAAmB,CAAS,EAChF,cAAQ,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,IAClC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,MAC7B,cAAQ,KAAK,EAAE,KAAK,IAAG,KAAK,CAAU,CACvC,CAAC,CACK,CACT,EAER,4DAAK,KAAK,EAAC,YAAY,IACrB,4DAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,eAAe;YACnB,gBACE,gBAAO,IAAI,CAAC,SAAS,CAAQ,SAAG,gBAAO,IAAI,CAAC,WAAW,CAAQ,UAAI,gBAAO,IAAI,CAAC,aAAa,CAAQ,CAC/F;;gBAGP,gBACE,gBAAO,IAAI,CAAC,WAAW,CAAQ,UAAI,gBAAO,IAAI,CAAC,QAAQ,CAAQ,CAC1D,CAEL,EACN,4DAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,uBAAuB,IAAI,iBAAW,EAAE,EAAC,YAAY,EAAC,IAAI,EAAC,eAAe,GAAa,EAC7F,kEAAW,EAAE,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,GAAa,EAC1D,kEAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,eAAe,GAAa,EAC3D,IAAI,CAAC,uBAAuB,IAAI,iBAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,gBAAgB,GAAa,CAC1F,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpPagination"],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPagination {\n --pagination-label-color: var(--neutral-grey-secondary);\n --pagination-arrows-color: var(--neutral-grey-secondary);\n \n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n\n .elementsPerPage {\n display: flex;\n gap: 1rem;\n align-items: center;\n\n label {\n color: var(--pagination-label-color);\n font-size: 14px;\n font-weight: normal;\n }\n } \n \n .indicators {\n font-size: 16px;\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--pagination-label-color);\n\n .arrow {\n color: var(--pagination-arrows-color);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .elements {\n color: var(--pagination-label-color);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n \n }\n \n}","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination',\n styleUrl: 'jump-pagination.scss',\n shadow: false,\n})\nexport class JumpPagination {\n \n /* ---------------------- @PROPERTIES ------------------------- */\n\n @Prop({ reflect: true }) totalElements: number;\n\n @Prop({reflect: true}) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n /**\n * \n */\n @Prop({ reflect: true }) currentPage: number;\n @Prop({ reflect: true }) lastPage: number; \n\n /**\n * Label for the elements per page select\n */\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /**\n * Values for the elements per page select\n */\n @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n /**\n * Indicates the first page/product of the list\n */\n @Prop({ reflect: true }) firstPage: number;\n\n /**\n * If true, the component will show the complete version of the pagination, with elements informations\n */\n @Prop({ reflect: true }) completeVersion: boolean = false;\n\n @Prop({ reflect: true }) showAdditionalChrevrons: boolean = false;\n\n render() {\n return (\n <Host class=\"JumpPagination\">\n <div class=\"JumpPagination__Wrapper\">\n { this.completeVersion && \n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\">\n {this.elementsRanges.map((range) => (\n <option value={range}>{range}</option>\n ))}\n </select>\n </div> \n }\n <div class=\"indicators\"> \n <div class=\"elements\">\n {this.completeVersion ?\n <span>\n <span>{this.firstPage}</span> - <span>{this.currentPage}</span> di <span>{this.totalElements}</span>\n </span>\n \n :\n <span>\n <span>{this.currentPage}</span> di <span>{this.lastPage}</span>\n </span>\n }\n </div>\n <div class=\"arrow\">\n {this.showAdditionalChrevrons && <jump-icon id=\"first-page\" name=\"chevrons-left\"></jump-icon>}\n <jump-icon id=\"prev-page\" name=\"chevron-left\"></jump-icon>\n <jump-icon id=\"next-page\" name=\"chevron-right\"></jump-icon>\n {this.showAdditionalChrevrons && <jump-icon id=\"last-page\" name=\"chevrons-right\"></jump-icon>}\n </div> \n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const NAMESPACE = 'jump-design-system';
|
|
2
|
-
const BUILD = /* jump-design-system */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad:
|
|
2
|
+
const BUILD = /* jump-design-system */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: false, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: false, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: false };
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Virtual DOM patching algorithm based on Snabbdom by
|
|
@@ -9,6 +9,7 @@ const BUILD = /* jump-design-system */ { allRenderFn: true, appendChildSlotFix:
|
|
|
9
9
|
*
|
|
10
10
|
* Modified for Stencil's renderer and slot projection
|
|
11
11
|
*/
|
|
12
|
+
let scopeId;
|
|
12
13
|
let contentRef;
|
|
13
14
|
let hostTagName;
|
|
14
15
|
let useNativeShadowDom = false;
|
|
@@ -46,6 +47,7 @@ const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
|
|
|
46
47
|
* Don't add values to these!!
|
|
47
48
|
*/
|
|
48
49
|
const EMPTY_OBJ = {};
|
|
50
|
+
const isDef = (v) => v != null;
|
|
49
51
|
/**
|
|
50
52
|
* Check whether a value is a 'complex type', defined here as an object or a
|
|
51
53
|
* function.
|
|
@@ -298,8 +300,20 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
|
|
|
298
300
|
const attachStyles = (hostRef) => {
|
|
299
301
|
const cmpMeta = hostRef.$cmpMeta$;
|
|
300
302
|
const elm = hostRef.$hostElement$;
|
|
303
|
+
const flags = cmpMeta.$flags$;
|
|
301
304
|
const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
|
|
302
|
-
addStyle(elm.getRootNode(), cmpMeta);
|
|
305
|
+
const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
|
|
306
|
+
if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
|
|
307
|
+
// only required when we're NOT using native shadow dom (slot)
|
|
308
|
+
// or this browser doesn't support native shadow dom
|
|
309
|
+
// and this host element was NOT created with SSR
|
|
310
|
+
// let's pick out the inner content for slot projection
|
|
311
|
+
// create a node to represent where the original
|
|
312
|
+
// content was first placed, which is useful later on
|
|
313
|
+
// DOM WRITE!!
|
|
314
|
+
elm['s-sc'] = scopeId;
|
|
315
|
+
elm.classList.add(scopeId + '-h');
|
|
316
|
+
}
|
|
303
317
|
endAttachStyles();
|
|
304
318
|
};
|
|
305
319
|
const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
|
|
@@ -431,6 +445,10 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
431
445
|
// remember for later we need to check to relocate nodes
|
|
432
446
|
checkSlotRelocate = true;
|
|
433
447
|
if (newVNode.$tag$ === 'slot') {
|
|
448
|
+
if (scopeId) {
|
|
449
|
+
// scoped css needs to add its scoped id to the parent element
|
|
450
|
+
parentElm.classList.add(scopeId + '-s');
|
|
451
|
+
}
|
|
434
452
|
newVNode.$flags$ |= newVNode.$children$
|
|
435
453
|
? // slot element has fallback content
|
|
436
454
|
2 /* VNODE_FLAGS.isSlotFallback */
|
|
@@ -456,10 +474,15 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
456
474
|
{
|
|
457
475
|
updateElement(null, newVNode, isSvgMode);
|
|
458
476
|
}
|
|
477
|
+
if (isDef(scopeId) && elm['s-si'] !== scopeId) {
|
|
478
|
+
// if there is a scopeId and this is the initial render
|
|
479
|
+
// then let's add the scopeId as a css class
|
|
480
|
+
elm.classList.add((elm['s-si'] = scopeId));
|
|
481
|
+
}
|
|
459
482
|
if (newVNode.$children$) {
|
|
460
483
|
for (i = 0; i < newVNode.$children$.length; ++i) {
|
|
461
484
|
// create the node
|
|
462
|
-
childNode = createElm(oldParentVNode, newVNode, i);
|
|
485
|
+
childNode = createElm(oldParentVNode, newVNode, i, elm);
|
|
463
486
|
// return node could have been null
|
|
464
487
|
if (childNode) {
|
|
465
488
|
// append our new node
|
|
@@ -543,9 +566,12 @@ const putBackInOriginalLocation = (parentElm, recursive) => {
|
|
|
543
566
|
const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
|
|
544
567
|
let containerElm = ((parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
|
|
545
568
|
let childNode;
|
|
569
|
+
if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
|
|
570
|
+
containerElm = containerElm.shadowRoot;
|
|
571
|
+
}
|
|
546
572
|
for (; startIdx <= endIdx; ++startIdx) {
|
|
547
573
|
if (vnodes[startIdx]) {
|
|
548
|
-
childNode = createElm(null, parentVNode, startIdx);
|
|
574
|
+
childNode = createElm(null, parentVNode, startIdx, parentElm);
|
|
549
575
|
if (childNode) {
|
|
550
576
|
vnodes[startIdx].$elm$ = childNode;
|
|
551
577
|
containerElm.insertBefore(childNode, referenceNode(before) );
|
|
@@ -796,7 +822,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
|
|
|
796
822
|
elmToMove = oldCh[idxInOld];
|
|
797
823
|
if (elmToMove.$tag$ !== newStartVnode.$tag$) {
|
|
798
824
|
// the tag doesn't match so we'll need a new DOM element
|
|
799
|
-
node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
|
|
825
|
+
node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
|
|
800
826
|
}
|
|
801
827
|
else {
|
|
802
828
|
patch(elmToMove, newStartVnode, isInitialRender);
|
|
@@ -812,7 +838,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
|
|
|
812
838
|
// the key of the first new child OR the build is not using `key`
|
|
813
839
|
// attributes at all. In either case we need to create a new element
|
|
814
840
|
// for the new node.
|
|
815
|
-
node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
|
|
841
|
+
node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
|
|
816
842
|
newStartVnode = newCh[++newStartIdx];
|
|
817
843
|
}
|
|
818
844
|
if (node) {
|
|
@@ -1165,7 +1191,10 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
|
|
|
1165
1191
|
rootVnode.$tag$ = null;
|
|
1166
1192
|
rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
|
|
1167
1193
|
hostRef.$vnode$ = rootVnode;
|
|
1168
|
-
rootVnode.$elm$ = oldVNode.$elm$ = (hostElm);
|
|
1194
|
+
rootVnode.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm );
|
|
1195
|
+
{
|
|
1196
|
+
scopeId = hostElm['s-sc'];
|
|
1197
|
+
}
|
|
1169
1198
|
useNativeShadowDom = (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
|
|
1170
1199
|
{
|
|
1171
1200
|
contentRef = hostElm['s-cr'];
|
|
@@ -1320,6 +1349,16 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
|
|
|
1320
1349
|
// 2. If all functions added to the queue are asynchronous they'll all be
|
|
1321
1350
|
// called in order after `dispatchHooks` exits.
|
|
1322
1351
|
let maybePromise;
|
|
1352
|
+
if (isInitialLoad) {
|
|
1353
|
+
{
|
|
1354
|
+
// If `componentWillLoad` returns a `Promise` then we want to wait on
|
|
1355
|
+
// whatever's going on in that `Promise` before we launch into
|
|
1356
|
+
// rendering the component, doing other lifecycle stuff, etc. So
|
|
1357
|
+
// in that case we assign the returned promise to the variable we
|
|
1358
|
+
// declared above to hold a possible 'queueing' Promise
|
|
1359
|
+
maybePromise = safeCall(instance, 'componentWillLoad');
|
|
1360
|
+
}
|
|
1361
|
+
}
|
|
1323
1362
|
endSchedule();
|
|
1324
1363
|
return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
|
|
1325
1364
|
};
|
|
@@ -1884,6 +1923,17 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
1884
1923
|
super(self);
|
|
1885
1924
|
self = this;
|
|
1886
1925
|
registerHost(self, cmpMeta);
|
|
1926
|
+
if (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
|
|
1927
|
+
// this component is using shadow dom
|
|
1928
|
+
// and this browser supports shadow dom
|
|
1929
|
+
// add the read-only property "shadowRoot" to the host element
|
|
1930
|
+
// adding the shadow root build conditionals to minimize runtime
|
|
1931
|
+
{
|
|
1932
|
+
{
|
|
1933
|
+
self.attachShadow({ mode: 'open' });
|
|
1934
|
+
}
|
|
1935
|
+
}
|
|
1936
|
+
}
|
|
1887
1937
|
}
|
|
1888
1938
|
connectedCallback() {
|
|
1889
1939
|
if (appLoadFallback) {
|
|
@@ -2102,4 +2152,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
|
|
|
2102
2152
|
|
|
2103
2153
|
export { Host as H, bootstrapLazy as b, h, promiseResolve as p, registerInstance as r, setNonce as s };
|
|
2104
2154
|
|
|
2105
|
-
//# sourceMappingURL=index-
|
|
2155
|
+
//# sourceMappingURL=index-d09b8a38.js.map
|