@jumpgroup/jump-design-system 0.2.0 → 0.2.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/dist/cjs/{index-4b95f596.js → index-79e97f36.js} +15 -3
- package/dist/cjs/index-79e97f36.js.map +1 -0
- package/dist/cjs/jump-badge.cjs.entry.js +1 -1
- package/dist/cjs/jump-button.cjs.entry.js +1 -1
- package/dist/cjs/jump-card.cjs.entry.js +1 -1
- package/dist/cjs/jump-design-system.cjs.js +3 -3
- package/dist/cjs/jump-design-system.cjs.js.map +1 -1
- 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/collection-manifest.json +2 -2
- package/dist/collection/components/jump-pagination/jump-pagination-pages.stories.js +102 -0
- package/dist/collection/components/jump-pagination/jump-pagination-pages.stories.js.map +1 -0
- package/dist/collection/components/jump-pagination/{jump-pagination.stories.js → jump-pagination-products.stories.js} +25 -18
- package/dist/collection/components/jump-pagination/jump-pagination-products.stories.js.map +1 -0
- 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/components/jump-pagination.js +5 -3
- package/dist/components/jump-pagination.js.map +1 -1
- package/dist/esm/{index-6fbf8ed3.js → index-7feee8ea.js} +15 -3
- package/dist/esm/index-7feee8ea.js.map +1 -0
- package/dist/esm/jump-badge.entry.js +1 -1
- package/dist/esm/jump-button.entry.js +1 -1
- package/dist/esm/jump-card.entry.js +1 -1
- package/dist/esm/jump-design-system.js +4 -4
- package/dist/esm/jump-design-system.js.map +1 -1
- 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-22f19a67.entry.js → p-7cfed9c6.entry.js} +2 -2
- package/dist/jump-design-system/{p-f77f001e.entry.js → p-99238e3f.entry.js} +2 -2
- package/dist/jump-design-system/{p-db7d19d5.entry.js → p-9fd6e0a0.entry.js} +2 -2
- package/dist/jump-design-system/{p-f1c84912.entry.js → p-bc02e346.entry.js} +2 -2
- package/dist/jump-design-system/p-c560071a.js +3 -0
- package/dist/jump-design-system/p-c560071a.js.map +1 -0
- package/dist/jump-design-system/p-ddb6c98c.entry.js +2 -0
- package/dist/jump-design-system/p-ddb6c98c.entry.js.map +1 -0
- package/dist/jump-design-system-elements.json +4 -0
- package/dist/types/components/jump-pagination/jump-pagination-pages.stories.d.ts +74 -0
- package/dist/types/components/jump-pagination/{jump-pagination.stories.d.ts → jump-pagination-products.stories.d.ts} +5 -2
- package/dist/types/components/jump-pagination/jump-pagination.d.ts +1 -0
- package/dist/types/components.d.ts +2 -0
- package/package.json +1 -1
- package/readme.md +1 -1
- package/dist/cjs/index-4b95f596.js.map +0 -1
- package/dist/collection/components/jump-pagination/jump-pagination.stories.js.map +0 -1
- package/dist/esm/index-6fbf8ed3.js.map +0 -1
- package/dist/jump-design-system/p-70d78318.entry.js +0 -2
- package/dist/jump-design-system/p-70d78318.entry.js.map +0 -1
- package/dist/jump-design-system/p-c2ab38b9.js +0 -3
- package/dist/jump-design-system/p-c2ab38b9.js.map +0 -1
- /package/dist/jump-design-system/{p-22f19a67.entry.js.map → p-7cfed9c6.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-f77f001e.entry.js.map → p-99238e3f.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-db7d19d5.entry.js.map → p-9fd6e0a0.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-f1c84912.entry.js.map → p-bc02e346.entry.js.map} +0 -0
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-79e97f36.js');
|
|
6
6
|
|
|
7
7
|
const jumpBadgeCss = "jump-badge{--jump-badge-background:var(--primary-standard);--jump-badge-color:#fff;--jump-bafge-border-radius:50px;display:inline-flex;color:var(--jump-badge-color);background-color:var(--jump-badge-background);align-items:center;justify-content:center;font-size:var(--fs-300);font-weight:var(--fw-900);line-height:1;border-radius:var(--jump-bafge-border-radius);border:solid 1px var(--jump-bafge-border-radius);white-space:nowrap;padding:0.35em 0.6em;user-select:none;cursor:inherit}jump-badge[variant=primary]{--jump-badge-background:var(--primary-standard)}jump-badge[variant=secondary]{--jump-badge-background:var(--secondary-standard)}";
|
|
8
8
|
const JumpBadgeStyle0 = jumpBadgeCss;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-79e97f36.js');
|
|
6
6
|
|
|
7
7
|
const jumpButtonCss = "jump-button button,jump-button a{background-color:transparent;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}jump-button{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}jump-button button,jump-button 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)}jump-button button:hover,jump-button a:hover{background-color:var(--jump-button-background-hover);color:var(--jump-button-color-hover)}jump-button button[data-variant=primary],jump-button 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)}jump-button button[data-variant=secondary],jump-button 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)}jump-button button[data-variant=neutral],jump-button 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)}jump-button button[data-variant=white],jump-button 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)}jump-button button[disabled],jump-button a[disabled]{--jump-button-background:var(--jump-button-color-disabled);--jump-button-background-hover:var(--jump-button-color-disabled);cursor:not-allowed}jump-button button[data-pill],jump-button a[data-pill]{border-radius:100rem}jump-button button[data-size=small],jump-button a[data-size=small]{font-size:var(--fs-300, 0.875rem);line-height:var(--lh-300, 1.2);--jump-button-padding:0.5rem 1rem}jump-button button[data-size=medium],jump-button a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3)}jump-button button[data-size=large],jump-button 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}jump-button button[data-outline],jump-button a[data-outline]{background-color:var(--jump-button-background-outline);border:1px solid var(--jump-button-background);color:var(--jump-button-background)}jump-button button[data-outline]:hover,jump-button 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)}jump-button button[data-text],jump-button a[data-text]{background-color:transparent;border:none;color:var(--jump-button-background);padding:0}jump-button button[data-text]:hover,jump-button a[data-text]:hover{background-color:transparent;border:none;color:var(--jump-button-background-hover)}jump-button button[data-only-icon],jump-button a[data-only-icon]{--jump-button-padding:1.125rem}jump-button button[data-only-icon][data-size=small],jump-button a[data-only-icon][data-size=small]{--jump-button-padding:0.5rem}jump-button button[data-only-icon][data-size=medium],jump-button a[data-only-icon][data-size=medium]{--jump-button-padding:1rem}jump-button button[data-only-icon][data-size=large],jump-button a[data-only-icon][data-size=large]{--jump-button-padding:1.125rem}jump-button button.chat,jump-button 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)}";
|
|
8
8
|
const JumpButtonStyle0 = jumpButtonCss;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-79e97f36.js');
|
|
6
6
|
|
|
7
7
|
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;object-fit:cover;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)}";
|
|
8
8
|
const JumpCardStyle0 = jumpCardCss;
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-79e97f36.js');
|
|
6
6
|
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
7
7
|
|
|
8
8
|
/*
|
|
9
|
-
Stencil Client Patch Browser v4.
|
|
9
|
+
Stencil Client Patch Browser v4.13.0 | MIT Licensed | https://stenciljs.com
|
|
10
10
|
*/
|
|
11
11
|
const patchBrowser = () => {
|
|
12
12
|
const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('jump-design-system.cjs.js', document.baseURI).href));
|
|
@@ -19,7 +19,7 @@ const patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-badge.cjs",[[0,"jump-badge",{"label":[513],"variant":[513]}]]],["jump-button.cjs",[[4,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[516],"dark":[516],"shadow":[516],"border":[516],"borderRadius":[516,"border-radius"],"topBorderContentRadius":[516,"top-border-content-radius"],"boxed":[516],"roundedMedia":[516,"rounded-media"],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"],"videoSrc":[513,"video-src"]}]]],["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
|
|
22
|
+
return index.bootstrapLazy([["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"pagLabel":[513,"pag-label"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-badge.cjs",[[0,"jump-badge",{"label":[513],"variant":[513]}]]],["jump-button.cjs",[[4,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[516],"dark":[516],"shadow":[516],"border":[516],"borderRadius":[516,"border-radius"],"topBorderContentRadius":[516,"top-border-content-radius"],"boxed":[516],"roundedMedia":[516,"rounded-media"],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"],"videoSrc":[513,"video-src"]}]]],["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-design-system.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAa3B,IAAI,MAAM,UAAU,GAAG,oNAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACpBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.
|
|
1
|
+
{"file":"jump-design-system.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAa3B,IAAI,MAAM,UAAU,GAAG,oNAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACpBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.13.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n if (importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-79e97f36.js');
|
|
6
6
|
|
|
7
7
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-79e97f36.js');
|
|
6
6
|
|
|
7
7
|
const jumpPaginationCss = ":host{display:block}.JumpPagination{--pagination-label-color:var(--neutral-grey-secondary);--pagination-arrows-color:var(--neutral-grey-secondary);font-family:var(--ff-primary)}.JumpPagination__Wrapper{display:flex;justify-content:space-between}.JumpPagination__Wrapper .elementsPerPage{display:flex;gap:1rem;align-items:center}.JumpPagination__Wrapper .elementsPerPage label{color:var(--pagination-label-color);font-size:14px;font-weight:normal}.JumpPagination__Wrapper .indicators{font-size:16px;font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--pagination-label-color)}.JumpPagination__Wrapper .indicators .arrow{color:var(--pagination-arrows-color);display:flex;align-items:center;gap:10px}.JumpPagination__Wrapper .indicators .elements{color:var(--pagination-label-color);display:flex;align-items:center;gap:5px}";
|
|
8
8
|
const JumpPaginationStyle0 = jumpPaginationCss;
|
|
@@ -11,6 +11,7 @@ const JumpPagination = class {
|
|
|
11
11
|
constructor(hostRef) {
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
this.totalElements = undefined;
|
|
14
|
+
this.pagLabel = 'di';
|
|
14
15
|
this.currentPage = undefined;
|
|
15
16
|
this.lastPage = undefined;
|
|
16
17
|
this.labelElementsPerPage = 'Elementi per pagina';
|
|
@@ -21,11 +22,11 @@ const JumpPagination = class {
|
|
|
21
22
|
}
|
|
22
23
|
render() {
|
|
23
24
|
var _a;
|
|
24
|
-
return (index.h(index.Host, { key: '
|
|
25
|
-
index.h("div", { class: "elementsPerPage" }, index.h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), index.h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (index.h("option", { value: range }, range))))), index.h("div", { key: '
|
|
25
|
+
return (index.h(index.Host, { key: '97d153323192675905ef7efc310edd9544917194', class: "JumpPagination" }, index.h("div", { key: '706326dbd689f2250863df55db66a868deb98465', class: "JumpPagination__Wrapper" }, this.completeVersion &&
|
|
26
|
+
index.h("div", { class: "elementsPerPage" }, index.h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), index.h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (index.h("option", { value: range }, range))))), index.h("div", { key: 'ba6b84fcfc0cb4d2f0f52767f2be99386a6f004c', class: "indicators" }, index.h("div", { key: 'b0786315ca18db1608bd07c5658ec37ae9931802', class: "elements" }, this.completeVersion ?
|
|
26
27
|
index.h("span", null, index.h("span", null, this.firstPage), " - ", index.h("span", null, this.currentPage), " di ", index.h("span", null, this.totalElements))
|
|
27
28
|
:
|
|
28
|
-
index.h("span", null, index.h("span", null, this.currentPage), " di ", index.h("span", null, this.lastPage))), index.h("div", { key: '
|
|
29
|
+
index.h("span", null, index.h("span", null, this.currentPage), " di ", index.h("span", null, this.lastPage))), index.h("div", { key: '93343a7729d7bbd8512d65bc1877041c25f77cdf', class: "arrow" }, this.showAdditionalChrevrons && index.h("jump-icon", { id: "first-page", name: "chevrons-left" }), index.h("jump-icon", { key: 'ed735fb41710b632485cc9a24151590842fbdc48', id: "prev-page", name: "chevron-left" }), index.h("jump-icon", { key: 'fffdbf1d84cee94bf0d2ab561cb36d4de82cc763', id: "next-page", name: "chevron-right" }), this.showAdditionalChrevrons && index.h("jump-icon", { id: "last-page", name: "chevrons-right" }))))));
|
|
29
30
|
}
|
|
30
31
|
};
|
|
31
32
|
JumpPagination.style = JumpPaginationStyle0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-pagination.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,o1BAAo1B,CAAC;AAC/2B,6BAAe,iBAAiB;;MCMnB,cAAc
|
|
1
|
+
{"file":"jump-pagination.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,o1BAAo1B,CAAC;AAC/2B,6BAAe,iBAAiB;;MCMnB,cAAc;;;;wBAMiB,IAAI;;;oCAWU,qBAAqB;8BAKpB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;;+BAUtB,KAAK;uCAEG,KAAK;;IAEjE,MAAM;;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC1BD,kEAAK,KAAK,EAAC,yBAAyB,IAChC,IAAI,CAAC,eAAe;YACpBA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,mBAAO,OAAO,EAAC,UAAU,IAAE,MAAA,IAAI,CAAC,oBAAoB,mCAAI,mBAAmB,CAAS,EAChFA,oBAAQ,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,IAClC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,MAC7BA,oBAAQ,KAAK,EAAE,KAAK,IAAG,KAAK,CAAU,CACvC,CAAC,CACK,CACT,EAERA,kEAAK,KAAK,EAAC,YAAY,IACrBA,kEAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,eAAe;YACnBA,sBACEA,sBAAO,IAAI,CAAC,SAAS,CAAQ,SAAGA,sBAAO,IAAI,CAAC,WAAW,CAAQ,UAAIA,sBAAO,IAAI,CAAC,aAAa,CAAQ,CAC/F;;gBAGPA,sBACEA,sBAAO,IAAI,CAAC,WAAW,CAAQ,UAAIA,sBAAO,IAAI,CAAC,QAAQ,CAAQ,CAC1D,CAEL,EACNA,kEAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,uBAAuB,IAAIA,uBAAW,EAAE,EAAC,YAAY,EAAC,IAAI,EAAC,eAAe,GAAa,EAC7FA,wEAAW,EAAE,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,GAAa,EAC1DA,wEAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,eAAe,GAAa,EAC3D,IAAI,CAAC,uBAAuB,IAAIA,uBAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,gBAAgB,GAAa,CAC1F,CACF,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"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}
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-79e97f36.js');
|
|
6
6
|
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
7
7
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-badge.cjs",[[0,"jump-badge",{"label":[513],"variant":[513]}]]],["jump-button.cjs",[[4,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[516],"dark":[516],"shadow":[516],"border":[516],"borderRadius":[516,"border-radius"],"topBorderContentRadius":[516,"top-border-content-radius"],"boxed":[516],"roundedMedia":[516,"rounded-media"],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"],"videoSrc":[513,"video-src"]}]]],["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
|
|
11
|
+
return index.bootstrapLazy([["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"pagLabel":[513,"pag-label"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-badge.cjs",[[0,"jump-badge",{"label":[513],"variant":[513]}]]],["jump-button.cjs",[[4,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[516],"dark":[516],"shadow":[516],"border":[516],"borderRadius":[516,"border-radius"],"topBorderContentRadius":[516,"top-border-content-radius"],"boxed":[516],"roundedMedia":[516,"rounded-media"],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"],"videoSrc":[513,"video-src"]}]]],["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
title: 'Components/Pagination/Pages',
|
|
3
|
+
tags: ['autodocs'],
|
|
4
|
+
argTypes: {
|
|
5
|
+
pagLabel: {
|
|
6
|
+
name: "Dicitura di paginazione",
|
|
7
|
+
control: 'text',
|
|
8
|
+
description: 'Indica la dicitura di paginazione. Di default è "di".'
|
|
9
|
+
},
|
|
10
|
+
completeVersion: {
|
|
11
|
+
name: 'Versione con selezione di prodotti',
|
|
12
|
+
control: 'boolean',
|
|
13
|
+
description: 'Indica se mostrare la versione con selezione di prodotti'
|
|
14
|
+
},
|
|
15
|
+
showAdditionalChrevrons: {
|
|
16
|
+
name: 'Mostra frecce aggiuntive',
|
|
17
|
+
control: 'boolean',
|
|
18
|
+
description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'
|
|
19
|
+
},
|
|
20
|
+
firstPage: {
|
|
21
|
+
name: 'Primo elemento',
|
|
22
|
+
control: 'number',
|
|
23
|
+
description: 'Se si tratta di pagination per prodotti, indica il valore min di range di prodotto, altrimenti la prima pagina',
|
|
24
|
+
if: {
|
|
25
|
+
arg: 'completeVersion',
|
|
26
|
+
eq: true
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
currentPage: {
|
|
30
|
+
name: 'Elemento Corrente',
|
|
31
|
+
control: 'number',
|
|
32
|
+
description: 'Se si tratta di pagination per prodotti, indica il valore max di range di prodotto, altrimenti la pagina corrente'
|
|
33
|
+
},
|
|
34
|
+
lastPage: {
|
|
35
|
+
name: 'Ultima pagina',
|
|
36
|
+
control: 'number',
|
|
37
|
+
description: 'Indica l\'ultima pagina',
|
|
38
|
+
if: {
|
|
39
|
+
arg: 'completeVersion',
|
|
40
|
+
eq: false
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
totalElements: {
|
|
44
|
+
name: 'Elementi totali',
|
|
45
|
+
control: 'number',
|
|
46
|
+
description: 'Indica il numero totale di elementi disponibili. ',
|
|
47
|
+
if: {
|
|
48
|
+
arg: 'completeVersion',
|
|
49
|
+
eq: true
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
labelElementsPerPage: {
|
|
53
|
+
name: 'Etichetta elementi per pagina',
|
|
54
|
+
control: 'text',
|
|
55
|
+
description: 'Indica l\'etichetta per gli elementi per pagina',
|
|
56
|
+
if: {
|
|
57
|
+
arg: 'completeVersion',
|
|
58
|
+
eq: true
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
elementsRanges: {
|
|
62
|
+
name: 'Range elementi',
|
|
63
|
+
control: 'multi-select',
|
|
64
|
+
options: [10, 20, 30],
|
|
65
|
+
if: {
|
|
66
|
+
arg: 'completeVersion',
|
|
67
|
+
eq: true
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
const Template = (args) => {
|
|
73
|
+
return `<jump-pagination
|
|
74
|
+
current-page="${args.currentPage}"
|
|
75
|
+
first-page="${args.firstPage}"
|
|
76
|
+
last-page="${args.lastPage}"
|
|
77
|
+
total-elements="${args.totalElements}"
|
|
78
|
+
complete-version=${args.completeVersion}
|
|
79
|
+
elements-ranges="${args.elementsRanges}"
|
|
80
|
+
pag-label="${args.pagLabel}"
|
|
81
|
+
show-additional-chrevrons=${args.showAdditionalChrevrons}>
|
|
82
|
+
</jump-pagination>`;
|
|
83
|
+
};
|
|
84
|
+
export const PaginationPerPagineRidotto = Template.bind({});
|
|
85
|
+
PaginationPerPagineRidotto.args = {
|
|
86
|
+
completeVersion: false,
|
|
87
|
+
showAdditionalChrevrons: false,
|
|
88
|
+
firstPage: 1,
|
|
89
|
+
currentPage: 5,
|
|
90
|
+
lastPage: 10,
|
|
91
|
+
pagLabel: 'di'
|
|
92
|
+
};
|
|
93
|
+
export const PaginationPerPagineCompleto = Template.bind({});
|
|
94
|
+
PaginationPerPagineCompleto.args = {
|
|
95
|
+
completeVersion: false,
|
|
96
|
+
showAdditionalChrevrons: true,
|
|
97
|
+
firstPage: 1,
|
|
98
|
+
currentPage: 5,
|
|
99
|
+
lastPage: 10,
|
|
100
|
+
pagLabel: 'di'
|
|
101
|
+
};
|
|
102
|
+
//# sourceMappingURL=jump-pagination-pages.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jump-pagination-pages.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination-pages.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAC;YACP,IAAI,EAAE,yBAAyB;YAC/B,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;SACrE;QACD,eAAe,EAAE;YACf,IAAI,EAAE,oCAAoC;YAC1C,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0DAA0D;SACxE;QACD,uBAAuB,EAAE;YACvB,IAAI,EAAE,0BAA0B;YAChC,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6IAA6I;SAC3J;QACD,SAAS,EAAE;YACT,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,gHAAgH;YAC7H,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,WAAW,EAAE;YACX,IAAI,EAAE,mBAAmB;YACzB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mHAAmH;SACjI;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;YACpC,EAAE,EAAE;gBACJ,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,KAAK;aACV;SACF;QACD,aAAa,EAAE;YACb,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mDAAmD;YAChE,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,oBAAoB,EAAE;YACpB,IAAI,EAAE,+BAA+B;YACrC,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iDAAiD;YAC5D,EAAE,EAAE;gBACJ,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,cAAc,EAAE;YACd,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;YACrB,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;KAIF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,OAAO;8BACqB,IAAI,CAAC,WAAW;4BAClB,IAAI,CAAC,SAAS;2BACf,IAAI,CAAC,QAAQ;gCACR,IAAI,CAAC,aAAa;iCACjB,IAAI,CAAC,eAAe;iCACpB,IAAI,CAAC,cAAc;2BACzB,IAAI,CAAC,QAAQ;0CACE,IAAI,CAAC,uBAAuB;6BACzC,CAAC;AAC9B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5D,0BAA0B,CAAC,IAAI,GAAG;IAChC,eAAe,EAAE,KAAK;IACtB,uBAAuB,EAAE,KAAK;IAC9B,SAAS,EAAE,CAAC;IACZ,WAAW,EAAE,CAAC;IACd,QAAQ,EAAC,EAAE;IACX,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE7D,2BAA2B,CAAC,IAAI,GAAG;IACjC,eAAe,EAAE,KAAK;IACtB,uBAAuB,EAAE,IAAI;IAC7B,SAAS,EAAE,CAAC;IACZ,WAAW,EAAE,CAAC;IACd,QAAQ,EAAC,EAAE;IACX,QAAQ,EAAE,IAAI;CACf,CAAC","sourcesContent":["export default {\n title: 'Components/Pagination/Pages',\n tags: ['autodocs'],\n argTypes: {\n pagLabel:{\n name: \"Dicitura di paginazione\",\n control: 'text',\n description: 'Indica la dicitura di paginazione. Di default è \"di\".'\n },\n completeVersion: {\n name: 'Versione con selezione di prodotti',\n control: 'boolean',\n description: 'Indica se mostrare la versione con selezione di prodotti'\n },\n showAdditionalChrevrons: {\n name: 'Mostra frecce aggiuntive',\n control: 'boolean',\n description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'\n },\n firstPage: {\n name: 'Primo elemento',\n control: 'number',\n description: 'Se si tratta di pagination per prodotti, indica il valore min di range di prodotto, altrimenti la prima pagina',\n if: {\n arg: 'completeVersion',\n eq: true\n },\n },\n currentPage: {\n name: 'Elemento Corrente',\n control: 'number',\n description: 'Se si tratta di pagination per prodotti, indica il valore max di range di prodotto, altrimenti la pagina corrente'\n },\n lastPage: {\n name: 'Ultima pagina',\n control: 'number',\n description: 'Indica l\\'ultima pagina',\n if: {\n arg: 'completeVersion',\n eq: false\n },\n },\n totalElements: {\n name: 'Elementi totali',\n control: 'number',\n description: 'Indica il numero totale di elementi disponibili. ',\n if: {\n arg: 'completeVersion',\n eq: true\n },\n },\n labelElementsPerPage: {\n name: 'Etichetta elementi per pagina',\n control: 'text',\n description: 'Indica l\\'etichetta per gli elementi per pagina',\n if: {\n arg: 'completeVersion',\n eq: true\n },\n },\n elementsRanges: {\n name: 'Range elementi',\n control: 'multi-select', \n options: [10, 20, 30],\n if: {\n arg: 'completeVersion',\n eq: true\n }, \n },\n\n \n \n }\n};\n\nconst Template = (args) => {\n return `<jump-pagination \n current-page=\"${args.currentPage}\" \n first-page=\"${args.firstPage}\" \n last-page=\"${args.lastPage}\" \n total-elements=\"${args.totalElements}\"\n complete-version=${args.completeVersion} \n elements-ranges=\"${args.elementsRanges}\"\n pag-label=\"${args.pagLabel}\"\n show-additional-chrevrons=${args.showAdditionalChrevrons}>\n </jump-pagination>`;\n};\n\nexport const PaginationPerPagineRidotto = Template.bind({});\n\nPaginationPerPagineRidotto.args = {\n completeVersion: false,\n showAdditionalChrevrons: false,\n firstPage: 1,\n currentPage: 5,\n lastPage:10,\n pagLabel: 'di'\n};\n\nexport const PaginationPerPagineCompleto = Template.bind({});\n\nPaginationPerPagineCompleto.args = {\n completeVersion: false,\n showAdditionalChrevrons: true,\n firstPage: 1,\n currentPage: 5,\n lastPage:10,\n pagLabel: 'di'\n};\n"]}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
export default {
|
|
2
|
-
title: 'Components/
|
|
2
|
+
title: 'Components/Pagination/Products',
|
|
3
3
|
tags: ['autodocs'],
|
|
4
4
|
argTypes: {
|
|
5
|
+
pagLabel: {
|
|
6
|
+
name: "Dicitura di paginazione",
|
|
7
|
+
control: 'text',
|
|
8
|
+
description: 'Indica la dicitura di paginazione. Di default è "di".'
|
|
9
|
+
},
|
|
5
10
|
completeVersion: {
|
|
6
11
|
name: 'Versione con selezione di prodotti',
|
|
7
12
|
control: 'boolean',
|
|
@@ -72,6 +77,7 @@ const Template = (args) => {
|
|
|
72
77
|
total-elements="${args.totalElements}"
|
|
73
78
|
complete-version=${args.completeVersion}
|
|
74
79
|
elements-ranges="${args.elementsRanges}"
|
|
80
|
+
pag-label="${args.pagLabel}"
|
|
75
81
|
show-additional-chrevrons=${args.showAdditionalChrevrons}>
|
|
76
82
|
</jump-pagination>`;
|
|
77
83
|
};
|
|
@@ -85,6 +91,7 @@ PaginationPerProdottiRidotto.args = {
|
|
|
85
91
|
totalElements: 150,
|
|
86
92
|
labelElementsPerPage: "Elementi per pagina",
|
|
87
93
|
elementsRanges: [10, 20, 60, 100],
|
|
94
|
+
pagLabel: 'di'
|
|
88
95
|
};
|
|
89
96
|
export const PaginationPerProdottiCompleto = Template.bind({});
|
|
90
97
|
PaginationPerProdottiCompleto.args = {
|
|
@@ -96,21 +103,21 @@ PaginationPerProdottiCompleto.args = {
|
|
|
96
103
|
totalElements: 150,
|
|
97
104
|
labelElementsPerPage: "Elementi per pagina",
|
|
98
105
|
elementsRanges: [10, 20, 60, 100],
|
|
106
|
+
pagLabel: 'di'
|
|
99
107
|
};
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
//# sourceMappingURL=jump-pagination.stories.js.map
|
|
108
|
+
// PaginationPerPagineRidotto.args = {
|
|
109
|
+
// completeVersion: false,
|
|
110
|
+
// showAdditionalChrevrons: false,
|
|
111
|
+
// firstPage: 1,
|
|
112
|
+
// currentPage: 5,
|
|
113
|
+
// lastPage:10,
|
|
114
|
+
// };
|
|
115
|
+
// export const PaginationPerPagineCompleto = Template.bind({});
|
|
116
|
+
// PaginationPerPagineCompleto.args = {
|
|
117
|
+
// completeVersion: false,
|
|
118
|
+
// showAdditionalChrevrons: true,
|
|
119
|
+
// firstPage: 1,
|
|
120
|
+
// currentPage: 5,
|
|
121
|
+
// lastPage:10,
|
|
122
|
+
// };
|
|
123
|
+
//# sourceMappingURL=jump-pagination-products.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jump-pagination-products.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination-products.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,gCAAgC;IACvC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAC;YACP,IAAI,EAAE,yBAAyB;YAC/B,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;SACrE;QACD,eAAe,EAAE;YACf,IAAI,EAAE,oCAAoC;YAC1C,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0DAA0D;SACxE;QACD,uBAAuB,EAAE;YACvB,IAAI,EAAE,0BAA0B;YAChC,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6IAA6I;SAC3J;QACD,SAAS,EAAE;YACT,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,gHAAgH;YAC7H,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,WAAW,EAAE;YACX,IAAI,EAAE,mBAAmB;YACzB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mHAAmH;SACjI;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;YACpC,EAAE,EAAE;gBACJ,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,KAAK;aACV;SACF;QACD,aAAa,EAAE;YACb,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mDAAmD;YAChE,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,oBAAoB,EAAE;YACpB,IAAI,EAAE,+BAA+B;YACrC,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iDAAiD;YAC5D,EAAE,EAAE;gBACJ,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,cAAc,EAAE;YACd,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;YACrB,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;KAIF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,OAAO;8BACqB,IAAI,CAAC,WAAW;4BAClB,IAAI,CAAC,SAAS;2BACf,IAAI,CAAC,QAAQ;gCACR,IAAI,CAAC,aAAa;iCACjB,IAAI,CAAC,eAAe;iCACpB,IAAI,CAAC,cAAc;2BACzB,IAAI,CAAC,QAAQ;0CACE,IAAI,CAAC,uBAAuB;6BACzC,CAAC;AAC9B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE9D,4BAA4B,CAAC,IAAI,GAAG;IAClC,eAAe,EAAE,IAAI;IACrB,uBAAuB,EAAE,KAAK;IAC9B,SAAS,EAAE,CAAC;IACZ,WAAW,EAAE,CAAC;IACd,QAAQ,EAAC,EAAE;IACX,aAAa,EAAE,GAAG;IAClB,oBAAoB,EAAE,qBAAqB;IAC3C,cAAc,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;IACjC,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/D,6BAA6B,CAAC,IAAI,GAAG;IACnC,eAAe,EAAE,IAAI;IACrB,uBAAuB,EAAE,IAAI;IAC7B,SAAS,EAAE,CAAC;IACZ,WAAW,EAAE,CAAC;IACd,QAAQ,EAAC,EAAE;IACX,aAAa,EAAE,GAAG;IAClB,oBAAoB,EAAE,qBAAqB;IAC3C,cAAc,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;IACjC,QAAQ,EAAE,IAAI;CACf,CAAC;AAGF,sCAAsC;AACtC,4BAA4B;AAC5B,oCAAoC;AACpC,kBAAkB;AAClB,oBAAoB;AACpB,iBAAiB;AACjB,KAAK;AAEL,gEAAgE;AAEhE,uCAAuC;AACvC,4BAA4B;AAC5B,mCAAmC;AACnC,kBAAkB;AAClB,oBAAoB;AACpB,iBAAiB;AACjB,KAAK","sourcesContent":["export default {\n title: 'Components/Pagination/Products',\n tags: ['autodocs'],\n argTypes: {\n pagLabel:{\n name: \"Dicitura di paginazione\",\n control: 'text',\n description: 'Indica la dicitura di paginazione. Di default è \"di\".'\n },\n completeVersion: {\n name: 'Versione con selezione di prodotti',\n control: 'boolean',\n description: 'Indica se mostrare la versione con selezione di prodotti'\n },\n showAdditionalChrevrons: {\n name: 'Mostra frecce aggiuntive',\n control: 'boolean',\n description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'\n },\n firstPage: {\n name: 'Primo elemento',\n control: 'number',\n description: 'Se si tratta di pagination per prodotti, indica il valore min di range di prodotto, altrimenti la prima pagina',\n if: {\n arg: 'completeVersion',\n eq: true\n },\n },\n currentPage: {\n name: 'Elemento Corrente',\n control: 'number',\n description: 'Se si tratta di pagination per prodotti, indica il valore max di range di prodotto, altrimenti la pagina corrente'\n },\n lastPage: {\n name: 'Ultima pagina',\n control: 'number',\n description: 'Indica l\\'ultima pagina',\n if: {\n arg: 'completeVersion',\n eq: false\n },\n },\n totalElements: {\n name: 'Elementi totali',\n control: 'number',\n description: 'Indica il numero totale di elementi disponibili. ',\n if: {\n arg: 'completeVersion',\n eq: true\n },\n },\n labelElementsPerPage: {\n name: 'Etichetta elementi per pagina',\n control: 'text',\n description: 'Indica l\\'etichetta per gli elementi per pagina',\n if: {\n arg: 'completeVersion',\n eq: true\n },\n },\n elementsRanges: {\n name: 'Range elementi',\n control: 'multi-select', \n options: [10, 20, 30],\n if: {\n arg: 'completeVersion',\n eq: true\n }, \n },\n\n \n \n }\n};\n\nconst Template = (args) => {\n return `<jump-pagination \n current-page=\"${args.currentPage}\" \n first-page=\"${args.firstPage}\" \n last-page=\"${args.lastPage}\" \n total-elements=\"${args.totalElements}\"\n complete-version=${args.completeVersion} \n elements-ranges=\"${args.elementsRanges}\"\n pag-label=\"${args.pagLabel}\"\n show-additional-chrevrons=${args.showAdditionalChrevrons}>\n </jump-pagination>`;\n};\n\nexport const PaginationPerProdottiRidotto = Template.bind({});\n\nPaginationPerProdottiRidotto.args = {\n completeVersion: true,\n showAdditionalChrevrons: false,\n firstPage: 1,\n currentPage: 1,\n lastPage:20,\n totalElements: 150,\n labelElementsPerPage: \"Elementi per pagina\",\n elementsRanges: [10, 20, 60, 100],\n pagLabel: 'di'\n};\n\nexport const PaginationPerProdottiCompleto = Template.bind({});\n\nPaginationPerProdottiCompleto.args = {\n completeVersion: true,\n showAdditionalChrevrons: true,\n firstPage: 1,\n currentPage: 1,\n lastPage:20,\n totalElements: 150,\n labelElementsPerPage: \"Elementi per pagina\",\n elementsRanges: [10, 20, 60, 100],\n pagLabel: 'di'\n};\n\n\n// PaginationPerPagineRidotto.args = {\n// completeVersion: false,\n// showAdditionalChrevrons: false,\n// firstPage: 1,\n// currentPage: 5,\n// lastPage:10,\n// };\n\n// export const PaginationPerPagineCompleto = Template.bind({});\n\n// PaginationPerPagineCompleto.args = {\n// completeVersion: false,\n// showAdditionalChrevrons: true,\n// firstPage: 1,\n// currentPage: 5,\n// lastPage:10,\n// };\n"]}
|
|
@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
|
|
|
2
2
|
export class JumpPagination {
|
|
3
3
|
constructor() {
|
|
4
4
|
this.totalElements = undefined;
|
|
5
|
+
this.pagLabel = 'di';
|
|
5
6
|
this.currentPage = undefined;
|
|
6
7
|
this.lastPage = undefined;
|
|
7
8
|
this.labelElementsPerPage = 'Elementi per pagina';
|
|
@@ -12,11 +13,11 @@ export class JumpPagination {
|
|
|
12
13
|
}
|
|
13
14
|
render() {
|
|
14
15
|
var _a;
|
|
15
|
-
return (h(Host, { key: '
|
|
16
|
-
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: '
|
|
16
|
+
return (h(Host, { key: '97d153323192675905ef7efc310edd9544917194', class: "JumpPagination" }, h("div", { key: '706326dbd689f2250863df55db66a868deb98465', class: "JumpPagination__Wrapper" }, this.completeVersion &&
|
|
17
|
+
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 ?
|
|
17
18
|
h("span", null, h("span", null, this.firstPage), " - ", h("span", null, this.currentPage), " di ", h("span", null, this.totalElements))
|
|
18
19
|
:
|
|
19
|
-
h("span", null, h("span", null, this.currentPage), " di ", h("span", null, this.lastPage))), h("div", { key: '
|
|
20
|
+
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" }))))));
|
|
20
21
|
}
|
|
21
22
|
static get is() { return "jump-pagination"; }
|
|
22
23
|
static get originalStyleUrls() {
|
|
@@ -48,6 +49,24 @@ export class JumpPagination {
|
|
|
48
49
|
"attribute": "total-elements",
|
|
49
50
|
"reflect": true
|
|
50
51
|
},
|
|
52
|
+
"pagLabel": {
|
|
53
|
+
"type": "string",
|
|
54
|
+
"mutable": false,
|
|
55
|
+
"complexType": {
|
|
56
|
+
"original": "string",
|
|
57
|
+
"resolved": "string",
|
|
58
|
+
"references": {}
|
|
59
|
+
},
|
|
60
|
+
"required": false,
|
|
61
|
+
"optional": false,
|
|
62
|
+
"docs": {
|
|
63
|
+
"tags": [],
|
|
64
|
+
"text": ""
|
|
65
|
+
},
|
|
66
|
+
"attribute": "pag-label",
|
|
67
|
+
"reflect": true,
|
|
68
|
+
"defaultValue": "'di'"
|
|
69
|
+
},
|
|
51
70
|
"currentPage": {
|
|
52
71
|
"type": "number",
|
|
53
72
|
"mutable": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-pagination.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,cAAc
|
|
1
|
+
{"version":3,"file":"jump-pagination.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,cAAc;;;wBAMiB,IAAI;;;oCAWU,qBAAqB;8BAKpB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;;+BAUtB,KAAK;uCAEG,KAAK;;IAEjE,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB;YAC1B,4DAAK,KAAK,EAAC,yBAAyB;gBAChC,IAAI,CAAC,eAAe;oBACpB,WAAK,KAAK,EAAC,iBAAiB;wBAC1B,aAAO,OAAO,EAAC,UAAU,IAAE,MAAA,IAAI,CAAC,oBAAoB,mCAAI,mBAAmB,CAAS;wBAChF,cAAQ,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,IAClC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAClC,cAAQ,KAAK,EAAE,KAAK,IAAG,KAAK,CAAU,CACvC,CAAC,CACK,CACT;gBAER,4DAAK,KAAK,EAAC,YAAY;oBACrB,4DAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,eAAe,CAAC,CAAC;wBACrB;4BACE,gBAAO,IAAI,CAAC,SAAS,CAAQ;;4BAAG,gBAAO,IAAI,CAAC,WAAW,CAAQ;;4BAAI,gBAAO,IAAI,CAAC,aAAa,CAAQ,CAC/F;wBAET,CAAC;4BACC;gCACE,gBAAO,IAAI,CAAC,WAAW,CAAQ;;gCAAI,gBAAO,IAAI,CAAC,QAAQ,CAAQ,CAC1D,CAEL;oBACN,4DAAK,KAAK,EAAC,OAAO;wBACf,IAAI,CAAC,uBAAuB,IAAI,iBAAW,EAAE,EAAC,YAAY,EAAC,IAAI,EAAC,eAAe,GAAa;wBAC7F,kEAAW,EAAE,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,GAAa;wBAC1D,kEAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,eAAe,GAAa;wBAC3D,IAAI,CAAC,uBAAuB,IAAI,iBAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,gBAAgB,GAAa,CAC1F,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["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"]}
|
|
@@ -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}
|
|
@@ -420,6 +420,7 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
|
|
|
420
420
|
* @returns the newly created node
|
|
421
421
|
*/
|
|
422
422
|
const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
423
|
+
var _a;
|
|
423
424
|
// tslint:disable-next-line: prefer-const
|
|
424
425
|
const newVNode = newParentVNode.$children$[childIndex];
|
|
425
426
|
let i = 0;
|
|
@@ -478,6 +479,8 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
478
479
|
elm['s-cr'] = contentRef;
|
|
479
480
|
// remember the slot name, or empty string for default slot
|
|
480
481
|
elm['s-sn'] = newVNode.$name$ || '';
|
|
482
|
+
// remember the ref callback function
|
|
483
|
+
elm['s-rf'] = (_a = newVNode.$attrs$) === null || _a === void 0 ? void 0 : _a.ref;
|
|
481
484
|
// check if we've got an old vnode for this slot
|
|
482
485
|
oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
|
|
483
486
|
if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
|
|
@@ -493,7 +496,15 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
493
496
|
};
|
|
494
497
|
const putBackInOriginalLocation = (parentElm, recursive) => {
|
|
495
498
|
plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
|
|
496
|
-
const oldSlotChildNodes = parentElm.childNodes;
|
|
499
|
+
const oldSlotChildNodes = Array.from(parentElm.childNodes);
|
|
500
|
+
if (parentElm['s-sr'] && BUILD.experimentalSlotFixes) {
|
|
501
|
+
let node = parentElm;
|
|
502
|
+
while ((node = node.nextSibling)) {
|
|
503
|
+
if (node && node['s-sn'] === parentElm['s-sn'] && node['s-sh'] === hostTagName) {
|
|
504
|
+
oldSlotChildNodes.push(node);
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
|
+
}
|
|
497
508
|
for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
|
|
498
509
|
const childNode = oldSlotChildNodes[i];
|
|
499
510
|
if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
|
|
@@ -1195,7 +1206,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
|
|
|
1195
1206
|
// If the node we're currently planning on inserting the new node before is an element,
|
|
1196
1207
|
// we need to do some additional checks to make sure we're inserting the node in the correct order.
|
|
1197
1208
|
// The use case here would be that we have multiple nodes being relocated to the same slot. So, we want
|
|
1198
|
-
// to make sure they get inserted into their new
|
|
1209
|
+
// to make sure they get inserted into their new home in the same order they were declared in their original location.
|
|
1199
1210
|
//
|
|
1200
1211
|
// TODO(STENCIL-914): Remove `experimentalSlotFixes` check
|
|
1201
1212
|
{
|
|
@@ -1236,6 +1247,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
|
|
|
1236
1247
|
}
|
|
1237
1248
|
}
|
|
1238
1249
|
}
|
|
1250
|
+
nodeToRelocate && typeof slotRefNode['s-rf'] === 'function' && slotRefNode['s-rf'](nodeToRelocate);
|
|
1239
1251
|
}
|
|
1240
1252
|
else {
|
|
1241
1253
|
// this node doesn't have a slot home to go to, so let's hide it
|
|
@@ -2090,4 +2102,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
|
|
|
2090
2102
|
|
|
2091
2103
|
export { Host as H, bootstrapLazy as b, h, promiseResolve as p, registerInstance as r, setNonce as s };
|
|
2092
2104
|
|
|
2093
|
-
//# sourceMappingURL=index-
|
|
2105
|
+
//# sourceMappingURL=index-7feee8ea.js.map
|