@zanichelli/albe-web-components 17.0.2 → 17.0.4
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 +4 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/web-components-library.cjs.js +1 -1
- package/dist/cjs/z-anchor-navigation.cjs.entry.js +1 -1
- package/dist/cjs/z-anchor-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/z-app-header_12.cjs.entry.js +13 -14
- package/dist/cjs/z-app-header_12.cjs.entry.js.map +1 -1
- package/dist/cjs/z-book-card-app.cjs.entry.js +1 -1
- package/dist/cjs/z-book-card-app.cjs.entry.js.map +1 -1
- package/dist/cjs/z-book-card.cjs.entry.js +2 -2
- package/dist/cjs/z-book-card.cjs.entry.js.map +1 -1
- package/dist/cjs/z-date-picker.cjs.entry.js +5 -3
- package/dist/cjs/z-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/z-pagination.cjs.entry.js +1 -1
- package/dist/cjs/z-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/z-select.cjs.entry.js +27 -35
- package/dist/cjs/z-select.cjs.entry.js.map +1 -1
- package/dist/collection/components/book-card/z-book-card/index.js +1 -1
- package/dist/collection/components/book-card/z-book-card/index.js.map +1 -1
- package/dist/collection/components/book-card/z-book-card/styles.css +3 -0
- package/dist/collection/components/book-card/z-book-card-app/styles.css +1 -0
- package/dist/collection/components/date-picker/z-date-picker/index.js +41 -3
- package/dist/collection/components/date-picker/z-date-picker/index.js.map +1 -1
- package/dist/collection/components/date-picker/z-date-picker/index.stories.js +17 -5
- package/dist/collection/components/date-picker/z-date-picker/index.stories.js.map +1 -1
- package/dist/collection/components/z-anchor-navigation/index.stories.js +16 -4
- package/dist/collection/components/z-anchor-navigation/index.stories.js.map +1 -1
- package/dist/collection/components/z-anchor-navigation/styles.css +7 -4
- package/dist/collection/components/z-app-header/styles.css +1 -0
- package/dist/collection/components/z-input/index.js +9 -11
- package/dist/collection/components/z-input/index.js.map +1 -1
- package/dist/collection/components/z-input/index.stories.js +21 -21
- package/dist/collection/components/z-input/index.stories.js.map +1 -1
- package/dist/collection/components/z-input/styles.css +97 -75
- package/dist/collection/components/z-input-message/index.js +19 -1
- package/dist/collection/components/z-input-message/index.js.map +1 -1
- package/dist/collection/components/z-input-message/styles.css +9 -4
- package/dist/collection/components/z-pagination/styles.css +7 -11
- package/dist/collection/components/z-select/index.js +27 -35
- package/dist/collection/components/z-select/index.js.map +1 -1
- package/dist/collection/components/z-select/styles.css +18 -17
- package/dist/components/index11.js +10 -12
- package/dist/components/index11.js.map +1 -1
- package/dist/components/index12.js +4 -2
- package/dist/components/index12.js.map +1 -1
- package/dist/components/utils.js +1 -1
- package/dist/components/z-anchor-navigation.js +1 -1
- package/dist/components/z-anchor-navigation.js.map +1 -1
- package/dist/components/z-app-header.js +1 -1
- package/dist/components/z-app-header.js.map +1 -1
- package/dist/components/z-book-card-app.js +1 -1
- package/dist/components/z-book-card-app.js.map +1 -1
- package/dist/components/z-book-card.js +2 -2
- package/dist/components/z-book-card.js.map +1 -1
- package/dist/components/z-date-picker.js +7 -3
- package/dist/components/z-date-picker.js.map +1 -1
- package/dist/components/z-pagination.js +1 -1
- package/dist/components/z-pagination.js.map +1 -1
- package/dist/components/z-select.js +28 -36
- package/dist/components/z-select.js.map +1 -1
- package/dist/components/z-skip-to-content.js +1 -1
- package/dist/esm/{index-8df19678.js → index-092fc7cc.js} +2 -2
- package/dist/esm/{index-8df19678.js.map → index-092fc7cc.js.map} +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{utils-ed82ce58.js → utils-b924649f.js} +2 -2
- package/dist/esm/{utils-ed82ce58.js.map → utils-b924649f.js.map} +1 -1
- package/dist/esm/web-components-library.js +1 -1
- package/dist/esm/z-anchor-navigation.entry.js +1 -1
- package/dist/esm/z-anchor-navigation.entry.js.map +1 -1
- package/dist/esm/z-app-header_12.entry.js +14 -15
- package/dist/esm/z-app-header_12.entry.js.map +1 -1
- package/dist/esm/z-book-card-app.entry.js +1 -1
- package/dist/esm/z-book-card-app.entry.js.map +1 -1
- package/dist/esm/z-book-card-deprecated.entry.js +1 -1
- package/dist/esm/z-book-card.entry.js +2 -2
- package/dist/esm/z-book-card.entry.js.map +1 -1
- package/dist/esm/z-breadcrumb.entry.js +1 -1
- package/dist/esm/z-combobox.entry.js +1 -1
- package/dist/esm/z-date-picker.entry.js +5 -3
- package/dist/esm/z-date-picker.entry.js.map +1 -1
- package/dist/esm/z-menu.entry.js +1 -1
- package/dist/esm/z-myz-card-info.entry.js +1 -1
- package/dist/esm/z-myz-list-item.entry.js +1 -1
- package/dist/esm/z-pagination.entry.js +1 -1
- package/dist/esm/z-pagination.entry.js.map +1 -1
- package/dist/esm/z-select.entry.js +28 -36
- package/dist/esm/z-select.entry.js.map +1 -1
- package/dist/esm/z-skip-to-content.entry.js +1 -1
- package/dist/esm/z-slideshow.entry.js +1 -1
- package/dist/esm/z-table.entry.js +2 -2
- package/dist/esm/z-toggle-switch.entry.js +1 -1
- package/dist/esm/z-tr.entry.js +2 -2
- package/dist/types/components/date-picker/z-date-picker/index.d.ts +4 -0
- package/dist/types/components/z-input-message/index.d.ts +2 -0
- package/dist/types/components/z-select/index.d.ts +1 -1
- package/dist/types/components.d.ts +24 -0
- package/dist/web-components-library/index.esm.js +1 -1
- package/dist/web-components-library/p-0378c12a.entry.js +2 -0
- package/dist/web-components-library/p-0378c12a.entry.js.map +1 -0
- package/dist/web-components-library/p-1e3ff105.entry.js +2 -0
- package/dist/web-components-library/p-1e3ff105.entry.js.map +1 -0
- package/dist/web-components-library/{p-caccf490.entry.js → p-22e32e11.entry.js} +2 -2
- package/{www/build/p-caccf490.entry.js.map → dist/web-components-library/p-22e32e11.entry.js.map} +1 -1
- package/dist/web-components-library/{p-20b628e7.entry.js → p-2fa0042e.entry.js} +2 -2
- package/dist/web-components-library/p-4a3fedbf.entry.js +2 -0
- package/dist/web-components-library/p-4a3fedbf.entry.js.map +1 -0
- package/dist/web-components-library/{p-4fedcbc2.entry.js → p-5387e6f3.entry.js} +2 -2
- package/{www/build/p-0565f1b2.entry.js → dist/web-components-library/p-758333dc.entry.js} +2 -2
- package/{www/build/p-605f6780.entry.js → dist/web-components-library/p-7af33b00.entry.js} +2 -2
- package/{www/build/p-b309bd71.entry.js → dist/web-components-library/p-7f370d17.entry.js} +2 -2
- package/dist/web-components-library/{p-65f1b68b.entry.js → p-9c4b7a51.entry.js} +2 -2
- package/dist/web-components-library/{p-037c59b3.js → p-bba6129f.js} +2 -2
- package/dist/web-components-library/{p-cc8186a9.entry.js → p-bd571858.entry.js} +2 -2
- package/dist/web-components-library/p-c29a520b.entry.js +2 -0
- package/{www/build/p-34f4f441.entry.js.map → dist/web-components-library/p-c29a520b.entry.js.map} +1 -1
- package/dist/web-components-library/p-ce0d5448.entry.js +2 -0
- package/dist/web-components-library/p-ce0d5448.entry.js.map +1 -0
- package/dist/web-components-library/{p-9f0a3d88.entry.js → p-cf7b7e73.entry.js} +2 -2
- package/dist/web-components-library/p-d1cca5ea.entry.js +2 -0
- package/dist/web-components-library/p-d1cca5ea.entry.js.map +1 -0
- package/dist/web-components-library/p-d6a2b1c6.entry.js +2 -0
- package/dist/web-components-library/p-d6a2b1c6.entry.js.map +1 -0
- package/dist/web-components-library/p-e185545c.entry.js +2 -0
- package/dist/web-components-library/{p-10607a39.js → p-e691c0b8.js} +2 -2
- package/{www/build/p-3bf02cab.entry.js → dist/web-components-library/p-e78353d6.entry.js} +2 -2
- package/dist/web-components-library/web-components-library.css +125 -72
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/dist/web-components-library/web-components-library.esm.js.map +1 -1
- package/package.json +1 -1
- package/www/build/index.esm.js +1 -1
- package/www/build/p-01994cd6.js +2 -0
- package/www/build/p-0378c12a.entry.js +2 -0
- package/www/build/p-0378c12a.entry.js.map +1 -0
- package/www/build/p-1e3ff105.entry.js +2 -0
- package/www/build/p-1e3ff105.entry.js.map +1 -0
- package/www/build/{p-caccf490.entry.js → p-22e32e11.entry.js} +2 -2
- package/{dist/web-components-library/p-caccf490.entry.js.map → www/build/p-22e32e11.entry.js.map} +1 -1
- package/www/build/{p-20b628e7.entry.js → p-2fa0042e.entry.js} +2 -2
- package/www/build/p-4a3fedbf.entry.js +2 -0
- package/www/build/p-4a3fedbf.entry.js.map +1 -0
- package/www/build/{p-4fedcbc2.entry.js → p-5387e6f3.entry.js} +2 -2
- package/{dist/web-components-library/p-0565f1b2.entry.js → www/build/p-758333dc.entry.js} +2 -2
- package/{dist/web-components-library/p-605f6780.entry.js → www/build/p-7af33b00.entry.js} +2 -2
- package/{dist/web-components-library/p-b309bd71.entry.js → www/build/p-7f370d17.entry.js} +2 -2
- package/www/build/{p-65f1b68b.entry.js → p-9c4b7a51.entry.js} +2 -2
- package/www/build/{p-4c358c38.css → p-a35437c8.css} +125 -72
- package/www/build/{p-037c59b3.js → p-bba6129f.js} +2 -2
- package/www/build/{p-cc8186a9.entry.js → p-bd571858.entry.js} +2 -2
- package/www/build/p-c29a520b.entry.js +2 -0
- package/{dist/web-components-library/p-34f4f441.entry.js.map → www/build/p-c29a520b.entry.js.map} +1 -1
- package/www/build/p-ce0d5448.entry.js +2 -0
- package/www/build/p-ce0d5448.entry.js.map +1 -0
- package/www/build/{p-9f0a3d88.entry.js → p-cf7b7e73.entry.js} +2 -2
- package/www/build/p-d1cca5ea.entry.js +2 -0
- package/www/build/p-d1cca5ea.entry.js.map +1 -0
- package/www/build/p-d6a2b1c6.entry.js +2 -0
- package/www/build/p-d6a2b1c6.entry.js.map +1 -0
- package/www/build/p-e185545c.entry.js +2 -0
- package/www/build/{p-10607a39.js → p-e691c0b8.js} +2 -2
- package/{dist/web-components-library/p-3bf02cab.entry.js → www/build/p-e78353d6.entry.js} +2 -2
- package/www/build/web-components-library.css +125 -72
- package/www/build/web-components-library.esm.js +1 -1
- package/www/build/web-components-library.esm.js.map +1 -1
- package/www/index.html +1 -1
- package/www/pages/book-cards.html +20 -14
- package/dist/web-components-library/p-015621c8.entry.js +0 -2
- package/dist/web-components-library/p-015621c8.entry.js.map +0 -1
- package/dist/web-components-library/p-34f4f441.entry.js +0 -2
- package/dist/web-components-library/p-38e8c15d.entry.js +0 -2
- package/dist/web-components-library/p-38e8c15d.entry.js.map +0 -1
- package/dist/web-components-library/p-54a70792.entry.js +0 -2
- package/dist/web-components-library/p-54a70792.entry.js.map +0 -1
- package/dist/web-components-library/p-60a9cb8b.entry.js +0 -2
- package/dist/web-components-library/p-60a9cb8b.entry.js.map +0 -1
- package/dist/web-components-library/p-972098a5.entry.js +0 -2
- package/dist/web-components-library/p-972098a5.entry.js.map +0 -1
- package/dist/web-components-library/p-a90027c2.entry.js +0 -2
- package/dist/web-components-library/p-a90027c2.entry.js.map +0 -1
- package/dist/web-components-library/p-deb86b5c.entry.js +0 -2
- package/www/build/p-015621c8.entry.js +0 -2
- package/www/build/p-015621c8.entry.js.map +0 -1
- package/www/build/p-34f4f441.entry.js +0 -2
- package/www/build/p-38e8c15d.entry.js +0 -2
- package/www/build/p-38e8c15d.entry.js.map +0 -1
- package/www/build/p-45f04bb4.js +0 -2
- package/www/build/p-54a70792.entry.js +0 -2
- package/www/build/p-54a70792.entry.js.map +0 -1
- package/www/build/p-60a9cb8b.entry.js +0 -2
- package/www/build/p-60a9cb8b.entry.js.map +0 -1
- package/www/build/p-972098a5.entry.js +0 -2
- package/www/build/p-972098a5.entry.js.map +0 -1
- package/www/build/p-a90027c2.entry.js +0 -2
- package/www/build/p-a90027c2.entry.js.map +0 -1
- package/www/build/p-deb86b5c.entry.js +0 -2
- /package/dist/web-components-library/{p-20b628e7.entry.js.map → p-2fa0042e.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-4fedcbc2.entry.js.map → p-5387e6f3.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-0565f1b2.entry.js.map → p-758333dc.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-605f6780.entry.js.map → p-7af33b00.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-b309bd71.entry.js.map → p-7f370d17.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-65f1b68b.entry.js.map → p-9c4b7a51.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-037c59b3.js.map → p-bba6129f.js.map} +0 -0
- /package/dist/web-components-library/{p-cc8186a9.entry.js.map → p-bd571858.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-9f0a3d88.entry.js.map → p-cf7b7e73.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-deb86b5c.entry.js.map → p-e185545c.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-10607a39.js.map → p-e691c0b8.js.map} +0 -0
- /package/dist/web-components-library/{p-3bf02cab.entry.js.map → p-e78353d6.entry.js.map} +0 -0
- /package/www/build/{p-20b628e7.entry.js.map → p-2fa0042e.entry.js.map} +0 -0
- /package/www/build/{p-4fedcbc2.entry.js.map → p-5387e6f3.entry.js.map} +0 -0
- /package/www/build/{p-0565f1b2.entry.js.map → p-758333dc.entry.js.map} +0 -0
- /package/www/build/{p-605f6780.entry.js.map → p-7af33b00.entry.js.map} +0 -0
- /package/www/build/{p-b309bd71.entry.js.map → p-7f370d17.entry.js.map} +0 -0
- /package/www/build/{p-65f1b68b.entry.js.map → p-9c4b7a51.entry.js.map} +0 -0
- /package/www/build/{p-037c59b3.js.map → p-bba6129f.js.map} +0 -0
- /package/www/build/{p-cc8186a9.entry.js.map → p-bd571858.entry.js.map} +0 -0
- /package/www/build/{p-9f0a3d88.entry.js.map → p-cf7b7e73.entry.js.map} +0 -0
- /package/www/build/{p-deb86b5c.entry.js.map → p-e185545c.entry.js.map} +0 -0
- /package/www/build/{p-10607a39.js.map → p-e691c0b8.js.map} +0 -0
- /package/www/build/{p-3bf02cab.entry.js.map → p-e78353d6.entry.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-anchor-navigation/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;KACtB;CACgC,CAAC;AAEpC,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;6CAEqB,IAAI,CAAC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4H7D;CACoC,CAAC;AAExC;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK;KACnB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,aAAa,CAAC;SACzB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA+CE,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HpC;CACoC,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZAnchorNavigation} from \".\";\nimport \"../z-button/index\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst StoryMeta = {\n title: \"ZAnchorNavigation\",\n component: \"z-anchor-navigation\",\n args: {\n hideUnselected: false,\n },\n} satisfies Meta<ZAnchorNavigation>;\n\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) => html`\n <div class=\"z-anchor-navigation-story-wrapper\">\n <z-anchor-navigation .hideUnselected=${args.hideUnselected}>\n <div>\n <a\n href=\"#first-section\"\n target=\"_self\"\n >First section</a\n >\n <z-button\n variant=\"tertiary\"\n icon=\"share\"\n size=\"x-small\"\n ></z-button>\n </div>\n <div>\n <a\n href=\"#second-section\"\n target=\"_self\"\n >Second section</a\n >\n </div>\n <div>\n <a\n href=\"#third-section\"\n target=\"_self\"\n >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n </a>\n <button\n type=\"button\"\n aria-label=\"share\"\n >\n <z-icon name=\"share\" />\n </button>\n </div>\n <a\n href=\"#fourth-section\"\n target=\"_self\"\n >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n </a>\n </z-anchor-navigation>\n <div>\n <div id=\"first-section\">\n <h4>First section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div id=\"second-section\">\n <h4>Second section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div id=\"third-section\">\n <h4>Third section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div id=\"fourth-section\">\n <h4>Fourth section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n </div>\n </div>\n `,\n} satisfies StoryObj<ZAnchorNavigation>;\n\n/**\n * Setting `autoCurrent` to `false` disables the automatic highlighting of the current section in the anchor navigation\n * and allows manual handling.\n * In this story, for example, the highlighting of the current section is done by clicking on the related button.\n */\nexport const AutoCurrentDisabling = {\n args: {\n autoCurrent: false,\n },\n parameters: {\n controls: {\n exclude: [\"autoCurrent\"],\n },\n },\n render: (args) => html`\n <script>\n Array.from(document.querySelectorAll(\".z-anchor-navigation-manual-current z-button\")).forEach((item) =>\n item.addEventListener(\"click\", (ev) => {\n const sectionID = ev.target.closest(\"z-button\")?.dataset.to;\n const current = document.querySelector(\"#\" + sectionID + \"-anchor\");\n const nav = current?.closest(\"nav\");\n Array.from(nav?.children ?? []).forEach((item) => {\n const isCurrent = item.contains(current);\n if (isCurrent) {\n item.setAttribute(\"data-current\", \"\");\n } else {\n item.removeAttribute(\"data-current\");\n }\n const anchor = item.tagName === \"A\" ? item : item.querySelector(\"a\");\n item?.setAttribute(\"aria-current\", isCurrent.toString());\n });\n const section = document.querySelector(\"#\" + sectionID);\n section?.scrollIntoView();\n })\n );\n </script>\n\n <div class=\"z-anchor-navigation-manual-current\">\n <z-button\n size=\"x-small\"\n data-to=\"first-section\"\n >To first section</z-button\n >\n <z-button\n size=\"x-small\"\n data-to=\"second-section\"\n >To second section</z-button\n >\n <z-button\n size=\"x-small\"\n data-to=\"third-section\"\n >To third section</z-button\n >\n <z-button\n size=\"x-small\"\n data-to=\"fourth-section\"\n >Highlight fourth section</z-button\n >\n </div>\n <div class=\"z-anchor-navigation-story-wrapper\">\n <z-anchor-navigation\n .hideUnselected=${args.hideUnselected}\n .autoCurrent=${args.autoCurrent}\n >\n <div>\n <a id=\"first-section-anchor\">First section</a>\n <z-button\n variant=\"tertiary\"\n icon=\"share\"\n size=\"x-small\"\n ></z-button>\n </div>\n <div>\n <a id=\"second-section-anchor\">Second section</a>\n </div>\n <div>\n <a id=\"third-section-anchor\"\n >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n </a>\n <button\n type=\"button\"\n aria-label=\"share\"\n >\n <z-icon name=\"share\" />\n </button>\n </div>\n <a id=\"fourth-section-anchor\"\n >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n </a>\n </z-anchor-navigation>\n <div class=\"z-anchor-navigation-demo-sections\">\n <div\n class=\"section\"\n id=\"first-section\"\n >\n <h4>First section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div\n class=\"section\"\n id=\"second-section\"\n >\n <h4>Second section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div\n class=\"section\"\n id=\"third-section\"\n >\n <h4>Third section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div\n class=\"section\"\n id=\"fourth-section\"\n >\n <h4>Fourth section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n </div>\n </div>\n `,\n} satisfies StoryObj<ZAnchorNavigation>;\n"]}
|
|
1
|
+
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-anchor-navigation/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;KACtB;CACgC,CAAC;AAEpC,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;6CAEqB,IAAI,CAAC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwI7D;CACoC,CAAC;AAExC;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK;KACnB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,aAAa,CAAC;SACzB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA+CE,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HpC;CACoC,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZAnchorNavigation} from \".\";\nimport \"../z-button/index\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst StoryMeta = {\n title: \"ZAnchorNavigation\",\n component: \"z-anchor-navigation\",\n args: {\n hideUnselected: false,\n },\n} satisfies Meta<ZAnchorNavigation>;\n\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) => html`\n <div class=\"z-anchor-navigation-story-wrapper\">\n <z-anchor-navigation .hideUnselected=${args.hideUnselected}>\n <div>\n <a\n href=\"#first-section\"\n target=\"_self\"\n >First section</a\n >\n <z-button\n variant=\"tertiary\"\n icon=\"share\"\n size=\"x-small\"\n ></z-button>\n </div>\n <div>\n <a\n href=\"#second-section\"\n target=\"_self\"\n >Second section</a\n >\n </div>\n <div>\n <a\n href=\"#third-section\"\n target=\"_self\"\n >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n </a>\n <button\n type=\"button\"\n aria-label=\"share\"\n >\n <z-icon name=\"share\" />\n </button>\n </div>\n <a\n href=\"#fourth-section\"\n target=\"_self\"\n >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n </a>\n </z-anchor-navigation>\n <div>\n <div\n class=\"section\"\n id=\"first-section\"\n >\n <h4>First section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div\n class=\"section\"\n id=\"second-section\"\n >\n <h4>Second section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div\n class=\"section\"\n id=\"third-section\"\n >\n <h4>Third section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div\n class=\"section\"\n id=\"fourth-section\"\n >\n <h4>Fourth section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n </div>\n </div>\n `,\n} satisfies StoryObj<ZAnchorNavigation>;\n\n/**\n * Setting `autoCurrent` to `false` disables the automatic highlighting of the current section in the anchor navigation\n * and allows manual handling.\n * In this story, for example, the highlighting of the current section is done by clicking on the related button.\n */\nexport const AutoCurrentDisabling = {\n args: {\n autoCurrent: false,\n },\n parameters: {\n controls: {\n exclude: [\"autoCurrent\"],\n },\n },\n render: (args) => html`\n <script>\n Array.from(document.querySelectorAll(\".z-anchor-navigation-manual-current z-button\")).forEach((item) =>\n item.addEventListener(\"click\", (ev) => {\n const sectionID = ev.target.closest(\"z-button\")?.dataset.to;\n const current = document.querySelector(\"#\" + sectionID + \"-anchor\");\n const nav = current?.closest(\"nav\");\n Array.from(nav?.children ?? []).forEach((item) => {\n const isCurrent = item.contains(current);\n if (isCurrent) {\n item.setAttribute(\"data-current\", \"\");\n } else {\n item.removeAttribute(\"data-current\");\n }\n const anchor = item.tagName === \"A\" ? item : item.querySelector(\"a\");\n item?.setAttribute(\"aria-current\", isCurrent.toString());\n });\n const section = document.querySelector(\"#\" + sectionID);\n section?.scrollIntoView();\n })\n );\n </script>\n\n <div class=\"z-anchor-navigation-manual-current\">\n <z-button\n size=\"x-small\"\n data-to=\"first-section\"\n >To first section</z-button\n >\n <z-button\n size=\"x-small\"\n data-to=\"second-section\"\n >To second section</z-button\n >\n <z-button\n size=\"x-small\"\n data-to=\"third-section\"\n >To third section</z-button\n >\n <z-button\n size=\"x-small\"\n data-to=\"fourth-section\"\n >Highlight fourth section</z-button\n >\n </div>\n <div class=\"z-anchor-navigation-story-wrapper\">\n <z-anchor-navigation\n .hideUnselected=${args.hideUnselected}\n .autoCurrent=${args.autoCurrent}\n >\n <div>\n <a id=\"first-section-anchor\">First section</a>\n <z-button\n variant=\"tertiary\"\n icon=\"share\"\n size=\"x-small\"\n ></z-button>\n </div>\n <div>\n <a id=\"second-section-anchor\">Second section</a>\n </div>\n <div>\n <a id=\"third-section-anchor\"\n >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n </a>\n <button\n type=\"button\"\n aria-label=\"share\"\n >\n <z-icon name=\"share\" />\n </button>\n </div>\n <a id=\"fourth-section-anchor\"\n >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n </a>\n </z-anchor-navigation>\n <div class=\"z-anchor-navigation-demo-sections\">\n <div\n class=\"section\"\n id=\"first-section\"\n >\n <h4>First section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div\n class=\"section\"\n id=\"second-section\"\n >\n <h4>Second section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div\n class=\"section\"\n id=\"third-section\"\n >\n <h4>Third section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n <div\n class=\"section\"\n id=\"fourth-section\"\n >\n <h4>Fourth section</h4>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n quod non referatur ad corpus.\n </p>\n </div>\n <div class=\"separator\"></div>\n </div>\n </div>\n `,\n} satisfies StoryObj<ZAnchorNavigation>;\n"]}
|
|
@@ -21,7 +21,6 @@ z-anchor-navigation nav a {
|
|
|
21
21
|
box-sizing: border-box;
|
|
22
22
|
padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);
|
|
23
23
|
-webkit-box-orient: vertical;
|
|
24
|
-
color: inherit;
|
|
25
24
|
font-weight: inherit;
|
|
26
25
|
-webkit-line-clamp: 2;
|
|
27
26
|
line-clamp: 2;
|
|
@@ -29,6 +28,10 @@ z-anchor-navigation nav a {
|
|
|
29
28
|
text-decoration: none;
|
|
30
29
|
}
|
|
31
30
|
|
|
31
|
+
z-anchor-navigation nav > * a {
|
|
32
|
+
color: inherit;
|
|
33
|
+
}
|
|
34
|
+
|
|
32
35
|
z-anchor-navigation nav * a:not(:only-child) {
|
|
33
36
|
padding-right: calc(var(--space-unit) * 5);
|
|
34
37
|
}
|
|
@@ -57,7 +60,7 @@ z-anchor-navigation nav > * {
|
|
|
57
60
|
|
|
58
61
|
z-anchor-navigation nav > [data-current] {
|
|
59
62
|
border-left-color: var(--color-primary01);
|
|
60
|
-
color: var(--color-
|
|
63
|
+
color: var(--color-primary01);
|
|
61
64
|
font-weight: var(--font-sb);
|
|
62
65
|
}
|
|
63
66
|
|
|
@@ -106,8 +109,8 @@ z-anchor-navigation nav button {
|
|
|
106
109
|
|
|
107
110
|
z-anchor-navigation nav > *:hover {
|
|
108
111
|
border-left-color: var(--color-hover-primary);
|
|
109
|
-
background-color: var(--color-
|
|
110
|
-
color: var(--color-
|
|
112
|
+
background-color: var(--color-surface02);
|
|
113
|
+
color: var(--color-hover-primary);
|
|
111
114
|
}
|
|
112
115
|
}
|
|
113
116
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
|
-
import { Host } from "@stencil/core/internal";
|
|
2
|
+
import { Fragment, Host } from "@stencil/core/internal";
|
|
3
3
|
import { ControlSize, InputType, LabelPosition } from "../../beans";
|
|
4
4
|
import { boolean, randomId } from "../../utils/utils";
|
|
5
5
|
export class ZInput {
|
|
@@ -123,7 +123,6 @@ export class ZInput {
|
|
|
123
123
|
maxlength: this.maxlength,
|
|
124
124
|
class: {
|
|
125
125
|
[`input-${this.status}`]: !!this.status,
|
|
126
|
-
filled: !!this.value,
|
|
127
126
|
},
|
|
128
127
|
autocomplete: this.autocomplete,
|
|
129
128
|
onInput: (e) => this.emitInputChange(e.target.value),
|
|
@@ -195,33 +194,32 @@ export class ZInput {
|
|
|
195
194
|
if (!this.icon) {
|
|
196
195
|
return;
|
|
197
196
|
}
|
|
198
|
-
return (h("
|
|
197
|
+
return (h("z-icon", { name: this.icon, class: { [this.size]: true, "input-icon": true } }));
|
|
199
198
|
}
|
|
200
199
|
renderResetIcon() {
|
|
201
200
|
let hidden = false;
|
|
202
201
|
if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {
|
|
203
202
|
hidden = true;
|
|
204
203
|
}
|
|
205
|
-
return (h("button", { type: "button", class:
|
|
204
|
+
return (h("button", { type: "button", class: { "reset-icon": true, "input-icon": true, hidden }, "aria-label": "cancella il contenuto dell'input", onClick: () => {
|
|
206
205
|
this.inputRef.value = "";
|
|
207
206
|
this.emitInputChange("");
|
|
208
207
|
} }, h("z-icon", { name: "multiply", class: this.size })));
|
|
209
208
|
}
|
|
210
209
|
renderShowHidePassword() {
|
|
211
|
-
return (h("button", { type: "button", class: "icon
|
|
210
|
+
return (h("button", { type: "button", class: "input-icon toggle-password-icon", disabled: this.disabled, "aria-label": this.passwordHidden ? "mostra password" : "nascondi password", onClick: () => (this.passwordHidden = !this.passwordHidden) }, h("z-icon", { name: this.passwordHidden ? "view-filled" : "view-off-filled", class: this.size })));
|
|
212
211
|
}
|
|
213
212
|
renderMessage() {
|
|
214
213
|
if (boolean(this.message) === false) {
|
|
215
214
|
return;
|
|
216
215
|
}
|
|
217
|
-
return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size }));
|
|
216
|
+
return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
|
|
218
217
|
}
|
|
219
218
|
/* END text/password/email/number */
|
|
220
219
|
/* START textarea */
|
|
221
220
|
renderTextarea() {
|
|
222
221
|
const attributes = this.getTextAttributes();
|
|
223
|
-
|
|
224
|
-
return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { "textarea-wrapper": true, "readonly": attributes.readonly }) }, h("textarea", Object.assign({}, attributes, ariaLabel, this.getRoleAttribute()))), this.renderMessage()));
|
|
222
|
+
return (h(Fragment, null, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { "textarea-wrapper": true, "readonly": !!attributes.readonly }) }, h("textarea", Object.assign({}, attributes, { "aria-label": this.ariaLabel || undefined }, this.getRoleAttribute()))), this.renderMessage()));
|
|
225
223
|
}
|
|
226
224
|
/* END textarea */
|
|
227
225
|
handleCheck(ev) {
|
|
@@ -234,7 +232,7 @@ export class ZInput {
|
|
|
234
232
|
"checkbox-label": true,
|
|
235
233
|
"after": this.labelPosition === LabelPosition.RIGHT,
|
|
236
234
|
"before": this.labelPosition === LabelPosition.LEFT,
|
|
237
|
-
} }, h("z-icon", { name: this.checked ? "checkbox-checked" : "checkbox",
|
|
235
|
+
} }, h("z-icon", { name: this.checked ? "checkbox-checked" : "checkbox", class: this.size }), this.label && h("span", { innerHTML: this.label }))));
|
|
238
236
|
}
|
|
239
237
|
/* END checkbox */
|
|
240
238
|
/* START radio */
|
|
@@ -243,7 +241,7 @@ export class ZInput {
|
|
|
243
241
|
"radio-label": true,
|
|
244
242
|
"after": this.labelPosition === LabelPosition.RIGHT,
|
|
245
243
|
"before": this.labelPosition === LabelPosition.LEFT,
|
|
246
|
-
} }, h("z-icon", { name: this.checked ? "radio-button-checked" : "radio-button",
|
|
244
|
+
} }, h("z-icon", { name: this.checked ? "radio-button-checked" : "radio-button", class: this.size }), this.label && h("span", { innerHTML: this.label }))));
|
|
247
245
|
}
|
|
248
246
|
/* END radio */
|
|
249
247
|
render() {
|
|
@@ -261,7 +259,7 @@ export class ZInput {
|
|
|
261
259
|
default:
|
|
262
260
|
input = this.renderInputText(this.type);
|
|
263
261
|
}
|
|
264
|
-
return h(Host, { key: '
|
|
262
|
+
return h(Host, { key: '9e50aa8a3a1fea9a99f9c91465b257961f1bf4c6' }, input);
|
|
265
263
|
}
|
|
266
264
|
static get is() { return "z-input"; }
|
|
267
265
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-input/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {Host, JSXBase} from \"@stencil/core/internal\";\nimport {ControlSize, InputStatus, InputType, LabelPosition} from \"../../beans\";\nimport {boolean, randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-input\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZInput {\n @Element() hostElement: HTMLZInputElement;\n\n /** the id of the input element */\n @Prop()\n htmlid = `id-${randomId()}`;\n\n /** input types */\n @Prop()\n type: InputType;\n\n /** the input name */\n @Prop()\n name?: string;\n\n /** the input label */\n @Prop()\n label?: string;\n\n /** the input aria-label */\n @Prop()\n ariaLabel = \"\";\n\n /** the input aria-expaded: available for text, password, number, email */\n @Prop()\n ariaExpanded = \"\";\n\n /** the input aria-controls (optional): available for text, password, number, email */\n @Prop()\n ariaControls?: string;\n\n /** the input aria-autocomplete (optional): available for text, password, number, email */\n @Prop()\n ariaAutocomplete?: string;\n\n /** the input aria-activedescendant (optional): available for text, password, number, email */\n @Prop()\n ariaActivedescendant?: string;\n\n /** the input value */\n @Prop({mutable: true})\n value?: string;\n\n /** the input is disabled */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /** the input is readonly */\n @Prop()\n readonly?: boolean = false;\n\n /** the input is required (optional): available for text, password, number, email, textarea, checkbox */\n @Prop()\n required?: boolean = false;\n\n /** checked: available for checkbox, radio */\n @Prop({mutable: true})\n checked?: boolean = false;\n\n /** the input placeholder (optional) */\n @Prop()\n placeholder?: string;\n\n /** the input html title (optional) */\n @Prop()\n htmltitle?: string;\n\n /** the input status (optional): available for text, password, number, email, textarea */\n @Prop()\n status?: InputStatus;\n\n /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */\n @Prop()\n message?: string | boolean = true;\n\n /** the input label position: available for checkbox, radio */\n @Prop()\n labelPosition?: LabelPosition = LabelPosition.RIGHT;\n\n /** the input has autocomplete option (optional): available for text, password, number, email */\n @Prop()\n autocomplete?: string;\n\n /** the input role */\n @Prop()\n role = \"\";\n\n /** render clear icon when typing (optional): available for text */\n @Prop()\n hasclearicon?: boolean = true;\n\n /** render icon (optional): available for text */\n @Prop()\n icon?: string;\n\n /** min number value (optional): available for number */\n @Prop()\n min?: number;\n\n /** Min length value (optional): available for text */\n @Prop()\n minlength?: number;\n\n /** max number value (optional): available for number */\n @Prop()\n max?: number;\n\n /** Max length value (optional): available for text */\n @Prop()\n maxlength?: number;\n\n /** step number value (optional): available for number */\n @Prop()\n step?: number;\n\n /** pattern value (optional): available for tel, text, search, url, email, password*/\n @Prop()\n pattern?: string;\n\n /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n @Prop({reflect: true})\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n isTyping = false;\n\n @State()\n passwordHidden = true;\n\n private timer;\n\n private typingtimeout = 300;\n\n private inputRef: HTMLInputElement;\n\n @Listen(\"inputCheck\", {target: \"document\"})\n inputCheckListener(e: CustomEvent): void {\n const data = e.detail;\n switch (this.type) {\n case InputType.RADIO:\n if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {\n this.checked = false;\n }\n break;\n }\n }\n\n /** get checked status */\n @Method()\n async isChecked(): Promise<boolean> {\n switch (this.type) {\n case InputType.CHECKBOX:\n case InputType.RADIO:\n return this.checked;\n default:\n console.warn(\"`isChecked` method is only available for type `checkbox` and `radio`\");\n\n return false;\n }\n }\n\n /** Emitted on input value change, returns value, validity */\n @Event()\n inputChange: EventEmitter;\n\n private emitInputChange(value: string): void {\n if (!this.isTyping) {\n this.emitStartTyping();\n }\n\n let validity: ValidityState;\n if (this.type === InputType.TEXTAREA) {\n validity = this.getValidity(\"textarea\");\n } else {\n validity = this.getValidity(\"input\");\n }\n this.value = value;\n this.inputChange.emit({value, validity});\n\n clearTimeout(this.timer);\n this.timer = setTimeout(() => {\n this.emitStopTyping(this.value, validity);\n }, this.typingtimeout);\n }\n\n /** Emitted when user starts typing */\n @Event()\n startTyping: EventEmitter;\n\n private emitStartTyping(): void {\n this.isTyping = true;\n this.startTyping.emit();\n }\n\n /** Emitted when user stops typing, returns value, validity */\n @Event()\n stopTyping: EventEmitter;\n\n private emitStopTyping(value: string, validity: ValidityState): void {\n this.isTyping = false;\n this.stopTyping.emit({\n value: value,\n validity: validity,\n });\n }\n\n /** Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity */\n @Event()\n inputCheck: EventEmitter;\n\n private emitInputCheck(checked: boolean): void {\n this.inputCheck.emit({\n id: this.htmlid,\n checked: checked,\n type: this.type,\n name: this.name,\n value: this.value,\n validity: this.getValidity(\"input\"),\n });\n }\n\n /** Emitted on input focus */\n @Event()\n inputFocus: EventEmitter;\n\n private emitInputFocus(): void {\n this.inputFocus.emit({id: this.htmlid});\n }\n\n /** Emitted on input blur */\n @Event()\n inputBlur: EventEmitter;\n\n private emitInputBlur(): void {\n this.inputBlur.emit({id: this.htmlid});\n }\n\n private getValidity(type: string): ValidityState {\n const input = this.hostElement.querySelector(type) as HTMLInputElement;\n\n return input.validity;\n }\n\n /* START text/password/email/number */\n\n private getTextAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return {\n id: this.htmlid,\n name: this.name,\n placeholder: this.placeholder,\n value: this.value,\n disabled: this.disabled,\n readonly: this.readonly,\n required: this.required,\n title: this.htmltitle,\n minlength: this.minlength,\n maxlength: this.maxlength,\n class: {\n [`input-${this.status}`]: !!this.status,\n filled: !!this.value,\n },\n autocomplete: this.autocomplete,\n onInput: (e: InputEvent) => this.emitInputChange((e.target as HTMLInputElement).value),\n };\n }\n\n private getNumberAttributes(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (type != InputType.NUMBER) {\n return;\n }\n\n return {\n min: this.min,\n max: this.max,\n step: this.step,\n };\n }\n\n private getPatternAttribute(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (\n type != InputType.PASSWORD &&\n type != InputType.TEXT &&\n type != InputType.TEL &&\n type != InputType.SEARCH &&\n type != InputType.URL &&\n type != InputType.EMAIL\n ) {\n return;\n }\n\n return {\n pattern: this.pattern,\n };\n }\n\n private getRoleAttribute(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return this.role ? {role: this.role} : {};\n }\n\n private getAriaAttrubutes(): Record<string, unknown> {\n const expanded = this.ariaExpanded ? {\"aria-expanded\": this.ariaExpanded} : {};\n const controls = this.ariaControls ? {\"aria-controls\": this.ariaControls} : {};\n const autocomplete = this.ariaAutocomplete ? {\"aria-autocomplete\": this.ariaAutocomplete} : {};\n const activedescendant = this.ariaActivedescendant ? {\"aria-activedescendant\": this.ariaActivedescendant} : {};\n\n return {\n ...expanded,\n ...controls,\n ...autocomplete,\n ...activedescendant,\n };\n }\n\n private getFocusBlurAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return {\n onFocus: () => this.emitInputFocus(),\n onBlur: () => this.emitInputBlur(),\n };\n }\n\n private renderInputText(type: InputType = InputType.TEXT): HTMLDivElement {\n const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n const attr = {\n ...this.getTextAttributes(),\n ...this.getNumberAttributes(type),\n ...this.getPatternAttribute(type),\n ...ariaLabel,\n ...this.getRoleAttribute(),\n ...this.getAriaAttrubutes(),\n ...this.getFocusBlurAttributes(),\n };\n if (this.icon || type === InputType.PASSWORD) {\n Object.assign(attr.class, {\"has-icon\": true});\n }\n if (this.hasclearicon && type != InputType.NUMBER) {\n Object.assign(attr.class, {\"has-clear-icon\": true});\n }\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div>\n <input\n type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\n {...attr}\n ref={(el) => (this.inputRef = el)}\n />\n {this.renderIcons()}\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n private renderLabel(): HTMLLabelElement {\n if (!this.label) {\n return;\n }\n\n return (\n <label\n class=\"input-label body-5-sb\"\n id={`${this.htmlid}_label`}\n htmlFor={this.htmlid}\n >\n {this.label}\n </label>\n );\n }\n\n private renderIcons(): HTMLSpanElement {\n return (\n <span class=\"icons-wrapper\">\n {this.renderResetIcon()}\n {this.renderIcon()}\n </span>\n );\n }\n\n private renderIcon(): HTMLButtonElement {\n if (this.type === InputType.PASSWORD) {\n return this.renderShowHidePassword();\n }\n\n if (!this.icon) {\n return;\n }\n\n return (\n <button\n type=\"button\"\n class=\"icon-button input-icon\"\n tabIndex={-1}\n aria-hidden=\"true\"\n >\n <z-icon\n name={this.icon}\n class={this.size}\n />\n </button>\n );\n }\n\n private renderResetIcon(): HTMLButtonElement {\n let hidden = false;\n if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {\n hidden = true;\n }\n\n return (\n <button\n type=\"button\"\n class={`icon-button reset-icon ${hidden ? \"hidden\" : \"\"}`}\n aria-label=\"cancella il contenuto dell'input\"\n onClick={() => {\n this.inputRef.value = \"\";\n this.emitInputChange(\"\");\n }}\n >\n <z-icon\n name=\"multiply\"\n class={this.size}\n />\n </button>\n );\n }\n\n private renderShowHidePassword(): HTMLButtonElement {\n return (\n <button\n type=\"button\"\n class=\"icon-button toggle-password-icon\"\n disabled={this.disabled}\n aria-label={this.passwordHidden ? \"mostra password\" : \"nascondi password\"}\n onClick={() => (this.passwordHidden = !this.passwordHidden)}\n >\n <z-icon\n name={this.passwordHidden ? \"view-filled\" : \"view-off-filled\"}\n class={this.size}\n />\n </button>\n );\n }\n\n private renderMessage(): HTMLZInputMessageElement {\n if (boolean(this.message) === false) {\n return;\n }\n\n return (\n <z-input-message\n message={boolean(this.message) === true ? undefined : (this.message as string)}\n status={this.status}\n class={this.size}\n />\n );\n }\n\n /* END text/password/email/number */\n\n /* START textarea */\n\n private renderTextarea(): HTMLDivElement {\n const attributes = this.getTextAttributes();\n const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div\n class={{\n ...(attributes.class as Record<string, boolean>),\n \"textarea-wrapper\": true,\n \"readonly\": attributes.readonly as boolean,\n }}\n >\n <textarea\n {...attributes}\n {...ariaLabel}\n {...this.getRoleAttribute()}\n ></textarea>\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n /* END textarea */\n\n private handleCheck(ev: Event): void {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.emitInputCheck(this.checked);\n }\n\n /* START checkbox */\n private renderCheckbox(): HTMLDivElement {\n return (\n <div class=\"checkbox-wrapper\">\n <input\n id={this.htmlid}\n type=\"checkbox\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getRoleAttribute()}\n {...this.getFocusBlurAttributes()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"checkbox-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"checkbox-checked\" : \"checkbox\"}\n aria-hidden=\"true\"\n class={this.size}\n />\n {this.label && <span innerHTML={this.label}></span>}\n </label>\n </div>\n );\n }\n\n /* END checkbox */\n\n /* START radio */\n private renderRadio(): HTMLDivElement {\n return (\n <div class=\"radio-wrapper\">\n <input\n id={this.htmlid}\n type=\"radio\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getRoleAttribute()}\n {...this.getFocusBlurAttributes()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"radio-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"radio-button-checked\" : \"radio-button\"}\n aria-hidden=\"true\"\n class={this.size}\n />\n {this.label && <span innerHTML={this.label} />}\n </label>\n </div>\n );\n }\n /* END radio */\n\n render(): HTMLInputElement | HTMLDivElement {\n let input;\n switch (this.type) {\n case InputType.TEXTAREA:\n input = this.renderTextarea();\n break;\n case InputType.CHECKBOX:\n input = this.renderCheckbox();\n break;\n case InputType.RADIO:\n input = this.renderRadio();\n break;\n default:\n input = this.renderInputText(this.type);\n }\n\n return <Host>{input}</Host>;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-input/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {Fragment, Host, JSXBase} from \"@stencil/core/internal\";\nimport {ControlSize, InputStatus, InputType, LabelPosition} from \"../../beans\";\nimport {boolean, randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-input\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZInput {\n @Element() hostElement: HTMLZInputElement;\n\n /** the id of the input element */\n @Prop()\n htmlid = `id-${randomId()}`;\n\n /** input types */\n @Prop()\n type: InputType;\n\n /** the input name */\n @Prop()\n name?: string;\n\n /** the input label */\n @Prop()\n label?: string;\n\n /** the input aria-label */\n @Prop()\n ariaLabel = \"\";\n\n /** the input aria-expaded: available for text, password, number, email */\n @Prop()\n ariaExpanded = \"\";\n\n /** the input aria-controls (optional): available for text, password, number, email */\n @Prop()\n ariaControls?: string;\n\n /** the input aria-autocomplete (optional): available for text, password, number, email */\n @Prop()\n ariaAutocomplete?: string;\n\n /** the input aria-activedescendant (optional): available for text, password, number, email */\n @Prop()\n ariaActivedescendant?: string;\n\n /** the input value */\n @Prop({mutable: true})\n value?: string;\n\n /** the input is disabled */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /** the input is readonly */\n @Prop()\n readonly?: boolean = false;\n\n /** the input is required (optional): available for text, password, number, email, textarea, checkbox */\n @Prop()\n required?: boolean = false;\n\n /** checked: available for checkbox, radio */\n @Prop({mutable: true})\n checked?: boolean = false;\n\n /** the input placeholder (optional) */\n @Prop()\n placeholder?: string;\n\n /** the input html title (optional) */\n @Prop()\n htmltitle?: string;\n\n /** the input status (optional): available for text, password, number, email, textarea */\n @Prop()\n status?: InputStatus;\n\n /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */\n @Prop()\n message?: string | boolean = true;\n\n /** the input label position: available for checkbox, radio */\n @Prop()\n labelPosition?: LabelPosition = LabelPosition.RIGHT;\n\n /** the input has autocomplete option (optional): available for text, password, number, email */\n @Prop()\n autocomplete?: string;\n\n /** the input role */\n @Prop()\n role = \"\";\n\n /** render clear icon when typing (optional): available for text */\n @Prop()\n hasclearicon?: boolean = true;\n\n /** render icon (optional): available for text */\n @Prop()\n icon?: string;\n\n /** min number value (optional): available for number */\n @Prop()\n min?: number;\n\n /** Min length value (optional): available for text */\n @Prop()\n minlength?: number;\n\n /** max number value (optional): available for number */\n @Prop()\n max?: number;\n\n /** Max length value (optional): available for text */\n @Prop()\n maxlength?: number;\n\n /** step number value (optional): available for number */\n @Prop()\n step?: number;\n\n /** pattern value (optional): available for tel, text, search, url, email, password*/\n @Prop()\n pattern?: string;\n\n /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n @Prop({reflect: true})\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n isTyping = false;\n\n @State()\n passwordHidden = true;\n\n private timer;\n\n private typingtimeout = 300;\n\n private inputRef: HTMLInputElement;\n\n @Listen(\"inputCheck\", {target: \"document\"})\n inputCheckListener(e: CustomEvent): void {\n const data = e.detail;\n switch (this.type) {\n case InputType.RADIO:\n if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {\n this.checked = false;\n }\n break;\n }\n }\n\n /** get checked status */\n @Method()\n async isChecked(): Promise<boolean> {\n switch (this.type) {\n case InputType.CHECKBOX:\n case InputType.RADIO:\n return this.checked;\n default:\n console.warn(\"`isChecked` method is only available for type `checkbox` and `radio`\");\n\n return false;\n }\n }\n\n /** Emitted on input value change, returns value, validity */\n @Event()\n inputChange: EventEmitter;\n\n private emitInputChange(value: string): void {\n if (!this.isTyping) {\n this.emitStartTyping();\n }\n\n let validity: ValidityState;\n if (this.type === InputType.TEXTAREA) {\n validity = this.getValidity(\"textarea\");\n } else {\n validity = this.getValidity(\"input\");\n }\n this.value = value;\n this.inputChange.emit({value, validity});\n\n clearTimeout(this.timer);\n this.timer = setTimeout(() => {\n this.emitStopTyping(this.value, validity);\n }, this.typingtimeout);\n }\n\n /** Emitted when user starts typing */\n @Event()\n startTyping: EventEmitter;\n\n private emitStartTyping(): void {\n this.isTyping = true;\n this.startTyping.emit();\n }\n\n /** Emitted when user stops typing, returns value, validity */\n @Event()\n stopTyping: EventEmitter;\n\n private emitStopTyping(value: string, validity: ValidityState): void {\n this.isTyping = false;\n this.stopTyping.emit({\n value: value,\n validity: validity,\n });\n }\n\n /** Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity */\n @Event()\n inputCheck: EventEmitter;\n\n private emitInputCheck(checked: boolean): void {\n this.inputCheck.emit({\n id: this.htmlid,\n checked: checked,\n type: this.type,\n name: this.name,\n value: this.value,\n validity: this.getValidity(\"input\"),\n });\n }\n\n /** Emitted on input focus */\n @Event()\n inputFocus: EventEmitter;\n\n private emitInputFocus(): void {\n this.inputFocus.emit({id: this.htmlid});\n }\n\n /** Emitted on input blur */\n @Event()\n inputBlur: EventEmitter;\n\n private emitInputBlur(): void {\n this.inputBlur.emit({id: this.htmlid});\n }\n\n private getValidity(type: string): ValidityState {\n const input = this.hostElement.querySelector(type) as HTMLInputElement;\n\n return input.validity;\n }\n\n /* START text/password/email/number */\n\n private getTextAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return {\n id: this.htmlid,\n name: this.name,\n placeholder: this.placeholder,\n value: this.value,\n disabled: this.disabled,\n readonly: this.readonly,\n required: this.required,\n title: this.htmltitle,\n minlength: this.minlength,\n maxlength: this.maxlength,\n class: {\n [`input-${this.status}`]: !!this.status,\n },\n autocomplete: this.autocomplete,\n onInput: (e: InputEvent) => this.emitInputChange((e.target as HTMLInputElement).value),\n };\n }\n\n private getNumberAttributes(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (type != InputType.NUMBER) {\n return;\n }\n\n return {\n min: this.min,\n max: this.max,\n step: this.step,\n };\n }\n\n private getPatternAttribute(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (\n type != InputType.PASSWORD &&\n type != InputType.TEXT &&\n type != InputType.TEL &&\n type != InputType.SEARCH &&\n type != InputType.URL &&\n type != InputType.EMAIL\n ) {\n return;\n }\n\n return {\n pattern: this.pattern,\n };\n }\n\n private getRoleAttribute(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return this.role ? {role: this.role} : {};\n }\n\n private getAriaAttrubutes(): Record<string, unknown> {\n const expanded = this.ariaExpanded ? {\"aria-expanded\": this.ariaExpanded} : {};\n const controls = this.ariaControls ? {\"aria-controls\": this.ariaControls} : {};\n const autocomplete = this.ariaAutocomplete ? {\"aria-autocomplete\": this.ariaAutocomplete} : {};\n const activedescendant = this.ariaActivedescendant ? {\"aria-activedescendant\": this.ariaActivedescendant} : {};\n\n return {\n ...expanded,\n ...controls,\n ...autocomplete,\n ...activedescendant,\n };\n }\n\n private getFocusBlurAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return {\n onFocus: () => this.emitInputFocus(),\n onBlur: () => this.emitInputBlur(),\n };\n }\n\n private renderInputText(type: InputType = InputType.TEXT): HTMLDivElement {\n const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n const attr = {\n ...this.getTextAttributes(),\n ...this.getNumberAttributes(type),\n ...this.getPatternAttribute(type),\n ...ariaLabel,\n ...this.getRoleAttribute(),\n ...this.getAriaAttrubutes(),\n ...this.getFocusBlurAttributes(),\n };\n if (this.icon || type === InputType.PASSWORD) {\n Object.assign(attr.class, {\"has-icon\": true});\n }\n if (this.hasclearicon && type != InputType.NUMBER) {\n Object.assign(attr.class, {\"has-clear-icon\": true});\n }\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div>\n <input\n type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\n {...attr}\n ref={(el) => (this.inputRef = el)}\n />\n {this.renderIcons()}\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n private renderLabel(): HTMLLabelElement {\n if (!this.label) {\n return;\n }\n\n return (\n <label\n class=\"input-label body-5-sb\"\n id={`${this.htmlid}_label`}\n htmlFor={this.htmlid}\n >\n {this.label}\n </label>\n );\n }\n\n private renderIcons(): HTMLSpanElement {\n return (\n <span class=\"icons-wrapper\">\n {this.renderResetIcon()}\n {this.renderIcon()}\n </span>\n );\n }\n\n private renderIcon(): HTMLButtonElement {\n if (this.type === InputType.PASSWORD) {\n return this.renderShowHidePassword();\n }\n\n if (!this.icon) {\n return;\n }\n\n return (\n <z-icon\n name={this.icon}\n class={{[this.size]: true, \"input-icon\": true}}\n />\n );\n }\n\n private renderResetIcon(): HTMLButtonElement {\n let hidden = false;\n if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {\n hidden = true;\n }\n\n return (\n <button\n type=\"button\"\n class={{\"reset-icon\": true, \"input-icon\": true, hidden}}\n aria-label=\"cancella il contenuto dell'input\"\n onClick={() => {\n this.inputRef.value = \"\";\n this.emitInputChange(\"\");\n }}\n >\n <z-icon\n name=\"multiply\"\n class={this.size}\n />\n </button>\n );\n }\n\n private renderShowHidePassword(): HTMLButtonElement {\n return (\n <button\n type=\"button\"\n class=\"input-icon toggle-password-icon\"\n disabled={this.disabled}\n aria-label={this.passwordHidden ? \"mostra password\" : \"nascondi password\"}\n onClick={() => (this.passwordHidden = !this.passwordHidden)}\n >\n <z-icon\n name={this.passwordHidden ? \"view-filled\" : \"view-off-filled\"}\n class={this.size}\n />\n </button>\n );\n }\n\n private renderMessage(): HTMLZInputMessageElement {\n if (boolean(this.message) === false) {\n return;\n }\n\n return (\n <z-input-message\n message={boolean(this.message) === true ? undefined : (this.message as string)}\n status={this.status}\n class={this.size}\n disabled={this.disabled}\n />\n );\n }\n\n /* END text/password/email/number */\n\n /* START textarea */\n\n private renderTextarea(): HTMLDivElement {\n const attributes = this.getTextAttributes();\n\n return (\n <Fragment>\n {this.renderLabel()}\n <div\n class={{\n ...(attributes.class as {[className: string]: boolean}),\n \"textarea-wrapper\": true,\n \"readonly\": !!attributes.readonly,\n }}\n >\n <textarea\n {...attributes}\n aria-label={this.ariaLabel || undefined}\n {...this.getRoleAttribute()}\n ></textarea>\n </div>\n {this.renderMessage()}\n </Fragment>\n );\n }\n\n /* END textarea */\n\n private handleCheck(ev: Event): void {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.emitInputCheck(this.checked);\n }\n\n /* START checkbox */\n private renderCheckbox(): HTMLDivElement {\n return (\n <div class=\"checkbox-wrapper\">\n <input\n id={this.htmlid}\n type=\"checkbox\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getRoleAttribute()}\n {...this.getFocusBlurAttributes()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"checkbox-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.size}\n />\n {this.label && <span innerHTML={this.label}></span>}\n </label>\n </div>\n );\n }\n\n /* END checkbox */\n\n /* START radio */\n private renderRadio(): HTMLDivElement {\n return (\n <div class=\"radio-wrapper\">\n <input\n id={this.htmlid}\n type=\"radio\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getRoleAttribute()}\n {...this.getFocusBlurAttributes()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"radio-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"radio-button-checked\" : \"radio-button\"}\n class={this.size}\n />\n {this.label && <span innerHTML={this.label} />}\n </label>\n </div>\n );\n }\n /* END radio */\n\n render(): HTMLInputElement | HTMLDivElement {\n let input;\n switch (this.type) {\n case InputType.TEXTAREA:\n input = this.renderTextarea();\n break;\n case InputType.CHECKBOX:\n input = this.renderCheckbox();\n break;\n case InputType.RADIO:\n input = this.renderRadio();\n break;\n default:\n input = this.renderInputText(this.type);\n }\n\n return <Host>{input}</Host>;\n }\n}\n"]}
|
|
@@ -75,14 +75,14 @@ export const AllProps = {
|
|
|
75
75
|
status=${args.status}
|
|
76
76
|
message=${args.message}
|
|
77
77
|
icon=${args.icon}
|
|
78
|
-
disabled=${args.disabled}
|
|
79
|
-
readonly=${args.readonly}
|
|
80
|
-
required=${args.required}
|
|
81
|
-
checked=${args.checked}
|
|
78
|
+
.disabled=${args.disabled}
|
|
79
|
+
.readonly=${args.readonly}
|
|
80
|
+
.required=${args.required}
|
|
81
|
+
.checked=${args.checked}
|
|
82
82
|
hasclearicon=${args.hasclearicon}
|
|
83
83
|
htmlid=${args.htmlid}
|
|
84
84
|
htmltitle=${args.htmltitle}
|
|
85
|
-
autocomplete=${args.autocomplete}
|
|
85
|
+
.autocomplete=${args.autocomplete}
|
|
86
86
|
min=${args.min}
|
|
87
87
|
minlength=${args.minlength}
|
|
88
88
|
max=${args.max}
|
|
@@ -105,13 +105,13 @@ export const ZInputText = {
|
|
|
105
105
|
status=${args.status}
|
|
106
106
|
message=${args.message}
|
|
107
107
|
icon=${args.icon}
|
|
108
|
-
disabled=${args.disabled}
|
|
109
|
-
readonly=${args.readonly}
|
|
110
|
-
required=${args.required}
|
|
108
|
+
.disabled=${args.disabled}
|
|
109
|
+
.readonly=${args.readonly}
|
|
110
|
+
.required=${args.required}
|
|
111
111
|
hasclearicon=${args.hasclearicon}
|
|
112
112
|
htmlid=${args.htmlid}
|
|
113
113
|
htmltitle=${args.htmltitle}
|
|
114
|
-
autocomplete=${args.autocomplete}
|
|
114
|
+
.autocomplete=${args.autocomplete}
|
|
115
115
|
size=${args.size}
|
|
116
116
|
minlength=${args.minlength}
|
|
117
117
|
maxlength=${args.maxlength}
|
|
@@ -159,9 +159,9 @@ export const ZInputTextarea = {
|
|
|
159
159
|
name=${args.name}
|
|
160
160
|
status=${args.status}
|
|
161
161
|
message=${args.message}
|
|
162
|
-
disabled=${args.disabled}
|
|
163
|
-
readonly=${args.readonly}
|
|
164
|
-
required=${args.required}
|
|
162
|
+
.disabled=${args.disabled}
|
|
163
|
+
.readonly=${args.readonly}
|
|
164
|
+
.required=${args.required}
|
|
165
165
|
htmlid=${args.htmlid}
|
|
166
166
|
htmltitle=${args.htmltitle}
|
|
167
167
|
size=${args.size}
|
|
@@ -219,10 +219,10 @@ export const ZInputCheckbox = {
|
|
|
219
219
|
aria-label=${args.ariaLabel}
|
|
220
220
|
.labelPosition=${args.labelPosition}
|
|
221
221
|
name=${args.name}
|
|
222
|
-
disabled=${args.disabled}
|
|
223
|
-
readonly=${args.readonly}
|
|
224
|
-
required=${args.required}
|
|
225
|
-
checked=${args.checked}
|
|
222
|
+
.disabled=${args.disabled}
|
|
223
|
+
.readonly=${args.readonly}
|
|
224
|
+
.required=${args.required}
|
|
225
|
+
.checked=${args.checked}
|
|
226
226
|
htmlid=${args.htmlid}
|
|
227
227
|
htmltitle=${args.htmltitle}
|
|
228
228
|
size=${args.size}
|
|
@@ -259,10 +259,10 @@ export const ZInputRadio = {
|
|
|
259
259
|
.labelPosition=${args.labelPosition}
|
|
260
260
|
name=${args.name}
|
|
261
261
|
value=${args.value}
|
|
262
|
-
disabled=${args.disabled}
|
|
263
|
-
readonly=${args.readonly}
|
|
264
|
-
required=${args.required}
|
|
265
|
-
checked=${args.checked}
|
|
262
|
+
.disabled=${args.disabled}
|
|
263
|
+
.readonly=${args.readonly}
|
|
264
|
+
.required=${args.required}
|
|
265
|
+
.checked=${args.checked}
|
|
266
266
|
htmlid=${args.htmlid}
|
|
267
267
|
htmltitle=${args.htmltitle}
|
|
268
268
|
size=${args.size}
|
|
@@ -287,7 +287,7 @@ export const ZInputNumber = {
|
|
|
287
287
|
min=${args.min}
|
|
288
288
|
max=${args.max}
|
|
289
289
|
step=${args.step}
|
|
290
|
-
hasclearicon=${args.hasclearicon}
|
|
290
|
+
.hasclearicon=${args.hasclearicon}
|
|
291
291
|
></z-input>
|
|
292
292
|
`,
|
|
293
293
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-input/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZInput} from \".\";\nimport {ControlSize, InputStatus, InputType, LabelPosition} from \"../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZInput\",\n component: \"z-input\",\n argTypes: {\n type: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(InputType),\n },\n labelPosition: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(LabelPosition),\n },\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ControlSize),\n },\n status: {\n control: {\n type: \"inline-radio\",\n labels: {\n null: \"-\",\n },\n },\n options: [null, ...Object.values(InputStatus)],\n },\n },\n args: {\n type: InputType.TEXT,\n label: \"this is the input label\",\n ariaLabel: \"\",\n labelPosition: LabelPosition.RIGHT,\n placeholder: \"input placeholder text\",\n value: \"\",\n size: ControlSize.BIG,\n name: \"\",\n status: null,\n message: \"helper text\",\n icon: \"\",\n disabled: false,\n readonly: false,\n required: false,\n checked: false,\n hasclearicon: true,\n htmlid: \"input-id\",\n htmltitle: \"\",\n autocomplete: \"\",\n min: 1,\n minlength: 1,\n max: 10,\n maxlength: 10,\n step: 1,\n pattern: \"\",\n },\n} satisfies Meta<ZInput>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZInput>;\n\nexport const AllProps = {\n render: (args) => html`\n <z-input\n type=${args.type}\n label=${args.label}\n aria-label=${args.ariaLabel}\n .labelPosition=${args.labelPosition}\n placeholder=${args.placeholder}\n value=${args.value}\n name=${args.name}\n status=${args.status}\n message=${args.message}\n icon=${args.icon}\n disabled=${args.disabled}\n readonly=${args.readonly}\n required=${args.required}\n checked=${args.checked}\n hasclearicon=${args.hasclearicon}\n htmlid=${args.htmlid}\n htmltitle=${args.htmltitle}\n autocomplete=${args.autocomplete}\n min=${args.min}\n minlength=${args.minlength}\n max=${args.max}\n maxlength=${args.maxlength}\n step=${args.step}\n pattern=${args.pattern}\n size=${args.size}\n ></z-input>\n `,\n} satisfies Story;\n\nexport const ZInputText = {\n render: (args) => html`\n <z-input\n type=${args.type}\n label=${args.label}\n aria-label=${args.ariaLabel}\n placeholder=${args.placeholder}\n value=${args.value}\n name=${args.name}\n status=${args.status}\n message=${args.message}\n icon=${args.icon}\n disabled=${args.disabled}\n readonly=${args.readonly}\n required=${args.required}\n hasclearicon=${args.hasclearicon}\n htmlid=${args.htmlid}\n htmltitle=${args.htmltitle}\n autocomplete=${args.autocomplete}\n size=${args.size}\n minlength=${args.minlength}\n maxlength=${args.maxlength}\n ></z-input>\n `,\n parameters: {\n controls: {\n include: [\n \"type\",\n \"label\",\n \"ariaLabel\",\n \"placeholder\",\n \"value\",\n \"name\",\n \"status\",\n \"message\",\n \"icon\",\n \"disabled\",\n \"readonly\",\n \"required\",\n \"hasclearicon\",\n \"htmlid\",\n \"htmltitle\",\n \"autocomplete\",\n \"size\",\n \"minlength\",\n \"maxlength\",\n ],\n },\n },\n argTypes: {\n type: {\n options: Object.values(InputType).filter((type) => [\"text\", \"password\", \"number\", \"email\"].includes(type)),\n },\n },\n} satisfies Story;\n\nexport const ZInputTextarea = {\n render: (args) => html`\n <z-input\n type=${args.type}\n label=${args.label}\n aria-label=${args.ariaLabel}\n placeholder=${args.placeholder}\n value=${args.value}\n name=${args.name}\n status=${args.status}\n message=${args.message}\n disabled=${args.disabled}\n readonly=${args.readonly}\n required=${args.required}\n htmlid=${args.htmlid}\n htmltitle=${args.htmltitle}\n size=${args.size}\n ></z-input>\n `,\n parameters: {\n controls: {\n include: [\n \"type\",\n \"label\",\n \"ariaLabel\",\n \"placeholder\",\n \"value\",\n \"name\",\n \"status\",\n \"message\",\n \"disabled\",\n \"readonly\",\n \"required\",\n \"htmlid\",\n \"htmltitle\",\n \"size\",\n ],\n },\n },\n args: {\n type: InputType.TEXTAREA,\n },\n} satisfies Story;\n\nexport const ZInputCheckbox = {\n parameters: {\n controls: {\n include: [\n \"label\",\n \"ariaLabel\",\n \"labelPosition\",\n \"name\",\n \"disabled\",\n \"readonly\",\n \"required\",\n \"checked\",\n \"htmlid\",\n \"htmltitle\",\n \"size\",\n ],\n },\n },\n args: {\n type: InputType.CHECKBOX,\n },\n render: (args) => html`\n <z-input\n type=\"${args.type}\"\n label=${args.label}\n aria-label=${args.ariaLabel}\n .labelPosition=${args.labelPosition}\n name=${args.name}\n disabled=${args.disabled}\n readonly=${args.readonly}\n required=${args.required}\n checked=${args.checked}\n htmlid=${args.htmlid}\n htmltitle=${args.htmltitle}\n size=${args.size}\n ></z-input>\n `,\n} satisfies Story;\n\nexport const ZInputRadio = {\n parameters: {\n controls: {\n include: [\n \"label\",\n \"ariaLabel\",\n \"labelPosition\",\n \"name\",\n \"value\",\n \"disabled\",\n \"readonly\",\n \"required\",\n \"checked\",\n \"htmlid\",\n \"htmltitle\",\n \"size\",\n ],\n },\n },\n args: {\n type: InputType.RADIO,\n },\n render: (args) => html`\n <z-input\n type=${args.type}\n label=${args.label}\n aria-label=${args.ariaLabel}\n .labelPosition=${args.labelPosition}\n name=${args.name}\n value=${args.value}\n disabled=${args.disabled}\n readonly=${args.readonly}\n required=${args.required}\n checked=${args.checked}\n htmlid=${args.htmlid}\n htmltitle=${args.htmltitle}\n size=${args.size}\n ></z-input>\n `,\n} satisfies Story;\n\nexport const ZInputNumber = {\n parameters: {\n controls: {\n include: [\"min\", \"max\", \"step\", \"value\", \"hasclearicon\"],\n },\n },\n args: {\n type: InputType.NUMBER,\n value: \"1\",\n hasclearicon: false,\n },\n render: (args) => html`\n <z-input\n type=${args.type}\n value=${args.value}\n min=${args.min}\n max=${args.max}\n step=${args.step}\n hasclearicon=${args.hasclearicon}\n ></z-input>\n `,\n} satisfies Story;\n"]}
|
|
1
|
+
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-input/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZInput} from \".\";\nimport {ControlSize, InputStatus, InputType, LabelPosition} from \"../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZInput\",\n component: \"z-input\",\n argTypes: {\n type: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(InputType),\n },\n labelPosition: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(LabelPosition),\n },\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ControlSize),\n },\n status: {\n control: {\n type: \"inline-radio\",\n labels: {\n null: \"-\",\n },\n },\n options: [null, ...Object.values(InputStatus)],\n },\n },\n args: {\n type: InputType.TEXT,\n label: \"this is the input label\",\n ariaLabel: \"\",\n labelPosition: LabelPosition.RIGHT,\n placeholder: \"input placeholder text\",\n value: \"\",\n size: ControlSize.BIG,\n name: \"\",\n status: null,\n message: \"helper text\",\n icon: \"\",\n disabled: false,\n readonly: false,\n required: false,\n checked: false,\n hasclearicon: true,\n htmlid: \"input-id\",\n htmltitle: \"\",\n autocomplete: \"\",\n min: 1,\n minlength: 1,\n max: 10,\n maxlength: 10,\n step: 1,\n pattern: \"\",\n },\n} satisfies Meta<ZInput>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZInput>;\n\nexport const AllProps = {\n render: (args) => html`\n <z-input\n type=${args.type}\n label=${args.label}\n aria-label=${args.ariaLabel}\n .labelPosition=${args.labelPosition}\n placeholder=${args.placeholder}\n value=${args.value}\n name=${args.name}\n status=${args.status}\n message=${args.message}\n icon=${args.icon}\n .disabled=${args.disabled}\n .readonly=${args.readonly}\n .required=${args.required}\n .checked=${args.checked}\n hasclearicon=${args.hasclearicon}\n htmlid=${args.htmlid}\n htmltitle=${args.htmltitle}\n .autocomplete=${args.autocomplete}\n min=${args.min}\n minlength=${args.minlength}\n max=${args.max}\n maxlength=${args.maxlength}\n step=${args.step}\n pattern=${args.pattern}\n size=${args.size}\n ></z-input>\n `,\n} satisfies Story;\n\nexport const ZInputText = {\n render: (args) => html`\n <z-input\n type=${args.type}\n label=${args.label}\n aria-label=${args.ariaLabel}\n placeholder=${args.placeholder}\n value=${args.value}\n name=${args.name}\n status=${args.status}\n message=${args.message}\n icon=${args.icon}\n .disabled=${args.disabled}\n .readonly=${args.readonly}\n .required=${args.required}\n hasclearicon=${args.hasclearicon}\n htmlid=${args.htmlid}\n htmltitle=${args.htmltitle}\n .autocomplete=${args.autocomplete}\n size=${args.size}\n minlength=${args.minlength}\n maxlength=${args.maxlength}\n ></z-input>\n `,\n parameters: {\n controls: {\n include: [\n \"type\",\n \"label\",\n \"ariaLabel\",\n \"placeholder\",\n \"value\",\n \"name\",\n \"status\",\n \"message\",\n \"icon\",\n \"disabled\",\n \"readonly\",\n \"required\",\n \"hasclearicon\",\n \"htmlid\",\n \"htmltitle\",\n \"autocomplete\",\n \"size\",\n \"minlength\",\n \"maxlength\",\n ],\n },\n },\n argTypes: {\n type: {\n options: Object.values(InputType).filter((type) => [\"text\", \"password\", \"number\", \"email\"].includes(type)),\n },\n },\n} satisfies Story;\n\nexport const ZInputTextarea = {\n render: (args) => html`\n <z-input\n type=${args.type}\n label=${args.label}\n aria-label=${args.ariaLabel}\n placeholder=${args.placeholder}\n value=${args.value}\n name=${args.name}\n status=${args.status}\n message=${args.message}\n .disabled=${args.disabled}\n .readonly=${args.readonly}\n .required=${args.required}\n htmlid=${args.htmlid}\n htmltitle=${args.htmltitle}\n size=${args.size}\n ></z-input>\n `,\n parameters: {\n controls: {\n include: [\n \"type\",\n \"label\",\n \"ariaLabel\",\n \"placeholder\",\n \"value\",\n \"name\",\n \"status\",\n \"message\",\n \"disabled\",\n \"readonly\",\n \"required\",\n \"htmlid\",\n \"htmltitle\",\n \"size\",\n ],\n },\n },\n args: {\n type: InputType.TEXTAREA,\n },\n} satisfies Story;\n\nexport const ZInputCheckbox = {\n parameters: {\n controls: {\n include: [\n \"label\",\n \"ariaLabel\",\n \"labelPosition\",\n \"name\",\n \"disabled\",\n \"readonly\",\n \"required\",\n \"checked\",\n \"htmlid\",\n \"htmltitle\",\n \"size\",\n ],\n },\n },\n args: {\n type: InputType.CHECKBOX,\n },\n render: (args) => html`\n <z-input\n type=\"${args.type}\"\n label=${args.label}\n aria-label=${args.ariaLabel}\n .labelPosition=${args.labelPosition}\n name=${args.name}\n .disabled=${args.disabled}\n .readonly=${args.readonly}\n .required=${args.required}\n .checked=${args.checked}\n htmlid=${args.htmlid}\n htmltitle=${args.htmltitle}\n size=${args.size}\n ></z-input>\n `,\n} satisfies Story;\n\nexport const ZInputRadio = {\n parameters: {\n controls: {\n include: [\n \"label\",\n \"ariaLabel\",\n \"labelPosition\",\n \"name\",\n \"value\",\n \"disabled\",\n \"readonly\",\n \"required\",\n \"checked\",\n \"htmlid\",\n \"htmltitle\",\n \"size\",\n ],\n },\n },\n args: {\n type: InputType.RADIO,\n },\n render: (args) => html`\n <z-input\n type=${args.type}\n label=${args.label}\n aria-label=${args.ariaLabel}\n .labelPosition=${args.labelPosition}\n name=${args.name}\n value=${args.value}\n .disabled=${args.disabled}\n .readonly=${args.readonly}\n .required=${args.required}\n .checked=${args.checked}\n htmlid=${args.htmlid}\n htmltitle=${args.htmltitle}\n size=${args.size}\n ></z-input>\n `,\n} satisfies Story;\n\nexport const ZInputNumber = {\n parameters: {\n controls: {\n include: [\"min\", \"max\", \"step\", \"value\", \"hasclearicon\"],\n },\n },\n args: {\n type: InputType.NUMBER,\n value: \"1\",\n hasclearicon: false,\n },\n render: (args) => html`\n <z-input\n type=${args.type}\n value=${args.value}\n min=${args.min}\n max=${args.max}\n step=${args.step}\n .hasclearicon=${args.hasclearicon}\n ></z-input>\n `,\n} satisfies Story;\n"]}
|