@zanichelli/albe-web-components 18.3.2-rc1 → 18.3.2
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/CHANGELOG.md +9 -0
- package/dist/cjs/z-info-reveal.cjs.entry.js +1 -1
- package/dist/cjs/z-info-reveal.cjs.entry.js.map +1 -1
- package/dist/cjs/z-pagination.cjs.entry.js +7 -10
- package/dist/cjs/z-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/z-toast-notification.cjs.entry.js +7 -43
- package/dist/cjs/z-toast-notification.cjs.entry.js.map +1 -1
- package/dist/collection/components/z-info-reveal/styles.css +2 -5
- package/dist/collection/components/z-pagination/index.js +6 -11
- package/dist/collection/components/z-pagination/index.js.map +1 -1
- package/dist/collection/components/z-pagination/index.stories.js +13 -31
- package/dist/collection/components/z-pagination/index.stories.js.map +1 -1
- package/dist/collection/components/z-pagination/styles.css +2 -4
- package/dist/collection/components/z-toast-notification/index.js +7 -43
- package/dist/collection/components/z-toast-notification/index.js.map +1 -1
- package/dist/collection/components/z-toast-notification/index.stories.js +30 -2
- package/dist/collection/components/z-toast-notification/index.stories.js.map +1 -1
- package/dist/collection/components/z-toast-notification/styles.css +25 -34
- package/dist/components/index10.js +1 -1
- package/dist/components/index10.js.map +1 -1
- package/dist/components/z-pagination.js +7 -10
- package/dist/components/z-pagination.js.map +1 -1
- package/dist/components/z-toast-notification.js +8 -44
- package/dist/components/z-toast-notification.js.map +1 -1
- package/dist/esm/z-info-reveal.entry.js +1 -1
- package/dist/esm/z-info-reveal.entry.js.map +1 -1
- package/dist/esm/z-pagination.entry.js +7 -10
- package/dist/esm/z-pagination.entry.js.map +1 -1
- package/dist/esm/z-toast-notification.entry.js +8 -44
- package/dist/esm/z-toast-notification.entry.js.map +1 -1
- package/dist/types/components/z-pagination/index.d.ts +0 -2
- package/dist/types/components/z-pagination/index.stories.d.ts +2 -64
- package/dist/types/components/z-toast-notification/index.d.ts +1 -10
- package/dist/types/components/z-toast-notification/index.stories.d.ts +10 -2
- package/dist/types/components.d.ts +0 -8
- package/dist/web-components-library/p-1dd6dff4.entry.js +7 -0
- package/dist/web-components-library/p-1dd6dff4.entry.js.map +1 -0
- package/dist/web-components-library/p-7df942c9.entry.js +2 -0
- package/dist/web-components-library/p-7df942c9.entry.js.map +1 -0
- package/dist/web-components-library/{p-fbbacad0.entry.js → p-b705fba3.entry.js} +2 -2
- package/dist/web-components-library/p-b705fba3.entry.js.map +1 -0
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/p-1dd6dff4.entry.js +7 -0
- package/www/build/p-1dd6dff4.entry.js.map +1 -0
- package/www/build/{p-792b81fd.js → p-40433daa.js} +1 -1
- package/www/build/p-7df942c9.entry.js +2 -0
- package/www/build/p-7df942c9.entry.js.map +1 -0
- package/www/build/{p-fbbacad0.entry.js → p-b705fba3.entry.js} +2 -2
- package/www/build/p-b705fba3.entry.js.map +1 -0
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/web-components-library/p-180eabf4.entry.js +0 -2
- package/dist/web-components-library/p-180eabf4.entry.js.map +0 -1
- package/dist/web-components-library/p-72c07bbd.entry.js +0 -7
- package/dist/web-components-library/p-72c07bbd.entry.js.map +0 -1
- package/dist/web-components-library/p-fbbacad0.entry.js.map +0 -1
- package/www/build/p-180eabf4.entry.js +0 -2
- package/www/build/p-180eabf4.entry.js.map +0 -1
- package/www/build/p-72c07bbd.entry.js +0 -7
- package/www/build/p-72c07bbd.entry.js.map +0 -1
- package/www/build/p-fbbacad0.entry.js.map +0 -1
|
@@ -142,10 +142,10 @@
|
|
|
142
142
|
|
|
143
143
|
:host > #external-container {
|
|
144
144
|
display: flex;
|
|
145
|
+
min-height: calc(var(--space-unit) * 8.5);
|
|
145
146
|
box-sizing: border-box;
|
|
146
|
-
align-items: flex-start;
|
|
147
147
|
justify-content: space-between;
|
|
148
|
-
padding: calc(var(--space-unit) * 2);
|
|
148
|
+
padding: calc(var(--space-unit) * 2) 14px calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);
|
|
149
149
|
border-radius: var(--border-size-large);
|
|
150
150
|
box-shadow: var(--shadow-3);
|
|
151
151
|
font-family: var(--font-family-sans);
|
|
@@ -154,58 +154,50 @@
|
|
|
154
154
|
letter-spacing: 0.16px;
|
|
155
155
|
}
|
|
156
156
|
|
|
157
|
-
:host > #external-container
|
|
158
|
-
align-self: flex-start;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
:host > #external-container.several-lines-padding {
|
|
162
|
-
padding: calc(var(--space-unit) * 2);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
:host > #external-container > #flex-container {
|
|
157
|
+
:host > #external-container > #inner-container {
|
|
166
158
|
display: flex;
|
|
167
159
|
width: 100%;
|
|
168
|
-
flex-
|
|
169
|
-
align-items: center;
|
|
160
|
+
flex-direction: column;
|
|
170
161
|
justify-content: space-between;
|
|
171
162
|
}
|
|
172
163
|
|
|
173
|
-
:host > #external-container #text {
|
|
174
|
-
|
|
164
|
+
:host > #external-container #inner-container #text {
|
|
165
|
+
padding: var(--space-unit) 0;
|
|
175
166
|
color: var(--color-text-inverse);
|
|
176
167
|
letter-spacing: 0.16px;
|
|
177
168
|
line-height: 20px;
|
|
178
|
-
text-align:
|
|
169
|
+
text-align: start;
|
|
179
170
|
}
|
|
180
171
|
|
|
181
|
-
:host > #external-container #text > .title {
|
|
172
|
+
:host > #external-container #inner-container #text > .title {
|
|
182
173
|
margin-right: calc(var(--space-unit) / 2);
|
|
183
|
-
font-weight:
|
|
174
|
+
font-weight: var(--font-sb);
|
|
184
175
|
}
|
|
185
176
|
|
|
186
|
-
:host > #external-container
|
|
187
|
-
margin-top:
|
|
177
|
+
:host > #external-container #inner-container ::slotted([slot="button"]) {
|
|
178
|
+
margin-top: var(--space-unit);
|
|
188
179
|
}
|
|
189
180
|
|
|
190
181
|
:host > #external-container #icon {
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
align-items: center;
|
|
194
|
-
margin-left: calc(var(--space-unit) * 2);
|
|
182
|
+
padding-top: var(--space-unit);
|
|
183
|
+
margin: 0 calc(var(--space-unit) / 4);
|
|
195
184
|
cursor: pointer;
|
|
196
185
|
fill: var(--color-inverse-icon);
|
|
197
186
|
}
|
|
198
187
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
188
|
+
:host > #external-container #icon:focus-within {
|
|
189
|
+
margin: 0;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
:host > #external-container #icon z-icon {
|
|
193
|
+
margin: 0 0 0 14px;
|
|
202
194
|
}
|
|
203
195
|
|
|
204
|
-
z-icon:focus {
|
|
196
|
+
:host > #external-container #icon z-icon:focus {
|
|
197
|
+
display: inline-block;
|
|
205
198
|
padding: calc(var(--space-unit) / 4);
|
|
206
199
|
border-radius: 50%;
|
|
207
200
|
box-shadow: var(--shadow-focus-primary);
|
|
208
|
-
outline: none !important;
|
|
209
201
|
}
|
|
210
202
|
|
|
211
203
|
:host > #external-container.dark {
|
|
@@ -252,19 +244,18 @@ z-icon:focus {
|
|
|
252
244
|
max-width: 50vw;
|
|
253
245
|
}
|
|
254
246
|
|
|
255
|
-
:host > #external-container
|
|
256
|
-
flex-
|
|
247
|
+
:host > #external-container #inner-container {
|
|
248
|
+
flex-direction: row;
|
|
257
249
|
}
|
|
258
250
|
|
|
259
|
-
:host > #external-container #
|
|
260
|
-
|
|
251
|
+
:host > #external-container #inner-container ::slotted([slot="button"]) {
|
|
252
|
+
margin: 0 0 0 calc(var(--space-unit) * 2);
|
|
261
253
|
}
|
|
262
254
|
}
|
|
263
255
|
|
|
264
256
|
/* Wide breakpoint */
|
|
265
257
|
@media (min-width: 1366px) {
|
|
266
258
|
:host {
|
|
267
|
-
width: unset;
|
|
268
259
|
max-width: 33vw;
|
|
269
260
|
}
|
|
270
261
|
}
|
|
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
|
|
|
2
2
|
import { H as InfoRevealPosition, e as ControlSize } from './index2.js';
|
|
3
3
|
import { d as defineCustomElement$1 } from './index9.js';
|
|
4
4
|
|
|
5
|
-
const stylesCss = ":host{--z-info-reveal-panel-width:384px;--trigger-size:44px;position:relative}:host *{box-sizing:border-box}button{--trigger-icon-size:calc(var(--trigger-size) / 2);display:flex;align-items:center;justify-content:center;padding:0;border:none;background-color:transparent;cursor:pointer;font-family:inherit;letter-spacing:inherit}button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-info-reveal-trigger{min-width:var(--trigger-size);height:var(--trigger-size);padding:calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);background-color:var(--color-surface05);border-radius:var(--border-radius);color:var(--color-text-inverse);column-gap:var(--space-unit);font-weight:var(--font-sb);line-height:1rem}:host([size=\"big\"]) .z-info-reveal-trigger{font-size:var(--font-size-2)}:host([size=\"small\"]) .z-info-reveal-trigger{--trigger-size:36px;font-size:var(--font-size-2)}:host([size=\"x-small\"]) .z-info-reveal-trigger{--trigger-size:32px;padding:var(--space-unit);font-size:var(--font-size-1)}:host>.z-info-reveal-trigger z-icon{--z-icon-width:var(--trigger-icon-size);--z-icon-height:var(--trigger-icon-size);display:flex;fill:var(--color-inverse-icon)}:host([size=\"small\"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:var(--trigger-icon-size-small, 18px)}:host([size=\"x-small\"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:var(--trigger-icon-size-x-small, 16px)}.z-info-reveal-panel{position:absolute;z-index:
|
|
5
|
+
const stylesCss = ":host{--z-info-reveal-panel-width:384px;--trigger-size:44px;position:relative}:host *{box-sizing:border-box}button{--trigger-icon-size:calc(var(--trigger-size) / 2);display:flex;align-items:center;justify-content:center;padding:0;border:none;background-color:transparent;cursor:pointer;font-family:inherit;letter-spacing:inherit}button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-info-reveal-trigger{min-width:var(--trigger-size);height:var(--trigger-size);padding:calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);background-color:var(--color-surface05);border-radius:var(--border-radius);color:var(--color-text-inverse);column-gap:var(--space-unit);font-weight:var(--font-sb);line-height:1rem}:host([size=\"big\"]) .z-info-reveal-trigger{font-size:var(--font-size-2)}:host([size=\"small\"]) .z-info-reveal-trigger{--trigger-size:36px;font-size:var(--font-size-2)}:host([size=\"x-small\"]) .z-info-reveal-trigger{--trigger-size:32px;padding:var(--space-unit);font-size:var(--font-size-1)}:host>.z-info-reveal-trigger z-icon{--z-icon-width:var(--trigger-icon-size);--z-icon-height:var(--trigger-icon-size);display:flex;fill:var(--color-inverse-icon)}:host([size=\"small\"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:var(--trigger-icon-size-small, 18px)}:host([size=\"x-small\"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:var(--trigger-icon-size-x-small, 16px)}.z-info-reveal-panel{position:absolute;z-index:19;display:flex;width:var(--z-info-reveal-panel-width);height:fit-content;align-items:flex-start;padding:calc(var(--space-unit) * 1.5);background-color:var(--color-surface05);border-radius:var(--border-radius);box-shadow:var(--shadow-4);color:var(--color-text-inverse);column-gap:var(--space-unit)}.z-info-reveal-panel[hidden]{display:none}:host([position=\"top_left\"]) .z-info-reveal-panel,:host([position=\"top_right\"]) .z-info-reveal-panel{top:0}:host([position=\"bottom_left\"]) .z-info-reveal-panel,:host([position=\"bottom_right\"]) .z-info-reveal-panel{bottom:0}:host([position=\"top_right\"]) .z-info-reveal-panel,:host([position=\"bottom_right\"]) .z-info-reveal-panel{right:0}:host([position=\"top_left\"]) .z-info-reveal-panel,:host([position=\"bottom_left\"]) .z-info-reveal-panel{left:0}.z-info-reveal-panel .z-info-reveal-close{margin-left:auto}.z-info-reveal-panel z-icon{fill:var(--color-inverse-icon)}@media (max-width: 767px){.z-info-reveal-panel{top:auto !important;bottom:auto !important;width:calc(var(--z-info-reveal-panel-width) - (var(--grid-margin) * 4)) !important;margin-top:calc(var(--trigger-size) * -1)}}";
|
|
6
6
|
const ZInfoRevealStyle0 = stylesCss;
|
|
7
7
|
|
|
8
8
|
const ZInfoReveal = /*@__PURE__*/ proxyCustomElement(class ZInfoReveal extends HTMLElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"index10.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"file":"index10.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,yiFAAyiF,CAAC;AAC5jF,0BAAe,SAAS;;MCgBX,WAAW;;;;;oBAGd,mBAAmB;wBAQK,kBAAkB,CAAC,YAAY;;yBAQnD,4BAA4B;oBAInB,WAAW,CAAC,GAAG;oBAI7B,KAAK;;;;;IAYZ,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO;SACR;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/C,MAAM,UAAU,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC;QAC9G,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;;QAEvD,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAC/B,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,UAAU,CACnF,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,cAAc,IAAI,CAAC;KACnD;;;;IAKO,WAAW;QACjB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;KACxB;;;;IAKO,UAAU;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;IAGD,eAAe,CAAC,KAAoB;QAClC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE;YACvC,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACnB,+DACE,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,mBACrC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,mBAC7B,qBAAqB,IAElC,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACxC,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC7D,EACT,4DACE,KAAK,EAAC,qBAAqB,EAC3B,EAAE,EAAC,qBAAqB,EACxB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,IAElB,8DAAa,EACb,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,8BAA8B,IAEzC,+DAAQ,IAAI,EAAC,UAAU,GAAG,CACnB,CACL,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-info-reveal/styles.css?tag=z-info-reveal&encapsulation=shadow","src/components/z-info-reveal/index.tsx"],"sourcesContent":[":host {\n --z-info-reveal-panel-width: 384px; /* defaults half the size of the mobile breakpoint */\n --trigger-size: 44px;\n\n position: relative;\n}\n\n:host * {\n box-sizing: border-box;\n}\n\nbutton {\n --trigger-icon-size: calc(var(--trigger-size) / 2);\n\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n background-color: transparent;\n cursor: pointer;\n font-family: inherit;\n letter-spacing: inherit;\n}\n\nbutton:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-info-reveal-trigger {\n min-width: var(--trigger-size);\n height: var(--trigger-size);\n padding: calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);\n background-color: var(--color-surface05);\n border-radius: var(--border-radius);\n color: var(--color-text-inverse);\n column-gap: var(--space-unit);\n font-weight: var(--font-sb);\n line-height: 1rem;\n}\n\n:host([size=\"big\"]) .z-info-reveal-trigger {\n font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .z-info-reveal-trigger {\n --trigger-size: 36px;\n\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .z-info-reveal-trigger {\n --trigger-size: 32px;\n\n padding: var(--space-unit);\n font-size: var(--font-size-1);\n}\n\n:host > .z-info-reveal-trigger z-icon {\n --z-icon-width: var(--trigger-icon-size);\n --z-icon-height: var(--trigger-icon-size);\n\n display: flex;\n fill: var(--color-inverse-icon);\n}\n\n:host([size=\"small\"]) > .z-info-reveal-trigger z-icon {\n --trigger-icon-size: var(--trigger-icon-size-small, 18px);\n}\n\n:host([size=\"x-small\"]) > .z-info-reveal-trigger z-icon {\n --trigger-icon-size: var(--trigger-icon-size-x-small, 16px);\n}\n\n.z-info-reveal-panel {\n position: absolute;\n z-index: 19;\n display: flex;\n width: var(--z-info-reveal-panel-width);\n height: fit-content;\n align-items: flex-start;\n padding: calc(var(--space-unit) * 1.5);\n background-color: var(--color-surface05);\n border-radius: var(--border-radius);\n box-shadow: var(--shadow-4);\n color: var(--color-text-inverse);\n column-gap: var(--space-unit);\n}\n\n.z-info-reveal-panel[hidden] {\n display: none;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"top_right\"]) .z-info-reveal-panel {\n top: 0;\n}\n\n:host([position=\"bottom_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n bottom: 0;\n}\n\n:host([position=\"top_right\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n right: 0;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_left\"]) .z-info-reveal-panel {\n left: 0;\n}\n\n.z-info-reveal-panel .z-info-reveal-close {\n margin-left: auto;\n}\n\n.z-info-reveal-panel z-icon {\n fill: var(--color-inverse-icon);\n}\n\n@media (max-width: 767px) {\n .z-info-reveal-panel {\n top: auto !important;\n bottom: auto !important;\n width: calc(var(--z-info-reveal-panel-width) - (var(--grid-margin) * 4)) !important;\n margin-top: calc(var(--trigger-size) * -1);\n }\n}\n","import {Component, Element, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../beans\";\n\n/**\n * Info reveal component.\n *\n * @slot - content of the info panel.\n * @cssprop --z-info-reveal-panel-width - Width of the info panel.\n * @cssprop --trigger-icon-size - Size of the trigger icon for big size.\n * @cssprop --trigger-icon-size-small - Size of the trigger icon for small size.\n * @cssprop --trigger-icon-size-x-small - Size of the trigger icon for x-small size.\n */\n@Component({\n tag: \"z-info-reveal\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZInfoReveal {\n /** Name of the icon for the trigger button */\n @Prop()\n icon? = \"informationsource\";\n\n /**\n * The position of the z-info-reveal in the page. This helps to correctly place the info panel.\n * The panel will grow in the opposite direction of the position.\n * For example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.\n */\n @Prop({reflect: true})\n position?: InfoRevealPosition = InfoRevealPosition.BOTTOM_RIGHT;\n\n /** Label of the trigger button. */\n @Prop()\n label?: string;\n\n /** Aria label of the trigger button. It will be only used when `label` prop is empty. */\n @Prop()\n ariaLabel = \"Apri pannello informazioni\";\n\n /** Size of the trigger button */\n @Prop({reflect: true})\n size?: ControlSize = ControlSize.BIG;\n\n /** Whether the info panel is open. */\n @State()\n open = false;\n\n @Element() host: HTMLZInfoRevealElement;\n\n private panel: HTMLDivElement;\n\n /**\n * Adjust the position of the info panel to prevent exiting the viewport.\n */\n @Watch(\"position\")\n @Watch(\"open\")\n @Listen(\"resize\", {target: \"window\", passive: true})\n adjustPanelPosition(): void {\n if (!this.open || !this.panel) {\n return;\n }\n\n const rect = this.host.getBoundingClientRect();\n const gridMargin = parseInt(getComputedStyle(document.documentElement).getPropertyValue(\"--grid-margin\"), 10);\n const pageWidth = document.documentElement.offsetWidth;\n // Available space for the info panel to grow towards the edge of the page, based on the `position` prop.\n const availableSpace = Math.round(\n (this.position.includes(\"left\") ? pageWidth - rect.left : rect.right) - gridMargin\n );\n this.panel.style.maxWidth = `${availableSpace}px`;\n }\n\n /**\n * Toggle the open state of the info panel.\n */\n private togglePanel(): void {\n this.open = !this.open;\n }\n\n /**\n * Close the info panel.\n */\n private closePanel(): void {\n this.open = false;\n }\n\n @Listen(\"keydown\", {target: \"window\", capture: true})\n handleEscapeKey(event: KeyboardEvent): void {\n if (event.key === \"Escape\" && this.open) {\n this.closePanel();\n }\n }\n\n render(): HTMLZInfoRevealElement {\n return (\n <Host open={this.open}>\n <button\n class=\"z-info-reveal-trigger\"\n type=\"button\"\n onClick={this.togglePanel.bind(this)}\n aria-label={!this.label ? this.ariaLabel : undefined}\n aria-expanded={this.open ? \"true\" : \"false\"}\n aria-controls=\"z-info-reveal-panel\"\n >\n {this.icon && <z-icon name={this.icon} />}\n {this.label && <span class=\"z-info-reveal-label\">{this.label}</span>}\n </button>\n <div\n class=\"z-info-reveal-panel\"\n id=\"z-info-reveal-panel\"\n ref={(el) => (this.panel = el)}\n hidden={!this.open}\n >\n <slot></slot>\n <button\n class=\"z-info-reveal-close\"\n type=\"button\"\n onClick={this.closePanel.bind(this)}\n aria-label=\"Chiudi pannello informazioni\"\n >\n <z-icon name=\"multiply\" />\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './index9.js';
|
|
|
5
5
|
import { d as defineCustomElement$3 } from './index11.js';
|
|
6
6
|
import { d as defineCustomElement$2 } from './index12.js';
|
|
7
7
|
|
|
8
|
-
const stylesCss = "z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100
|
|
8
|
+
const stylesCss = "z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100%;display:flex;max-width:100%;flex-flow:column wrap;font-family:var(--font-family-sans);font-weight:var(--font-rg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4)}z-pagination,z-pagination *{box-sizing:border-box}z-pagination button{height:100%}z-pagination z-icon{fill:var(--color-primary01-icon)}z-pagination *:disabled z-icon{fill:var(--color-disabled03)}z-pagination .page-label{margin-right:calc(var(--space-unit) * 3);color:var(--color-default-text)}z-pagination .pagination-bar{display:flex;max-width:100%;height:48px;align-items:center}z-pagination .pagination-bar button{display:flex;align-items:center;justify-content:center;border:none;margin:0;background-color:var(--color-background);color:var(--color-primary01);cursor:pointer;font-family:inherit;font-weight:inherit;transition:background-color 0.15s ease-out,\n color 0.15s ease-out,\n border-bottom-color 0.15s ease-out,\n font-size 0.15s ease-in-out,\n font-weight 0.15s ease-in-out}z-pagination .pagination-bar button:focus-visible{background-color:var(--color-surface01);outline:none}z-pagination .pagination-bar .pagination-button{padding:calc(var(--space-unit) * 2);font-weight:var(--font-sb);text-transform:uppercase;white-space:nowrap}z-pagination .pagination-bar .navigation-button{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5)}z-pagination .pagination-bar .pagination-button:disabled,z-pagination .pagination-bar .navigation-button:disabled{color:var(--color-disabled03);cursor:default;fill:var(--color-disabled03);pointer-events:none}z-pagination .pagination-bar .page-button,z-pagination .pagination-bar .ellipsis-button{width:var(--z-pagination--page-button-width)}z-pagination .pages-container{position:relative;display:inline-flex;max-width:100%;height:100%;overflow-x:auto;scroll-behavior:smooth;scroll-snap-align:center;scrollbar-width:none}z-pagination .pages-container::-webkit-scrollbar{display:none}z-pagination .pages-chunk{display:flex;scroll-snap-align:center}z-pagination .pagination-bar .page-button{padding-top:var(--border-size-large) solid transparent;border-bottom:var(--border-size-large) solid transparent;font-size:var(--font-size-2);font-weight:var(--font-sb)}z-pagination .pagination-bar .page-button[data-current]{border-bottom-color:var(--color-primary01);font-size:var(--font-size-7)}z-pagination .go-to-page{display:flex;flex-direction:column;row-gap:var(--space-unit)}z-pagination .go-to-page .label{color:var(--color-default-text);text-transform:uppercase}z-pagination .go-to-page .inputs{display:flex;column-gap:var(--space-unit)}z-pagination .go-to-page .inputs z-input{width:calc(var(--space-unit) * 11)}z-pagination .go-to-page .inputs z-input input,z-pagination .mobile-go-to-page z-input input{padding:0 calc(var(--space-unit) * 1.5) !important;appearance:none}z-pagination .mobile-go-to-page{display:flex;height:100%;flex:1 auto;align-items:center;justify-content:center;background-color:var(--color-surface02)}z-pagination .mobile-go-to-page z-input{width:var(--z-pagination--page-button-width);margin-right:var(--space-unit)}z-pagination .mobile-go-to-page z-input input{text-align:center}z-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,z-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button{appearance:none}z-pagination .mobile-go-to-page>span{font-size:var(--font-size-2)}@media (hover: hover){z-pagination .pagination-bar button:hover{background-color:var(--color-surface01)}z-pagination .pagination-bar .page-button:hover{border-bottom-color:var(--color-hover-primary);color:var(--color-hover-primary)}}@media (min-width: 768px){z-pagination{--z-pagination--page-button-width:88px;flex-direction:row;align-items:flex-end}z-pagination .pages-container{max-width:var(--z-pagination--pages-container-max-width)}}";
|
|
9
9
|
const ZPaginationStyle0 = stylesCss;
|
|
10
10
|
|
|
11
11
|
const ZPagination$1 = /*@__PURE__*/ proxyCustomElement(class ZPagination extends HTMLElement {
|
|
@@ -94,17 +94,15 @@ const ZPagination$1 = /*@__PURE__*/ proxyCustomElement(class ZPagination extends
|
|
|
94
94
|
* Scroll to the left the chunk of pages containing the current page.
|
|
95
95
|
*/
|
|
96
96
|
scrollToPage() {
|
|
97
|
-
var _a, _b;
|
|
98
|
-
const container = this.host.querySelector(".pages-container");
|
|
99
97
|
const pageBtn = this.host.querySelector(`[data-page="${this.currentPage}"]`);
|
|
100
|
-
|
|
101
|
-
if (!pageBtn || !container) {
|
|
98
|
+
if (!pageBtn) {
|
|
102
99
|
return;
|
|
103
100
|
}
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
101
|
+
pageBtn.scrollIntoView({
|
|
102
|
+
behavior: "smooth",
|
|
103
|
+
block: "nearest",
|
|
104
|
+
inline: "center",
|
|
105
|
+
});
|
|
108
106
|
}
|
|
109
107
|
/**
|
|
110
108
|
* Select a page.
|
|
@@ -204,7 +202,6 @@ const ZPagination$1 = /*@__PURE__*/ proxyCustomElement(class ZPagination extends
|
|
|
204
202
|
}
|
|
205
203
|
this.setPagesContainerWidth();
|
|
206
204
|
this.setMobile();
|
|
207
|
-
this.scrollToPage();
|
|
208
205
|
}
|
|
209
206
|
render() {
|
|
210
207
|
if (this.isMobile) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"z-pagination.js","mappings":"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","names":["ZPagination"],"sources":["src/components/z-pagination/styles.css?tag=z-pagination","src/components/z-pagination/index.tsx"],"sourcesContent":["z-pagination {\n --z-pagination--page-button-width: 64px;\n --z-pagination--pages-container-max-width: 100%;\n --z-pagination-background-color: var(--color-background);\n --z-pagination-background-color-hover: var(--color-surface01);\n\n display: flex;\n max-width: 100%;\n flex-flow: column wrap;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);\n}\n\nz-pagination,\nz-pagination * {\n box-sizing: border-box;\n}\n\nz-pagination button {\n height: 100%;\n}\n\nz-pagination z-icon {\n fill: var(--color-primary01-icon);\n}\n\nz-pagination *:disabled z-icon {\n fill: var(--color-disabled03);\n}\n\nz-pagination .page-label {\n margin-right: calc(var(--space-unit) * 3);\n color: var(--color-default-text);\n}\n\nz-pagination .pagination-bar {\n display: flex;\n max-width: 100%;\n height: 48px;\n align-items: center;\n}\n\nz-pagination .pagination-bar button {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n margin: 0;\n background-color: var(--z-pagination-background-color);\n color: var(--color-primary01);\n cursor: pointer;\n font-family: inherit;\n font-weight: inherit;\n transition:\n background-color 0.15s ease-out,\n color 0.15s ease-out,\n border-bottom-color 0.15s ease-out,\n font-size 0.15s ease-in-out,\n font-weight 0.15s ease-in-out;\n}\n\nz-pagination .pagination-bar button:focus-visible {\n background-color: var(--color-surface01);\n outline: none;\n}\n\nz-pagination .pagination-bar .pagination-button {\n padding: calc(var(--space-unit) * 2);\n font-weight: var(--font-sb);\n text-transform: uppercase;\n white-space: nowrap;\n}\n\nz-pagination .pagination-bar .navigation-button {\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5);\n}\n\nz-pagination .pagination-bar .pagination-button:disabled,\nz-pagination .pagination-bar .navigation-button:disabled {\n color: var(--color-disabled03);\n cursor: default;\n fill: var(--color-disabled03);\n pointer-events: none;\n}\n\nz-pagination .pagination-bar .page-button,\nz-pagination .pagination-bar .ellipsis-button {\n width: var(--z-pagination--page-button-width);\n}\n\nz-pagination .pages-container {\n position: relative;\n display: inline-flex;\n max-width: 100%;\n height: 100%;\n overflow-x: auto;\n scroll-behavior: smooth;\n scroll-snap-align: center;\n\n /* hide scrollbar in Firefox */\n scrollbar-width: none;\n}\n\nz-pagination .pages-container::-webkit-scrollbar {\n display: none;\n}\n\nz-pagination .pages-chunk {\n display: flex;\n scroll-snap-align: center;\n}\n\nz-pagination .pagination-bar .page-button {\n padding-top: var(--border-size-large) solid transparent;\n border-bottom: var(--border-size-large) solid transparent;\n font-size: var(--font-size-2);\n font-weight: var(--font-sb);\n}\n\nz-pagination .pagination-bar .page-button[data-current] {\n border-bottom-color: var(--color-primary01);\n font-size: var(--font-size-7);\n}\n\nz-pagination .go-to-page {\n display: flex;\n flex-direction: column;\n row-gap: var(--space-unit);\n}\n\nz-pagination .go-to-page .label {\n color: var(--color-default-text);\n text-transform: uppercase;\n}\n\nz-pagination .go-to-page .inputs {\n display: flex;\n column-gap: var(--space-unit);\n}\n\nz-pagination .go-to-page .inputs z-input {\n width: calc(var(--space-unit) * 11);\n}\n\nz-pagination .go-to-page .inputs z-input input,\nz-pagination .mobile-go-to-page z-input input {\n padding: 0 calc(var(--space-unit) * 1.5) !important;\n appearance: none;\n}\n\nz-pagination .mobile-go-to-page {\n display: flex;\n height: 100%;\n flex: 1 auto;\n align-items: center;\n justify-content: center;\n background-color: var(--color-surface02);\n}\n\nz-pagination .mobile-go-to-page z-input {\n width: var(--z-pagination--page-button-width);\n margin-right: var(--space-unit);\n}\n\nz-pagination .mobile-go-to-page z-input input {\n text-align: center;\n}\n\nz-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,\nz-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button {\n appearance: none;\n}\n\nz-pagination .mobile-go-to-page > span {\n font-size: var(--font-size-2);\n}\n\n@media (hover: hover) {\n z-pagination .pagination-bar button:hover {\n background-color: var(--z-pagination-background-color-hover);\n }\n\n z-pagination .pagination-bar .page-button:hover {\n border-bottom-color: var(--color-hover-primary);\n color: var(--color-hover-primary);\n }\n}\n\n@media (min-width: 768px) {\n z-pagination {\n --z-pagination--page-button-width: 88px;\n\n flex-direction: row;\n align-items: flex-end;\n }\n\n z-pagination .pages-container {\n max-width: var(--z-pagination--pages-container-max-width);\n }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {InputType} from \"../../beans\";\n\n/**\n * Pagination bar component.\n * @cssprop --z-pagination-background-color - background of the pagination's tabs. The default is --color-background\n * @cssprop --z-pagination-background-color-hover - background of the pagination's tabs on hover. The default is --color-surface01\n */\n@Component({\n tag: \"z-pagination\",\n styleUrl: \"styles.css\",\n})\nexport class ZPagination {\n @Element() host: HTMLZPaginationElement;\n\n /** Pagination label placed before the bar. */\n @Prop()\n label?: string;\n\n /** Enable navigation arrows. */\n @Prop()\n navArrows = true;\n\n /** Total number of pages. Required. */\n @Prop()\n totalPages!: number;\n\n /** Number of pages to skip. */\n @Prop()\n skip = 0;\n\n /** Enable buttons to go to the first and last pages. */\n @Prop()\n edges = false;\n\n /** Number of pages to show left/right of the current, before showing \"load more\" symbol (…). */\n @Prop()\n split?: number;\n\n /** Number of pages to show at a time. If not set, all pages will be shown. */\n @Prop()\n visiblePages?: number;\n\n /** Current page. */\n @Prop({mutable: true})\n currentPage = 1;\n\n /** Whether to show \"go to page\" feature. */\n @Prop()\n goToPage: boolean;\n\n /**\n * Internal visible pages variable.\n * Needed to better handle conflicting props like `visiblePages` and `split`.\n * This state will change based on props values and validation,\n * keeping original `visiblePages` value intact.\n */\n @State()\n private _visiblePages = this.visiblePages;\n\n /** Used to hides/change some functionalities on smaller screen sizes */\n @State()\n isMobile = false;\n\n /** Value of the go to page input */\n @State()\n goToPageValue = null;\n\n /** Event emitted when the current page has changed. */\n @Event()\n pageChanged: EventEmitter;\n\n /**\n * Set the max width of the pages container.\n */\n @Watch(\"_visiblePages\")\n setPagesContainerWidth(): void {\n if (!this._visiblePages || this.split) {\n this.host.style.setProperty(\"--z-pagination--pages-container-max-width\", \"100%\");\n\n return;\n }\n\n const pagesContainerStyle = window.getComputedStyle(this.host);\n const pageButtonWidth = pagesContainerStyle.getPropertyValue(\"--z-pagination--page-button-width\");\n this.host.style.setProperty(\n \"--z-pagination--pages-container-max-width\",\n `calc(${pageButtonWidth} * ${this._visiblePages})`\n );\n }\n\n /**\n * Set visible pages.\n * Ensure that the visible pages are always <= the total pages.\n * If `visiblePages` isn't set, fallback to the total pages.\n */\n @Watch(\"visiblePages\")\n setVisiblePages(): void {\n this._visiblePages = Math.min(this.visiblePages || this.totalPages, this.totalPages);\n }\n\n /**\n * On page changed.\n * @emits pageChanged\n */\n @Watch(\"currentPage\")\n onPageChanged(): void {\n this.pageChanged.emit(this.currentPage);\n this.scrollToPage();\n }\n\n /**\n * On split changed.\n * Empty `edges` value. The split feature wins over the pages chunks and edges.\n */\n @Watch(\"split\")\n onSplitChanged(): void {\n if (this.split) {\n this.edges = false;\n }\n }\n\n /**\n * Hide stuff on mobile.\n */\n @Listen(\"resize\", {target: \"window\", passive: true})\n onResize(): void {\n this.setMobile();\n }\n\n /**\n * Set functionalities according to screen size.\n */\n private setMobile(): void {\n const mobileMediaQuery = \"screen and (max-width: 767px)\";\n this.isMobile = window.matchMedia(mobileMediaQuery).matches;\n }\n\n /**\n * Get a list of pages chunks, each of `visiblePages` length.\n * @returns {number[][]}\n */\n private getPagesChunks(): number[][] {\n // array of numbers from 1 to `totalPages`\n const pages = Array.from({length: this.totalPages}, (_, i) => i + 1);\n\n const chunks = [];\n const chunksCount = Math.ceil(pages.length / this._visiblePages);\n for (let index = 0; index < chunksCount; index++) {\n chunks.push(pages.slice(index * this._visiblePages, (index + 1) * this._visiblePages));\n }\n\n return chunks;\n }\n\n /**\n * Scroll to the left the chunk of pages containing the current page.\n */\n private scrollToPage(): void {\n const container = this.host.querySelector(\".pages-container\") as HTMLElement;\n const pageBtn = this.host.querySelector(`[data-page=\"${this.currentPage}\"]`) as HTMLElement;\n const navBtn = this.host.querySelector(\".navigation-button\") as HTMLElement;\n\n if (!pageBtn || !container) {\n return;\n }\n\n const containerWidth = container.getBoundingClientRect().width;\n const pageBtnWidth = pageBtn.getBoundingClientRect().width;\n const navBtnWidth = navBtn?.getBoundingClientRect()?.width ?? 0;\n\n container.scrollLeft = this.currentPage * pageBtnWidth - navBtnWidth - containerWidth / 2;\n }\n\n /**\n * Select a page.\n * Do validations on the passed value before assigning it to `currentPage`.\n * @param {number} page Page number to set\n */\n private selectPage(page): void {\n this.currentPage = Math.min(Math.max(page, 1), this.totalPages);\n }\n\n /**\n * Render page number button.\n * @param {number} page Page number to render\n * @returns {HTMLButtonElement}\n */\n private renderPage(page): HTMLButtonElement {\n return (\n <button\n class=\"page-button\"\n type=\"button\"\n aria-current={this.currentPage === page ? \"page\" : \"false\"}\n title={`Vai alla pagina ${page}`}\n data-page={page}\n data-current={this.currentPage === page}\n onClick={() => this.selectPage(page)}\n >\n {page}\n </button>\n );\n }\n\n /**\n * Render split button.\n * @param {number} page Page to select on click.\n * @returns {HTMLButtonElement}\n */\n private renderEllipsisButton(page): HTMLButtonElement {\n return (\n <button\n class=\"ellipsis-button\"\n type=\"button\"\n title={`Vai alla pagina ${page}`}\n onClick={() => this.selectPage(page)}\n >\n …\n </button>\n );\n }\n\n /**\n * Render chunked page buttons.\n * @returns {HTMLDivElement[]}\n */\n private renderPages(): HTMLDivElement[] {\n const pagesChunks = this.getPagesChunks();\n if (pagesChunks.length <= 0) {\n return;\n }\n\n return pagesChunks.map((chunk) => <div class=\"pages-chunk\">{chunk.map((page) => this.renderPage(page))}</div>);\n }\n\n /**\n * Render page buttons when split feature is enabled.\n * @returns {HTMLButtonElement[]}\n */\n private renderSplitPages(): HTMLButtonElement[] {\n // left and right split pages, current page, first and last page, left and right ellipsis button\n if (this.totalPages <= this.split * 2 + 5) {\n // Too few pages: ellipsis will never be rendered, so let's just render all pages and that's it.\n return Array.from({length: this.totalPages}, (_, i) => this.renderPage(i + 1));\n }\n\n if (this.currentPage <= this.split * 2 + 2) {\n // Render first (2 * split + 3) pages, ellipsis, then last page.\n return [\n ...Array.from({length: this.split * 2 + 3}, (_, i) => this.renderPage(i + 1)),\n this.renderEllipsisButton(this.split * 2 + 4),\n this.renderPage(this.totalPages),\n ];\n }\n\n if (this.currentPage > this.split * 2 + 2 && this.currentPage < this.totalPages - this.split * 2 - 1) {\n // Render first page, ellipsis, current page surrounded by (split) pages both before and after, another ellipsis, then last page.\n return [\n this.renderPage(1),\n this.renderEllipsisButton(this.currentPage - this.split - 1),\n ...Array.from({length: this.split * 2 + 1}, (_, i) => this.renderPage(this.currentPage - this.split + i)),\n this.renderEllipsisButton(this.currentPage + this.split + 1),\n this.renderPage(this.totalPages),\n ];\n }\n\n // Render first page, ellipsis, then last (2 * split + 3) pages.\n return [\n this.renderPage(1),\n this.renderEllipsisButton(this.totalPages - this.split * 2 - 3),\n ...Array.from({length: this.split * 2 + 3}, (_, i) => this.renderPage(this.totalPages - this.split * 2 - 2 + i)),\n ];\n }\n\n private renderBackButton(): HTMLButtonElement {\n return (\n <button\n class=\"navigation-button\"\n type=\"button\"\n title=\"Vai alla pagina precedente\"\n disabled={this.currentPage === 1}\n onClick={() => this.selectPage(this.currentPage - 1)}\n >\n <z-icon name=\"chevron-left\"></z-icon>\n </button>\n );\n }\n\n private renderForwardButton(): HTMLButtonElement {\n return (\n <button\n class=\"navigation-button\"\n type=\"button\"\n title=\"Vai alla prossima pagina\"\n disabled={this.currentPage === this.totalPages}\n onClick={() => this.selectPage(this.currentPage + 1)}\n >\n <z-icon name=\"chevron-right\"></z-icon>\n </button>\n );\n }\n\n private renderMobile(): HTMLElement[] {\n const pagesChunks = this.getPagesChunks();\n\n return [\n this.label && <span class=\"page-label body-1-sb\">{this.label}</span>,\n\n <div class=\"pagination-bar\">\n {this.renderBackButton()}\n\n {!this.goToPage && (\n <div\n class=\"pages-container\"\n role=\"navigation\"\n tabIndex={-1}\n >\n {pagesChunks.length > 0 &&\n pagesChunks.map((chunk) => <div class=\"pages-chunk\">{chunk.map((page) => this.renderPage(page))}</div>)}\n </div>\n )}\n\n {this.goToPage && (\n <form\n class=\"mobile-go-to-page\"\n onSubmit={(ev) => {\n ev.preventDefault();\n this.selectPage(this.goToPageValue);\n }}\n >\n <z-input\n class=\"go-to-page-input\"\n type={InputType.NUMBER}\n min={1}\n max={this.totalPages}\n message={false}\n onInput={(ev: InputEvent) => {\n this.goToPageValue = (ev.target as HTMLZInputElement).value;\n }}\n placeholder={this.currentPage.toString()}\n hasclearicon={false}\n ></z-input>\n <span>{`/${this.totalPages}`}</span>\n </form>\n )}\n\n {this.renderForwardButton()}\n </div>,\n ];\n }\n\n componentDidLoad(): void {\n this.setVisiblePages();\n }\n\n componentDidRender(): void {\n if (this.split) {\n this.edges = false;\n }\n\n this.setPagesContainerWidth();\n this.setMobile();\n this.scrollToPage();\n }\n\n render(): HTMLZPaginationElement {\n if (this.isMobile) {\n return <Host>{this.renderMobile()}</Host>;\n }\n\n return (\n <Host>\n <div class=\"pagination-bar\">\n {this.label && <span class=\"page-label body-1-sb\">{this.label}</span>}\n\n {this.edges && (\n <button\n class=\"pagination-button\"\n type=\"button\"\n title=\"Vai alla pagina 1\"\n disabled={this.currentPage === 1}\n onClick={() => this.selectPage(1)}\n >\n Pagina 1\n </button>\n )}\n\n {this.skip < this.totalPages && this.skip > 1 && (\n <button\n class=\"pagination-button\"\n type=\"button\"\n title={`Vai alla pagina ${this.currentPage - this.skip}`}\n disabled={this.currentPage <= this.skip}\n onClick={() => this.selectPage(this.currentPage - this.skip)}\n >\n -{this.skip}\n </button>\n )}\n\n {this.navArrows && this.renderBackButton()}\n\n <div\n class=\"pages-container\"\n role=\"navigation\"\n tabIndex={-1}\n >\n {this.split ? this.renderSplitPages() : this.renderPages()}\n </div>\n\n {this.navArrows && this.renderForwardButton()}\n\n {this.skip < this.totalPages && this.skip > 1 && (\n <button\n class=\"pagination-button\"\n type=\"button\"\n title={`Vai alla pagina ${this.currentPage + this.skip}`}\n disabled={this.currentPage > this.totalPages - this.skip}\n onClick={() => this.selectPage(this.currentPage + this.skip)}\n >\n +{this.skip}\n </button>\n )}\n\n {this.edges && (\n <button\n class=\"pagination-button\"\n type=\"button\"\n title={`Vai alla pagina ${this.totalPages}`}\n disabled={this.currentPage === this.totalPages}\n onClick={() => this.selectPage(this.totalPages)}\n >\n Pagina {this.totalPages}\n </button>\n )}\n </div>\n {this.goToPage && (\n <div class=\"go-to-page\">\n <span class=\"label body-5-sb\">Vai a pagina:</span>\n <div class=\"inputs\">\n <z-input\n class=\"go-to-page-input\"\n type={InputType.NUMBER}\n min={1}\n max={this.totalPages}\n message={false}\n placeholder=\"2\"\n hasclearicon={false}\n onInput={(ev: InputEvent) => {\n this.goToPageValue = (ev.target as HTMLZInputElement).value;\n }}\n onKeyDown={(ev) => ev.key === \"Enter\" && this.selectPage(this.goToPageValue)}\n ></z-input>\n <z-button\n disabled={!this.goToPageValue}\n title=\"Vai alla pagina inserita\"\n onClick={() => this.selectPage(this.goToPageValue)}\n >\n vai\n </z-button>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"z-pagination.js","mappings":"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","names":["ZPagination"],"sources":["src/components/z-pagination/styles.css?tag=z-pagination","src/components/z-pagination/index.tsx"],"sourcesContent":["z-pagination {\n --z-pagination--page-button-width: 64px;\n --z-pagination--pages-container-max-width: 100%;\n\n display: flex;\n max-width: 100%;\n flex-flow: column wrap;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);\n}\n\nz-pagination,\nz-pagination * {\n box-sizing: border-box;\n}\n\nz-pagination button {\n height: 100%;\n}\n\nz-pagination z-icon {\n fill: var(--color-primary01-icon);\n}\n\nz-pagination *:disabled z-icon {\n fill: var(--color-disabled03);\n}\n\nz-pagination .page-label {\n margin-right: calc(var(--space-unit) * 3);\n color: var(--color-default-text);\n}\n\nz-pagination .pagination-bar {\n display: flex;\n max-width: 100%;\n height: 48px;\n align-items: center;\n}\n\nz-pagination .pagination-bar button {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n margin: 0;\n background-color: var(--color-background);\n color: var(--color-primary01);\n cursor: pointer;\n font-family: inherit;\n font-weight: inherit;\n transition:\n background-color 0.15s ease-out,\n color 0.15s ease-out,\n border-bottom-color 0.15s ease-out,\n font-size 0.15s ease-in-out,\n font-weight 0.15s ease-in-out;\n}\n\nz-pagination .pagination-bar button:focus-visible {\n background-color: var(--color-surface01);\n outline: none;\n}\n\nz-pagination .pagination-bar .pagination-button {\n padding: calc(var(--space-unit) * 2);\n font-weight: var(--font-sb);\n text-transform: uppercase;\n white-space: nowrap;\n}\n\nz-pagination .pagination-bar .navigation-button {\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5);\n}\n\nz-pagination .pagination-bar .pagination-button:disabled,\nz-pagination .pagination-bar .navigation-button:disabled {\n color: var(--color-disabled03);\n cursor: default;\n fill: var(--color-disabled03);\n pointer-events: none;\n}\n\nz-pagination .pagination-bar .page-button,\nz-pagination .pagination-bar .ellipsis-button {\n width: var(--z-pagination--page-button-width);\n}\n\nz-pagination .pages-container {\n position: relative;\n display: inline-flex;\n max-width: 100%;\n height: 100%;\n overflow-x: auto;\n scroll-behavior: smooth;\n scroll-snap-align: center;\n\n /* hide scrollbar in Firefox */\n scrollbar-width: none;\n}\n\nz-pagination .pages-container::-webkit-scrollbar {\n display: none;\n}\n\nz-pagination .pages-chunk {\n display: flex;\n scroll-snap-align: center;\n}\n\nz-pagination .pagination-bar .page-button {\n padding-top: var(--border-size-large) solid transparent;\n border-bottom: var(--border-size-large) solid transparent;\n font-size: var(--font-size-2);\n font-weight: var(--font-sb);\n}\n\nz-pagination .pagination-bar .page-button[data-current] {\n border-bottom-color: var(--color-primary01);\n font-size: var(--font-size-7);\n}\n\nz-pagination .go-to-page {\n display: flex;\n flex-direction: column;\n row-gap: var(--space-unit);\n}\n\nz-pagination .go-to-page .label {\n color: var(--color-default-text);\n text-transform: uppercase;\n}\n\nz-pagination .go-to-page .inputs {\n display: flex;\n column-gap: var(--space-unit);\n}\n\nz-pagination .go-to-page .inputs z-input {\n width: calc(var(--space-unit) * 11);\n}\n\nz-pagination .go-to-page .inputs z-input input,\nz-pagination .mobile-go-to-page z-input input {\n padding: 0 calc(var(--space-unit) * 1.5) !important;\n appearance: none;\n}\n\nz-pagination .mobile-go-to-page {\n display: flex;\n height: 100%;\n flex: 1 auto;\n align-items: center;\n justify-content: center;\n background-color: var(--color-surface02);\n}\n\nz-pagination .mobile-go-to-page z-input {\n width: var(--z-pagination--page-button-width);\n margin-right: var(--space-unit);\n}\n\nz-pagination .mobile-go-to-page z-input input {\n text-align: center;\n}\n\nz-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,\nz-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button {\n appearance: none;\n}\n\nz-pagination .mobile-go-to-page > span {\n font-size: var(--font-size-2);\n}\n\n@media (hover: hover) {\n z-pagination .pagination-bar button:hover {\n background-color: var(--color-surface01);\n }\n\n z-pagination .pagination-bar .page-button:hover {\n border-bottom-color: var(--color-hover-primary);\n color: var(--color-hover-primary);\n }\n}\n\n@media (min-width: 768px) {\n z-pagination {\n --z-pagination--page-button-width: 88px;\n\n flex-direction: row;\n align-items: flex-end;\n }\n\n z-pagination .pages-container {\n max-width: var(--z-pagination--pages-container-max-width);\n }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {InputType} from \"../../beans\";\n\n/**\n * Pagination bar component.\n */\n@Component({\n tag: \"z-pagination\",\n styleUrl: \"styles.css\",\n})\nexport class ZPagination {\n @Element() host: HTMLZPaginationElement;\n\n /** Pagination label placed before the bar. */\n @Prop()\n label?: string;\n\n /** Enable navigation arrows. */\n @Prop()\n navArrows = true;\n\n /** Total number of pages. Required. */\n @Prop()\n totalPages!: number;\n\n /** Number of pages to skip. */\n @Prop()\n skip = 0;\n\n /** Enable buttons to go to the first and last pages. */\n @Prop()\n edges = false;\n\n /** Number of pages to show left/right of the current, before showing \"load more\" symbol (…). */\n @Prop()\n split?: number;\n\n /** Number of pages to show at a time. If not set, all pages will be shown. */\n @Prop()\n visiblePages?: number;\n\n /** Current page. */\n @Prop({mutable: true})\n currentPage = 1;\n\n /** Whether to show \"go to page\" feature. */\n @Prop()\n goToPage: boolean;\n\n /**\n * Internal visible pages variable.\n * Needed to better handle conflicting props like `visiblePages` and `split`.\n * This state will change based on props values and validation,\n * keeping original `visiblePages` value intact.\n */\n @State()\n private _visiblePages = this.visiblePages;\n\n /** Used to hides/change some functionalities on smaller screen sizes */\n @State()\n isMobile = false;\n\n /** Value of the go to page input */\n @State()\n goToPageValue = null;\n\n /** Event emitted when the current page has changed. */\n @Event()\n pageChanged: EventEmitter;\n\n /**\n * Set the max width of the pages container.\n */\n @Watch(\"_visiblePages\")\n setPagesContainerWidth(): void {\n if (!this._visiblePages || this.split) {\n this.host.style.setProperty(\"--z-pagination--pages-container-max-width\", \"100%\");\n\n return;\n }\n\n const pagesContainerStyle = window.getComputedStyle(this.host);\n const pageButtonWidth = pagesContainerStyle.getPropertyValue(\"--z-pagination--page-button-width\");\n this.host.style.setProperty(\n \"--z-pagination--pages-container-max-width\",\n `calc(${pageButtonWidth} * ${this._visiblePages})`\n );\n }\n\n /**\n * Set visible pages.\n * Ensure that the visible pages are always <= the total pages.\n * If `visiblePages` isn't set, fallback to the total pages.\n */\n @Watch(\"visiblePages\")\n setVisiblePages(): void {\n this._visiblePages = Math.min(this.visiblePages || this.totalPages, this.totalPages);\n }\n\n /**\n * On page changed.\n * @emits pageChanged\n */\n @Watch(\"currentPage\")\n onPageChanged(): void {\n this.pageChanged.emit(this.currentPage);\n this.scrollToPage();\n }\n\n /**\n * On split changed.\n * Empty `edges` value. The split feature wins over the pages chunks and edges.\n */\n @Watch(\"split\")\n onSplitChanged(): void {\n if (this.split) {\n this.edges = false;\n }\n }\n\n /**\n * Hide stuff on mobile.\n */\n @Listen(\"resize\", {target: \"window\", passive: true})\n onResize(): void {\n this.setMobile();\n }\n\n /**\n * Set functionalities according to screen size.\n */\n private setMobile(): void {\n const mobileMediaQuery = \"screen and (max-width: 767px)\";\n this.isMobile = window.matchMedia(mobileMediaQuery).matches;\n }\n\n /**\n * Get a list of pages chunks, each of `visiblePages` length.\n * @returns {number[][]}\n */\n private getPagesChunks(): number[][] {\n // array of numbers from 1 to `totalPages`\n const pages = Array.from({length: this.totalPages}, (_, i) => i + 1);\n\n const chunks = [];\n const chunksCount = Math.ceil(pages.length / this._visiblePages);\n for (let index = 0; index < chunksCount; index++) {\n chunks.push(pages.slice(index * this._visiblePages, (index + 1) * this._visiblePages));\n }\n\n return chunks;\n }\n\n /**\n * Scroll to the left the chunk of pages containing the current page.\n */\n private scrollToPage(): void {\n const pageBtn = this.host.querySelector(`[data-page=\"${this.currentPage}\"]`) as HTMLElement;\n\n if (!pageBtn) {\n return;\n }\n\n pageBtn.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n inline: \"center\",\n });\n }\n\n /**\n * Select a page.\n * Do validations on the passed value before assigning it to `currentPage`.\n * @param {number} page Page number to set\n */\n private selectPage(page): void {\n this.currentPage = Math.min(Math.max(page, 1), this.totalPages);\n }\n\n /**\n * Render page number button.\n * @param {number} page Page number to render\n * @returns {HTMLButtonElement}\n */\n private renderPage(page): HTMLButtonElement {\n return (\n <button\n class=\"page-button\"\n type=\"button\"\n aria-current={this.currentPage === page ? \"page\" : \"false\"}\n title={`Vai alla pagina ${page}`}\n data-page={page}\n data-current={this.currentPage === page}\n onClick={() => this.selectPage(page)}\n >\n {page}\n </button>\n );\n }\n\n /**\n * Render split button.\n * @param {number} page Page to select on click.\n * @returns {HTMLButtonElement}\n */\n private renderEllipsisButton(page): HTMLButtonElement {\n return (\n <button\n class=\"ellipsis-button\"\n type=\"button\"\n title={`Vai alla pagina ${page}`}\n onClick={() => this.selectPage(page)}\n >\n …\n </button>\n );\n }\n\n /**\n * Render chunked page buttons.\n * @returns {HTMLDivElement[]}\n */\n private renderPages(): HTMLDivElement[] {\n const pagesChunks = this.getPagesChunks();\n if (pagesChunks.length <= 0) {\n return;\n }\n\n return pagesChunks.map((chunk) => <div class=\"pages-chunk\">{chunk.map((page) => this.renderPage(page))}</div>);\n }\n\n /**\n * Render page buttons when split feature is enabled.\n * @returns {HTMLButtonElement[]}\n */\n private renderSplitPages(): HTMLButtonElement[] {\n // left and right split pages, current page, first and last page, left and right ellipsis button\n if (this.totalPages <= this.split * 2 + 5) {\n // Too few pages: ellipsis will never be rendered, so let's just render all pages and that's it.\n return Array.from({length: this.totalPages}, (_, i) => this.renderPage(i + 1));\n }\n\n if (this.currentPage <= this.split * 2 + 2) {\n // Render first (2 * split + 3) pages, ellipsis, then last page.\n return [\n ...Array.from({length: this.split * 2 + 3}, (_, i) => this.renderPage(i + 1)),\n this.renderEllipsisButton(this.split * 2 + 4),\n this.renderPage(this.totalPages),\n ];\n }\n\n if (this.currentPage > this.split * 2 + 2 && this.currentPage < this.totalPages - this.split * 2 - 1) {\n // Render first page, ellipsis, current page surrounded by (split) pages both before and after, another ellipsis, then last page.\n return [\n this.renderPage(1),\n this.renderEllipsisButton(this.currentPage - this.split - 1),\n ...Array.from({length: this.split * 2 + 1}, (_, i) => this.renderPage(this.currentPage - this.split + i)),\n this.renderEllipsisButton(this.currentPage + this.split + 1),\n this.renderPage(this.totalPages),\n ];\n }\n\n // Render first page, ellipsis, then last (2 * split + 3) pages.\n return [\n this.renderPage(1),\n this.renderEllipsisButton(this.totalPages - this.split * 2 - 3),\n ...Array.from({length: this.split * 2 + 3}, (_, i) => this.renderPage(this.totalPages - this.split * 2 - 2 + i)),\n ];\n }\n\n private renderBackButton(): HTMLButtonElement {\n return (\n <button\n class=\"navigation-button\"\n type=\"button\"\n title=\"Vai alla pagina precedente\"\n disabled={this.currentPage === 1}\n onClick={() => this.selectPage(this.currentPage - 1)}\n >\n <z-icon name=\"chevron-left\"></z-icon>\n </button>\n );\n }\n\n private renderForwardButton(): HTMLButtonElement {\n return (\n <button\n class=\"navigation-button\"\n type=\"button\"\n title=\"Vai alla prossima pagina\"\n disabled={this.currentPage === this.totalPages}\n onClick={() => this.selectPage(this.currentPage + 1)}\n >\n <z-icon name=\"chevron-right\"></z-icon>\n </button>\n );\n }\n\n private renderMobile(): HTMLElement[] {\n const pagesChunks = this.getPagesChunks();\n\n return [\n this.label && <span class=\"page-label body-1-sb\">{this.label}</span>,\n\n <div class=\"pagination-bar\">\n {this.renderBackButton()}\n\n {!this.goToPage && (\n <div\n class=\"pages-container\"\n role=\"navigation\"\n tabIndex={-1}\n >\n {pagesChunks.length > 0 &&\n pagesChunks.map((chunk) => <div class=\"pages-chunk\">{chunk.map((page) => this.renderPage(page))}</div>)}\n </div>\n )}\n\n {this.goToPage && (\n <form\n class=\"mobile-go-to-page\"\n onSubmit={(ev) => {\n ev.preventDefault();\n this.selectPage(this.goToPageValue);\n }}\n >\n <z-input\n class=\"go-to-page-input\"\n type={InputType.NUMBER}\n min={1}\n max={this.totalPages}\n message={false}\n onInput={(ev: InputEvent) => {\n this.goToPageValue = (ev.target as HTMLZInputElement).value;\n }}\n placeholder={this.currentPage.toString()}\n hasclearicon={false}\n ></z-input>\n <span>{`/${this.totalPages}`}</span>\n </form>\n )}\n\n {this.renderForwardButton()}\n </div>,\n ];\n }\n\n componentDidLoad(): void {\n this.setVisiblePages();\n }\n\n componentDidRender(): void {\n if (this.split) {\n this.edges = false;\n }\n\n this.setPagesContainerWidth();\n this.setMobile();\n }\n\n render(): HTMLZPaginationElement {\n if (this.isMobile) {\n return <Host>{this.renderMobile()}</Host>;\n }\n\n return (\n <Host>\n <div class=\"pagination-bar\">\n {this.label && <span class=\"page-label body-1-sb\">{this.label}</span>}\n\n {this.edges && (\n <button\n class=\"pagination-button\"\n type=\"button\"\n title=\"Vai alla pagina 1\"\n disabled={this.currentPage === 1}\n onClick={() => this.selectPage(1)}\n >\n Pagina 1\n </button>\n )}\n\n {this.skip < this.totalPages && this.skip > 1 && (\n <button\n class=\"pagination-button\"\n type=\"button\"\n title={`Vai alla pagina ${this.currentPage - this.skip}`}\n disabled={this.currentPage <= this.skip}\n onClick={() => this.selectPage(this.currentPage - this.skip)}\n >\n -{this.skip}\n </button>\n )}\n\n {this.navArrows && this.renderBackButton()}\n\n <div\n class=\"pages-container\"\n role=\"navigation\"\n tabIndex={-1}\n >\n {this.split ? this.renderSplitPages() : this.renderPages()}\n </div>\n\n {this.navArrows && this.renderForwardButton()}\n\n {this.skip < this.totalPages && this.skip > 1 && (\n <button\n class=\"pagination-button\"\n type=\"button\"\n title={`Vai alla pagina ${this.currentPage + this.skip}`}\n disabled={this.currentPage > this.totalPages - this.skip}\n onClick={() => this.selectPage(this.currentPage + this.skip)}\n >\n +{this.skip}\n </button>\n )}\n\n {this.edges && (\n <button\n class=\"pagination-button\"\n type=\"button\"\n title={`Vai alla pagina ${this.totalPages}`}\n disabled={this.currentPage === this.totalPages}\n onClick={() => this.selectPage(this.totalPages)}\n >\n Pagina {this.totalPages}\n </button>\n )}\n </div>\n {this.goToPage && (\n <div class=\"go-to-page\">\n <span class=\"label body-5-sb\">Vai a pagina:</span>\n <div class=\"inputs\">\n <z-input\n class=\"go-to-page-input\"\n type={InputType.NUMBER}\n min={1}\n max={this.totalPages}\n message={false}\n placeholder=\"2\"\n hasclearicon={false}\n onInput={(ev: InputEvent) => {\n this.goToPageValue = (ev.target as HTMLZInputElement).value;\n }}\n onKeyDown={(ev) => ev.key === \"Enter\" && this.selectPage(this.goToPageValue)}\n ></z-input>\n <z-button\n disabled={!this.goToPageValue}\n title=\"Vai alla pagina inserita\"\n onClick={() => this.selectPage(this.goToPageValue)}\n >\n vai\n </z-button>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
import { r as ToastNotificationTransition } from './index2.js';
|
|
3
|
-
import { B as Breakpoints } from './breakpoints.js';
|
|
2
|
+
import { r as ToastNotificationTransition, g as KeyboardCode } from './index2.js';
|
|
4
3
|
import { d as defineCustomElement$2 } from './index9.js';
|
|
5
4
|
|
|
6
5
|
var hammer = {exports: {}};
|
|
@@ -2653,7 +2652,7 @@ if (typeof undefined$1 === 'function' && undefined$1.amd) {
|
|
|
2653
2652
|
|
|
2654
2653
|
const Hammer = hammer.exports;
|
|
2655
2654
|
|
|
2656
|
-
const stylesCss = ":host{display:inline-block;width:100vw;min-width:200px;--percentuale:0}:host(.slide-in-left){animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-right){animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-down){animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-up){animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-left){animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-right){animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-down){animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-up){animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}@keyframes slideinleft{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes slideinright{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}@keyframes slideinup{0%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slideindown{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;transform:translateX(-100%)}}@keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;transform:translateX(100%)}}@keyframes slideoutup{0%{opacity:1;transform:translateY(var(--percentuale))}100%{opacity:0;transform:translateY(-100%)}}@keyframes slideoutdown{0%{opacity:1;transform:translateY(var(--percentuale))}100%{opacity:0;transform:translateY(100%)}}:host>#external-container{display:flex;box-sizing:border-box;
|
|
2655
|
+
const stylesCss = ":host{display:inline-block;width:100vw;min-width:200px;--percentuale:0}:host(.slide-in-left){animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-right){animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-down){animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-up){animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-left){animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-right){animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-down){animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-up){animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}@keyframes slideinleft{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes slideinright{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}@keyframes slideinup{0%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slideindown{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;transform:translateX(-100%)}}@keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;transform:translateX(100%)}}@keyframes slideoutup{0%{opacity:1;transform:translateY(var(--percentuale))}100%{opacity:0;transform:translateY(-100%)}}@keyframes slideoutdown{0%{opacity:1;transform:translateY(var(--percentuale))}100%{opacity:0;transform:translateY(100%)}}:host>#external-container{display:flex;min-height:calc(var(--space-unit) * 8.5);box-sizing:border-box;justify-content:space-between;padding:calc(var(--space-unit) * 2) 14px calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);border-radius:var(--border-size-large);box-shadow:var(--shadow-3);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px}:host>#external-container>#inner-container{display:flex;width:100%;flex-direction:column;justify-content:space-between}:host>#external-container #inner-container #text{padding:var(--space-unit) 0;color:var(--color-text-inverse);letter-spacing:0.16px;line-height:20px;text-align:start}:host>#external-container #inner-container #text>.title{margin-right:calc(var(--space-unit) / 2);font-weight:var(--font-sb)}:host>#external-container #inner-container ::slotted([slot=\"button\"]){margin-top:var(--space-unit)}:host>#external-container #icon{padding-top:var(--space-unit);margin:0 calc(var(--space-unit) / 4);cursor:pointer;fill:var(--color-inverse-icon)}:host>#external-container #icon:focus-within{margin:0}:host>#external-container #icon z-icon{margin:0 0 0 14px}:host>#external-container #icon z-icon:focus{display:inline-block;padding:calc(var(--space-unit) / 4);border-radius:50%;box-shadow:var(--shadow-focus-primary)}:host>#external-container.dark{background:var(--color-surface05)}:host>#external-container.light{background:var(--color-surface01)}:host>#external-container.light #icon{fill:var(--color-primary01-icon)}:host>#external-container.light #text,:host>#external-container.warning #text{color:var(--color-default-text)}:host>#external-container.accent{background:var(--color-primary01)}:host>#external-container.error{background:var(--color-default-error)}:host>#external-container.success{background:var(--color-default-success)}:host>#external-container.warning{background:var(--color-default-warning)}:host>#external-container.warning #icon{fill:var(--color-default-icon)}@media (min-width: 768px){:host{width:unset;max-width:50vw}:host>#external-container #inner-container{flex-direction:row}:host>#external-container #inner-container ::slotted([slot=\"button\"]){margin:0 0 0 calc(var(--space-unit) * 2)}}@media (min-width: 1366px){:host{max-width:33vw}}";
|
|
2657
2656
|
const ZToastNotificationStyle0 = stylesCss;
|
|
2658
2657
|
|
|
2659
2658
|
const ZToastNotification$1 = /*@__PURE__*/ proxyCustomElement(class ZToastNotification extends HTMLElement {
|
|
@@ -2703,12 +2702,10 @@ const ZToastNotification$1 = /*@__PURE__*/ proxyCustomElement(class ZToastNotifi
|
|
|
2703
2702
|
this.toastClose.emit();
|
|
2704
2703
|
}
|
|
2705
2704
|
componentWillLoad() {
|
|
2706
|
-
this.isMobile = window.innerWidth <= Breakpoints.MOBILE;
|
|
2707
2705
|
this.validateAutoclose();
|
|
2708
2706
|
this.percentage = 0;
|
|
2709
2707
|
}
|
|
2710
2708
|
componentDidLoad() {
|
|
2711
|
-
this.isTextLong = this.detectWrap() || this.toastText.offsetHeight > 20;
|
|
2712
2709
|
this.startTime = Date.now();
|
|
2713
2710
|
if (this.autoclose && this.pauseonfocusloss) {
|
|
2714
2711
|
document.addEventListener("visibilitychange", this.visibilityChangeEventHandler);
|
|
@@ -2789,56 +2786,23 @@ const ZToastNotification$1 = /*@__PURE__*/ proxyCustomElement(class ZToastNotifi
|
|
|
2789
2786
|
startClosingTimeout(time) {
|
|
2790
2787
|
this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);
|
|
2791
2788
|
}
|
|
2792
|
-
|
|
2793
|
-
|
|
2794
|
-
|
|
2795
|
-
let totalWidth = 0;
|
|
2796
|
-
for (let i = 0; i < children.length; i++) {
|
|
2797
|
-
totalWidth += children[i].offsetWidth;
|
|
2798
|
-
}
|
|
2799
|
-
return totalWidth > parentWidth;
|
|
2800
|
-
}
|
|
2801
|
-
renderText() {
|
|
2802
|
-
return (h("div", { id: "text", ref: (el) => (this.toastText = el) }, this.heading && h("span", { class: "title" }, this.heading), h("span", { class: "message" }, this.message)));
|
|
2803
|
-
}
|
|
2804
|
-
renderButton() {
|
|
2805
|
-
return (h("div", { id: "button" }, h("slot", { name: "button" })));
|
|
2806
|
-
}
|
|
2807
|
-
renderCloseIcon() {
|
|
2808
|
-
if (!this.closebutton) {
|
|
2809
|
-
return;
|
|
2810
|
-
}
|
|
2811
|
-
return (h("div", { id: "icon" }, h("z-icon", { tabIndex: 0, name: "multiply-circled", width: 15, height: 15, onClick: () => this.emitToastClose(this.mapSlideOutClass()), onKeyPress: (e) => {
|
|
2812
|
-
if (e.keyCode == 32 || e.keyCode == 13) {
|
|
2789
|
+
renderContent() {
|
|
2790
|
+
return (h("div", { id: "external-container", tabIndex: 0, class: { [this.type]: !!this.type } }, h("div", { id: "inner-container" }, h("div", { id: "text" }, this.heading && h("span", { class: "title" }, this.heading), h("span", { class: "message" }, this.message)), h("div", { id: "button" }, h("slot", { name: "button" }))), h("div", { id: "icon" }, this.closebutton && (h("z-icon", { tabIndex: 0, name: "multiply-circled", width: 15, height: 15, onClick: () => this.emitToastClose(this.mapSlideOutClass()), onKeyPress: (e) => {
|
|
2791
|
+
if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {
|
|
2813
2792
|
e.preventDefault();
|
|
2814
2793
|
this.emitToastClose(this.mapSlideOutClass());
|
|
2815
2794
|
}
|
|
2816
|
-
} })));
|
|
2817
|
-
}
|
|
2818
|
-
renderContainer() {
|
|
2819
|
-
return (h("div", { tabIndex: 0, id: "external-container", class: {
|
|
2820
|
-
[this.type]: !!this.type,
|
|
2821
|
-
"several-lines-padding": this.isTextLong,
|
|
2822
|
-
}, ref: (el) => (this.container = el) }, this.renderText(), this.renderButton(), this.renderCloseIcon()));
|
|
2823
|
-
}
|
|
2824
|
-
renderMobileContainer() {
|
|
2825
|
-
return (h("div", { id: "external-container", class: {
|
|
2826
|
-
[this.type]: !!this.type,
|
|
2827
|
-
"several-lines-padding": this.isTextLong,
|
|
2828
|
-
"mobile-wrapped": this.isTextLong,
|
|
2829
|
-
} }, h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
|
|
2795
|
+
} })))));
|
|
2830
2796
|
}
|
|
2831
2797
|
render() {
|
|
2832
|
-
return (h(Host, { key: '
|
|
2833
|
-
"--percentuale": `${this.percentage}%`,
|
|
2834
|
-
}, class: this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
|
|
2798
|
+
return (h(Host, { key: 'f9b4a2fe7d3642b1cbbe6f2e433ddbbde49568fd', style: { "--percentuale": `${this.percentage}%` }, class: this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
|
|
2835
2799
|
if (this.autoclose && e.animationName.includes("slidein")) {
|
|
2836
2800
|
this.startClosingTimeout(this.autoclose);
|
|
2837
2801
|
}
|
|
2838
2802
|
if (e.animationName.includes("slideout")) {
|
|
2839
2803
|
this.hostElement.parentNode.removeChild(this.hostElement);
|
|
2840
2804
|
}
|
|
2841
|
-
} }, this.
|
|
2805
|
+
} }, this.renderContent()));
|
|
2842
2806
|
}
|
|
2843
2807
|
get hostElement() { return this; }
|
|
2844
2808
|
static get watchers() { return {
|