@zanichelli/albe-web-components 20.0.3 → 20.0.5
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 +17 -0
- package/dist/cjs/z-app-header_12.cjs.entry.js +9 -9
- package/dist/cjs/z-app-header_12.cjs.entry.js.map +1 -1
- package/dist/cjs/z-card.cjs.entry.js +1 -1
- package/dist/cjs/z-card.cjs.entry.js.map +1 -1
- package/dist/cjs/z-stepper-item.cjs.entry.js +2 -2
- package/dist/cjs/z-stepper-item.cjs.entry.js.map +1 -1
- package/dist/collection/components/z-app-header/index.js +4 -4
- package/dist/collection/components/z-app-header/index.js.map +1 -1
- package/dist/collection/components/z-app-header/styles.css +5 -0
- package/dist/collection/components/z-card/styles.css +1 -1
- package/dist/collection/components/z-searchbar/index.js +4 -4
- package/dist/collection/components/z-searchbar/index.js.map +1 -1
- package/dist/collection/components/z-stepper-item/index.js +1 -1
- package/dist/collection/components/z-stepper-item/index.js.map +1 -1
- package/dist/collection/components/z-stepper-item/styles.css +19 -4
- package/dist/components/index12.js +1 -1
- package/dist/components/index12.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-card.js +1 -1
- package/dist/components/z-card.js.map +1 -1
- package/dist/components/z-stepper-item.js +1 -1
- package/dist/components/z-stepper-item.js.map +1 -1
- package/dist/esm/z-app-header_12.entry.js +9 -9
- package/dist/esm/z-app-header_12.entry.js.map +1 -1
- package/dist/esm/z-card.entry.js +1 -1
- package/dist/esm/z-card.entry.js.map +1 -1
- package/dist/esm/z-stepper-item.entry.js +2 -2
- package/dist/esm/z-stepper-item.entry.js.map +1 -1
- package/dist/web-components-library/p-50d68051.entry.js +2 -0
- package/dist/web-components-library/p-50d68051.entry.js.map +1 -0
- package/dist/web-components-library/{p-0380c815.entry.js → p-6f6cf4eb.entry.js} +2 -2
- package/{www/build/p-0380c815.entry.js.map → dist/web-components-library/p-6f6cf4eb.entry.js.map} +1 -1
- package/dist/web-components-library/p-90613329.entry.js +2 -0
- package/dist/web-components-library/p-90613329.entry.js.map +1 -0
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/p-50d68051.entry.js +2 -0
- package/www/build/p-50d68051.entry.js.map +1 -0
- package/www/build/{p-0380c815.entry.js → p-6f6cf4eb.entry.js} +2 -2
- package/{dist/web-components-library/p-0380c815.entry.js.map → www/build/p-6f6cf4eb.entry.js.map} +1 -1
- package/www/build/p-90613329.entry.js +2 -0
- package/www/build/p-90613329.entry.js.map +1 -0
- package/www/build/{p-55885a66.js → p-b52a669c.js} +1 -1
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/web-components-library/p-3e78dc0d.entry.js +0 -2
- package/dist/web-components-library/p-3e78dc0d.entry.js.map +0 -1
- package/dist/web-components-library/p-c00b8b6d.entry.js +0 -2
- package/dist/web-components-library/p-c00b8b6d.entry.js.map +0 -1
- package/www/build/p-3e78dc0d.entry.js +0 -2
- package/www/build/p-3e78dc0d.entry.js.map +0 -1
- package/www/build/p-c00b8b6d.entry.js +0 -2
- package/www/build/p-c00b8b6d.entry.js.map +0 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-CZz7uP-M.js');
|
|
4
4
|
var index$1 = require('./index-DppFfqsn.js');
|
|
5
5
|
|
|
6
|
-
const stylesCss = () => `:host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:not([variant="overlay"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot="cover"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot="metadata"]),::slotted([slot="title"]),::slotted([slot="text"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot="title"]:not(:last-child)),::slotted([slot="text"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot="title"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:""}::slotted([slot="metadata"]){width:100%;-webkit-line-clamp:1;line-clamp:1;text-transform:uppercase}::slotted([slot="metadata"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25)}::slotted([slot="title"]){margin:0;font-size:var(--font-size-3);font-weight:var(--font-sb);-webkit-line-clamp:2;line-clamp:2;text-decoration:none}::slotted([slot="title"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none}::slotted([slot="text"]){width:100%;margin:0;-webkit-line-clamp:3;line-clamp:3}.actions{display:flex;align-items:center}:host(:not([variant="overlay"])) .actions{margin-top:auto}::slotted([slot="action"]){position:relative;z-index:2}::slotted([slot="action"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot="action"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([variant="text"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([variant="text"]) [slot="text"]::before{border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant="border"])>.content,:host([variant="shadow"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant="text"])>.content{padding:var(--z-card--text-padding)}:host([variant="border"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant="border"][clickable]:hover)>.content{background:var(--color-background)}:host([variant="border"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="border"][clickable]:active){border-color:transparent}:host([variant="shadow"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant="shadow"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant="shadow"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="shadow"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant="overlay"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to
|
|
6
|
+
const stylesCss = () => `:host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:not([variant="overlay"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot="cover"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot="metadata"]),::slotted([slot="title"]),::slotted([slot="text"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot="title"]:not(:last-child)),::slotted([slot="text"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot="title"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:""}::slotted([slot="metadata"]){width:100%;-webkit-line-clamp:1;line-clamp:1;text-transform:uppercase}::slotted([slot="metadata"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25)}::slotted([slot="title"]){margin:0;font-size:var(--font-size-3);font-weight:var(--font-sb);-webkit-line-clamp:2;line-clamp:2;text-decoration:none}::slotted([slot="title"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none}::slotted([slot="text"]){width:100%;margin:0;-webkit-line-clamp:3;line-clamp:3}.actions{display:flex;align-items:center}:host(:not([variant="overlay"])) .actions{margin-top:auto}::slotted([slot="action"]){position:relative;z-index:2}::slotted([slot="action"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot="action"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([variant="text"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([variant="text"]) [slot="text"]::before{border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant="border"])>.content,:host([variant="shadow"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant="text"])>.content{padding:var(--z-card--text-padding)}:host([variant="border"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant="border"][clickable]:hover)>.content{background:var(--color-background)}:host([variant="border"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="border"][clickable]:active){border-color:transparent}:host([variant="shadow"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant="shadow"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant="shadow"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="shadow"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant="overlay"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to bottom, transparent, rgb(39 39 39 / 57%) 85%, var(--gray800) 100%);color:var(--color-text-inverse);fill:var(--color-text-inverse)}`;
|
|
7
7
|
|
|
8
8
|
const ZCard = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"z-card.cjs.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,2tIAA2tI,CAAC;;MCkBxuI,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAoBE,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK;AAElB;;;AAGG;AAEH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK;AAwElB;IAjEC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI;;AAGzE;;;AAGG;IACK,oBAAoB,GAAA;QAC1B,OAAO;YACLA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,UAAU,EAAA,CAAQ,EAC7BA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,CACF,CACF;AACN,YAAAA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,EACzBA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,CACF;SACP;;AAGH;;AAEG;IACK,aAAa,GAAA;AACnB,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,UAAU,EAAA,CAAQ,EAC7BA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,EAC1BA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,EACzBA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;;IAIV,MAAM,GAAA;QACJ,IAAI,IAAI,CAAC,OAAO,KAAKC,mBAAW,CAAC,IAAI,EAAE;YACrC,OAAOD,OAAA,CAACE,UAAI,EAAA,IAAA,EAAE,IAAI,CAAC,aAAa,EAAE,CAAQ;;AAG5C,QAAA,IAAI,IAAI,CAAC,OAAO,KAAKD,mBAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE;YAC9D,QACED,QAACE,UAAI,EAAA,IAAA,EACHF,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EACzB,IAAI,CAAC,aAAa,IAAI;gBACrBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ;gBAC1B,IAAI,CAAC,OAAO,KAAKC,mBAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAID,OAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAE,IAAI,CAAC,SAAS,EAAA,CAAW;aAClG,EACA,CAAC,IAAI,CAAC,aAAa,IAAIA,iBAAK,KAAK,EAAC,aAAa,EAAA,CAAO,CACnD,EACL,IAAI,CAAC,aAAa,EAAE,CAChB;;QAIX,OAAOA,OAAA,CAACE,UAAI,EAAA,IAAA,EAAE,IAAI,CAAC,oBAAoB,EAAE,CAAQ;;;;;;;;","names":["h","CardVariant","Host"],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":[":host {\n /**\n * @prop --aspect-ratio: Cover aspect ratio. Default: `1.62`\n * @prop --z-card--border-color: Default: `var(--gray200)`\n * @prop --z-card--color-cover-background: Cover color. Default: `var(--color-surface01)`\n * @prop --z-card--text-background: Background color for the `text` variant. Default: `var(--color-surface01)`\n * @prop --z-card--text-border-radius: Default: `none`\n * @prop --z-card--text-border: Configure CSS `border`. Default: `none`\n * @prop --z-card--text-padding: Configure CSS `padding`. Default: `none`\n */\n --aspect-ratio: 1.62;\n --z-card--border-color: var(--gray200);\n --z-card--color-cover-background: var(--color-surface01);\n --z-card--text-background: var(--color-surface01);\n --z-card--text-border-radius: none;\n --z-card--text-border: none;\n --z-card--text-padding: calc(var(--space-unit) * 2) var(--space-unit);\n\n position: relative;\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n*,\n::slotted(*) {\n box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n position: relative;\n width: 100%;\n}\n\n/* Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental */\n.cover-container {\n padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.cover-container > z-icon {\n --z-icon-width: calc(var(--space-unit) * 11);\n --z-icon-height: var(--z-icon-width);\n\n position: absolute;\n top: calc(50% - calc(var(--z-icon-height) / 2));\n left: calc(50% - calc(var(--z-icon-width) / 2));\n fill: var(--color-primary01);\n}\n\n.color-cover {\n background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: flex-end;\n padding: var(--space-unit);\n}\n\n/* Truncates overflowing text */\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n content: \"\";\n}\n\n::slotted([slot=\"metadata\"]) {\n width: 100%;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-transform: uppercase;\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n margin: 0 0 calc(var(--space-unit) * 0.25);\n}\n\n::slotted([slot=\"title\"]) {\n margin: 0;\n font-size: var(--font-size-3);\n font-weight: var(--font-sb);\n -webkit-line-clamp: 2;\n line-clamp: 2;\n text-decoration: none;\n}\n\n::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n::slotted([slot=\"text\"]) {\n width: 100%;\n margin: 0;\n -webkit-line-clamp: 3;\n line-clamp: 3;\n}\n\n.actions {\n display: flex;\n align-items: center;\n}\n\n:host(:not([variant=\"overlay\"])) .actions {\n margin-top: auto;\n}\n\n::slotted([slot=\"action\"]) {\n position: relative;\n z-index: 2;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n margin-right: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"action\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: none !important;\n outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"text\"]) {\n border: var(--z-card--text-border);\n background-color: var(--z-card--text-background);\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([variant=\"text\"]) [slot=\"text\"]::before {\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n height: 100%;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n padding: var(--z-card--text-padding);\n}\n\n/* Border */\n:host([variant=\"border\"]) {\n border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n border-color: transparent;\n}\n\n/* Shadow */\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n box-shadow: none;\n}\n\n/* Overlay */\n:host([variant=\"overlay\"]) .content {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n justify-content: flex-end;\n padding: var(--space-unit);\n background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));\n color: var(--color-text-inverse);\n fill: var(--color-text-inverse);\n}\n","import {Component, ComponentInterface, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/**\n * ZCard component.\n * The width of the card must be set by its container, following the grid indications of the design.\n *\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.\n * @slot text\n * @slot action - Interactive elements to place at the bottom of the card. To put non-interactive elements here when using an `<a>` tag in the `title` slot, and use this as a sort of \"footer\", set `z-index: 0` on each of those elements.\n */\n@Component({\n tag: \"z-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCard implements ComponentInterface {\n /**\n * Card variant.\n * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n * Leave it undefined for the default card.\n */\n @Prop({reflect: true})\n variant?: CardVariant;\n\n /** Name of the icon to place over the image cover */\n @Prop()\n coverIcon: string;\n\n /** Enable shadow. Default: false. */\n @Prop({reflect: true})\n showShadow = false;\n\n /**\n * Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\n * Always set this to `true` when putting an `<a>` tag in the `title` slot.\n */\n @Prop({reflect: true})\n clickable = false;\n\n @Element() host: HTMLZCardElement;\n\n @State()\n hasCoverImage: boolean;\n\n componentWillLoad(): void {\n this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n }\n\n /**\n * Template for a card without image cover.\n * A colored background replaces the image and some data is moved over it.\n */\n private renderColorCoverCard(): HTMLDivElement[] {\n return [\n <div class=\"cover-container\">\n <div class=\"color-cover\">\n <div class=\"cover-content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n </div>\n </div>\n </div>,\n <div class=\"content\">\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>,\n ];\n }\n\n /**\n * Template for the content.\n */\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n );\n }\n\n render(): HTMLZCardElement {\n if (this.variant === CardVariant.TEXT) {\n return <Host>{this.renderContent()}</Host>;\n }\n\n if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {\n return (\n <Host>\n <div class=\"cover-container\">\n {this.hasCoverImage && [\n <slot name=\"cover\"></slot>,\n this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n ]}\n {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n </div>\n {this.renderContent()}\n </Host>\n );\n }\n\n return <Host>{this.renderColorCoverCard()}</Host>;\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"z-card.cjs.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,qvIAAqvI,CAAC;;MCkBlwI,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAoBE,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK;AAElB;;;AAGG;AAEH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK;AAwElB;IAjEC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI;;AAGzE;;;AAGG;IACK,oBAAoB,GAAA;QAC1B,OAAO;YACLA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,UAAU,EAAA,CAAQ,EAC7BA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,CACF,CACF;AACN,YAAAA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,EACzBA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,CACF;SACP;;AAGH;;AAEG;IACK,aAAa,GAAA;AACnB,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,UAAU,EAAA,CAAQ,EAC7BA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,EAC1BA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,EACzBA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;;IAIV,MAAM,GAAA;QACJ,IAAI,IAAI,CAAC,OAAO,KAAKC,mBAAW,CAAC,IAAI,EAAE;YACrC,OAAOD,OAAA,CAACE,UAAI,EAAA,IAAA,EAAE,IAAI,CAAC,aAAa,EAAE,CAAQ;;AAG5C,QAAA,IAAI,IAAI,CAAC,OAAO,KAAKD,mBAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE;YAC9D,QACED,QAACE,UAAI,EAAA,IAAA,EACHF,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EACzB,IAAI,CAAC,aAAa,IAAI;gBACrBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ;gBAC1B,IAAI,CAAC,OAAO,KAAKC,mBAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAID,OAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAE,IAAI,CAAC,SAAS,EAAA,CAAW;aAClG,EACA,CAAC,IAAI,CAAC,aAAa,IAAIA,iBAAK,KAAK,EAAC,aAAa,EAAA,CAAO,CACnD,EACL,IAAI,CAAC,aAAa,EAAE,CAChB;;QAIX,OAAOA,OAAA,CAACE,UAAI,EAAA,IAAA,EAAE,IAAI,CAAC,oBAAoB,EAAE,CAAQ;;;;;;;;","names":["h","CardVariant","Host"],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":[":host {\n /**\n * @prop --aspect-ratio: Cover aspect ratio. Default: `1.62`\n * @prop --z-card--border-color: Default: `var(--gray200)`\n * @prop --z-card--color-cover-background: Cover color. Default: `var(--color-surface01)`\n * @prop --z-card--text-background: Background color for the `text` variant. Default: `var(--color-surface01)`\n * @prop --z-card--text-border-radius: Default: `none`\n * @prop --z-card--text-border: Configure CSS `border`. Default: `none`\n * @prop --z-card--text-padding: Configure CSS `padding`. Default: `none`\n */\n --aspect-ratio: 1.62;\n --z-card--border-color: var(--gray200);\n --z-card--color-cover-background: var(--color-surface01);\n --z-card--text-background: var(--color-surface01);\n --z-card--text-border-radius: none;\n --z-card--text-border: none;\n --z-card--text-padding: calc(var(--space-unit) * 2) var(--space-unit);\n\n position: relative;\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n*,\n::slotted(*) {\n box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n position: relative;\n width: 100%;\n}\n\n/* Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental */\n.cover-container {\n padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.cover-container > z-icon {\n --z-icon-width: calc(var(--space-unit) * 11);\n --z-icon-height: var(--z-icon-width);\n\n position: absolute;\n top: calc(50% - calc(var(--z-icon-height) / 2));\n left: calc(50% - calc(var(--z-icon-width) / 2));\n fill: var(--color-primary01);\n}\n\n.color-cover {\n background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: flex-end;\n padding: var(--space-unit);\n}\n\n/* Truncates overflowing text */\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n content: \"\";\n}\n\n::slotted([slot=\"metadata\"]) {\n width: 100%;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-transform: uppercase;\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n margin: 0 0 calc(var(--space-unit) * 0.25);\n}\n\n::slotted([slot=\"title\"]) {\n margin: 0;\n font-size: var(--font-size-3);\n font-weight: var(--font-sb);\n -webkit-line-clamp: 2;\n line-clamp: 2;\n text-decoration: none;\n}\n\n::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n::slotted([slot=\"text\"]) {\n width: 100%;\n margin: 0;\n -webkit-line-clamp: 3;\n line-clamp: 3;\n}\n\n.actions {\n display: flex;\n align-items: center;\n}\n\n:host(:not([variant=\"overlay\"])) .actions {\n margin-top: auto;\n}\n\n::slotted([slot=\"action\"]) {\n position: relative;\n z-index: 2;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n margin-right: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"action\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: none !important;\n outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"text\"]) {\n border: var(--z-card--text-border);\n background-color: var(--z-card--text-background);\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([variant=\"text\"]) [slot=\"text\"]::before {\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n height: 100%;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n padding: var(--z-card--text-padding);\n}\n\n/* Border */\n:host([variant=\"border\"]) {\n border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n border-color: transparent;\n}\n\n/* Shadow */\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n box-shadow: none;\n}\n\n/* Overlay */\n:host([variant=\"overlay\"]) .content {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n justify-content: flex-end;\n padding: var(--space-unit);\n background-image: linear-gradient(to bottom, transparent, rgb(39 39 39 / 57%) 85%, var(--gray800) 100%);\n color: var(--color-text-inverse);\n fill: var(--color-text-inverse);\n}\n","import {Component, ComponentInterface, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/**\n * ZCard component.\n * The width of the card must be set by its container, following the grid indications of the design.\n *\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.\n * @slot text\n * @slot action - Interactive elements to place at the bottom of the card. To put non-interactive elements here when using an `<a>` tag in the `title` slot, and use this as a sort of \"footer\", set `z-index: 0` on each of those elements.\n */\n@Component({\n tag: \"z-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCard implements ComponentInterface {\n /**\n * Card variant.\n * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n * Leave it undefined for the default card.\n */\n @Prop({reflect: true})\n variant?: CardVariant;\n\n /** Name of the icon to place over the image cover */\n @Prop()\n coverIcon: string;\n\n /** Enable shadow. Default: false. */\n @Prop({reflect: true})\n showShadow = false;\n\n /**\n * Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\n * Always set this to `true` when putting an `<a>` tag in the `title` slot.\n */\n @Prop({reflect: true})\n clickable = false;\n\n @Element() host: HTMLZCardElement;\n\n @State()\n hasCoverImage: boolean;\n\n componentWillLoad(): void {\n this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n }\n\n /**\n * Template for a card without image cover.\n * A colored background replaces the image and some data is moved over it.\n */\n private renderColorCoverCard(): HTMLDivElement[] {\n return [\n <div class=\"cover-container\">\n <div class=\"color-cover\">\n <div class=\"cover-content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n </div>\n </div>\n </div>,\n <div class=\"content\">\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>,\n ];\n }\n\n /**\n * Template for the content.\n */\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n );\n }\n\n render(): HTMLZCardElement {\n if (this.variant === CardVariant.TEXT) {\n return <Host>{this.renderContent()}</Host>;\n }\n\n if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {\n return (\n <Host>\n <div class=\"cover-container\">\n {this.hasCoverImage && [\n <slot name=\"cover\"></slot>,\n this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n ]}\n {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n </div>\n {this.renderContent()}\n </Host>\n );\n }\n\n return <Host>{this.renderColorCoverCard()}</Host>;\n }\n}\n"],"version":3}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-CZz7uP-M.js');
|
|
4
4
|
|
|
5
|
-
const stylesCss = () => `:host{position:relative;display:flex;font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-icon-width:18px;--z-icon-height:18px;--indicator-size:calc(var(--space-unit) * 3.5);--stepper-item-size:calc(var(--space-unit) * 3.5);--indicator-overflow:calc((var(--indicator-size) - var(--stepper-item-size)) / 2);--connector-top:calc(var(--stepper-item-size) / 2)}:host(:not(:first-child)){flex:1;justify-content:flex-end}:host(:not(:first-child))::before{position:absolute;z-index:1;top:var(--connector-top);right:calc(var(--stepper-item-size) + var(--indicator-overflow));left:0;display:block;width:auto;border-bottom:var(--border-size-medium) solid var(--color-disabled03);content:"";transform:translateY(-50%)}:host(:not([disabled],:first-child))::before{border-bottom:var(--border-size-large) solid var(--color-primary01)}.stepper-item{display:grid;width:var(--stepper-item-size);align-items:center;padding:0;border:0;appearance:none;background:transparent;gap:10px;grid-template-columns:var(--stepper-item-size);grid-template-rows:var(--stepper-item-size) auto;justify-items:center;outline:0;text-decoration:none}.indicator{position:relative;z-index:2;display:flex;width:var(--indicator-size);min-width:0;height:var(--indicator-size);min-height:0;box-sizing:border-box;align-items:center;justify-content:center;border:var(--border-size-medium) solid var(--color-primary01);background:var(--color-surface01);border-radius:50%;color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px
|
|
5
|
+
const stylesCss = () => `:host{position:relative;display:flex;font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-icon-width:18px;--z-icon-height:18px;--indicator-size:calc(var(--space-unit) * 3.5);--stepper-item-size:calc(var(--space-unit) * 3.5);--indicator-overflow:calc((var(--indicator-size) - var(--stepper-item-size)) / 2);--connector-top:calc(var(--stepper-item-size) / 2)}:host(:not(:first-child)){flex:1;justify-content:flex-end}:host(:not(:first-child))::before{position:absolute;z-index:1;top:var(--connector-top);right:calc(var(--stepper-item-size) + var(--indicator-overflow));left:0;display:block;width:auto;border-bottom:var(--border-size-medium) solid var(--color-disabled03);content:"";transform:translateY(-50%)}:host(:not([disabled],:first-child))::before{border-bottom:var(--border-size-large) solid var(--color-primary01)}.stepper-item{display:grid;width:var(--stepper-item-size);align-items:center;padding:0;border:0;appearance:none;background:transparent;gap:10px;grid-template-columns:var(--stepper-item-size);grid-template-rows:var(--stepper-item-size) auto;justify-items:center;outline:0;text-decoration:none}.indicator{position:relative;z-index:2;display:flex;width:var(--indicator-size);min-width:0;height:var(--indicator-size);min-height:0;box-sizing:border-box;align-items:center;justify-content:center;border:var(--border-size-medium) solid var(--color-primary01);background:var(--color-surface01);border-radius:50%;color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px}.indicator-number{display:block;transform:translateY(0.04em)}.stepper-item span:not(.indicator-number){min-width:50px;align-self:start;color:var(--color-default-text);font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4;text-align:center}:host([pressed]){--indicator-size:calc(var(--space-unit) * 4)}:host([pressed]) .stepper-item{gap:8px}:host([pressed]) .stepper-item .indicator{font-size:var(--font-size-4);font-weight:var(--font-sb)}:host([pressed]) .stepper-item span:not(.indicator-number){font-weight:var(--font-sb);line-height:1.5}:host([href]:not([disabled])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}:host([pressed]:not([disabled])) .indicator{border-color:var(--color-hover-primary);background:var(--color-hover-primary);color:var(--color-text-inverse)}:host([href]:not([disabled]):focus-within) .indicator{box-shadow:var(--shadow-focus-primary)}:host([href]:not([disabled],[pressed],[checked])) .indicator:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary)}:host([disabled]) .indicator{border-color:var(--color-form-disabled01-icon);color:var(--color-form-disabled01-icon)}:host([checked]:not([disabled])) .indicator{border-color:var(--color-primary01);background-color:var(--color-primary01)}:host([checked]:not([disabled])) .indicator z-icon{fill:var(--color-white)}@media (min-width: 1152px){:host{--z-icon-width:24px;--z-icon-height:24px;--indicator-size:calc(var(--space-unit) * 4.5);--stepper-item-size:calc(var(--space-unit) * 4.5)}.stepper-item{gap:12px}.stepper-item .indicator,.stepper-item span:not(.indicator-number){font-size:var(--font-size-3);line-height:1.5}:host([pressed]){--indicator-size:calc(var(--space-unit) * 5)}:host([pressed]) .stepper-item{gap:10px}:host([pressed]) .stepper-item .indicator{font-size:var(--font-size-6)}}@supports (text-box-trim: trim-both){.indicator-number{text-box-edge:cap alphabetic;text-box-trim:trim-both;transform:none}}`;
|
|
6
6
|
|
|
7
7
|
const ZStepperItem = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -18,7 +18,7 @@ const ZStepperItem = class {
|
|
|
18
18
|
return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex), ariaPressed), ariaDisabled);
|
|
19
19
|
}
|
|
20
20
|
render() {
|
|
21
|
-
return (index.h(index.Host, { key: '42329c166903a0ce77e82d222371804f3e7279b1', role: "listitem" }, index.h("button", Object.assign({ key: 'ed6351193460e7a873cd9867bbd2ded798bbad8f', class: "stepper-item", disabled: this.disabled }, this.getAttributes(), { "aria-label": this.htmlAriaLabel }), index.h("div", { key: 'fc09e304cff2a9651859002047bd825f32c08e88', class: "indicator" }, this.checked ? index.h("z-icon", { name: "checkmark" }) : this.index), index.h("span", { key: '
|
|
21
|
+
return (index.h(index.Host, { key: '42329c166903a0ce77e82d222371804f3e7279b1', role: "listitem" }, index.h("button", Object.assign({ key: 'ed6351193460e7a873cd9867bbd2ded798bbad8f', class: "stepper-item", disabled: this.disabled }, this.getAttributes(), { "aria-label": this.htmlAriaLabel }), index.h("div", { key: 'fc09e304cff2a9651859002047bd825f32c08e88', class: "indicator" }, this.checked ? index.h("z-icon", { name: "checkmark" }) : index.h("span", { class: "indicator-number" }, this.index)), index.h("span", { key: '2535476a7879ce7dd090c4c3c11c8c8acff91b85' }, index.h("slot", { key: '682000b3779da6edaa09dc1af5861c6161831eac' })))));
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
24
|
ZStepperItem.style = stylesCss();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"z-stepper-item.cjs.entry.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,
|
|
1
|
+
{"file":"z-stepper-item.cjs.entry.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,u7GAAu7G,CAAC;;MCOp8G,YAAY,GAAA,MAAA;;;;IAqCf,aAAa,GAAA;AACnB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAC,OAAO,EAAE,OAAO,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,EAAC,GAAG,SAAS;AACnG,QAAA,MAAM,IAAI,GAAG,IAAI,GAAG,EAAC,IAAI,EAAE,MAAM,EAAC,GAAG,SAAS;QAC9C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAC,cAAc,EAAE,MAAM,EAAC,GAAG,SAAS;QACrF,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,EAAE,GAAG,EAAC,QAAQ,EAAE,EAAE,EAAC,GAAG,SAAS;QAC9D,MAAM,WAAW,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,EAAC,cAAc,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,EAAC,GAAG,SAAS;QAC5G,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,EAAC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAC,GAAG,SAAS;AAEvG,QAAA,OAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACK,IAAI,CAAA,EACJ,IAAI,CAAA,EACJ,OAAO,CAAA,EACP,QAAQ,CAAA,EACR,WAAW,CAAA,EACX,YAAY,CAAA;;IAInB,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,EAAA,EACnBD,OAAA,CAAA,QAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACnB,IAAI,CAAC,aAAa,EAAE,EAAA,EAAA,YAAA,EACZ,IAAI,CAAC,aAAa,EAAA,CAAA,EAE9BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACnB,IAAI,CAAC,OAAO,GAAGA,OAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,WAAW,EAAA,CAAG,GAAGA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,kBAAkB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAC5F,EACNA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,CACA,CACJ;;;;;;;","names":["h","Host"],"sources":["src/components/z-stepper-item/styles.css?tag=z-stepper-item&encapsulation=shadow","src/components/z-stepper-item/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: flex;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n\n --z-icon-width: 18px;\n --z-icon-height: 18px;\n --indicator-size: calc(var(--space-unit) * 3.5);\n --stepper-item-size: calc(var(--space-unit) * 3.5);\n --indicator-overflow: calc((var(--indicator-size) - var(--stepper-item-size)) / 2);\n --connector-top: calc(var(--stepper-item-size) / 2);\n}\n\n:host(:not(:first-child)) {\n flex: 1;\n justify-content: flex-end;\n}\n\n:host(:not(:first-child))::before {\n position: absolute;\n z-index: 1;\n top: var(--connector-top);\n right: calc(var(--stepper-item-size) + var(--indicator-overflow));\n left: 0;\n display: block;\n width: auto;\n border-bottom: var(--border-size-medium) solid var(--color-disabled03);\n content: \"\";\n transform: translateY(-50%);\n}\n\n:host(:not([disabled], :first-child))::before {\n border-bottom: var(--border-size-large) solid var(--color-primary01);\n}\n\n.stepper-item {\n display: grid;\n width: var(--stepper-item-size);\n align-items: center;\n padding: 0;\n border: 0;\n appearance: none;\n background: transparent;\n gap: 10px;\n grid-template-columns: var(--stepper-item-size);\n grid-template-rows: var(--stepper-item-size) auto;\n justify-items: center;\n outline: 0;\n text-decoration: none;\n}\n\n.indicator {\n position: relative;\n z-index: 2;\n display: flex;\n width: var(--indicator-size);\n min-width: 0;\n height: var(--indicator-size);\n min-height: 0;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n border: var(--border-size-medium) solid var(--color-primary01);\n background: var(--color-surface01);\n border-radius: 50%;\n color: var(--color-primary01);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n letter-spacing: 0.32px;\n}\n\n.indicator-number {\n display: block;\n transform: translateY(0.04em);\n}\n\n.stepper-item span:not(.indicator-number) {\n min-width: 50px;\n align-self: start;\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n letter-spacing: 0.16px;\n line-height: 1.4;\n text-align: center;\n}\n\n:host([pressed]) {\n --indicator-size: calc(var(--space-unit) * 4);\n}\n\n:host([pressed]) .stepper-item {\n gap: 8px;\n}\n\n:host([pressed]) .stepper-item .indicator {\n font-size: var(--font-size-4);\n font-weight: var(--font-sb);\n}\n\n:host([pressed]) .stepper-item span:not(.indicator-number) {\n font-weight: var(--font-sb);\n line-height: 1.5;\n}\n\n:host([href]:not([disabled])) .stepper-item {\n cursor: pointer;\n}\n\n:host([disabled]) .stepper-item {\n pointer-events: none;\n}\n\n:host([pressed]:not([disabled])) .indicator {\n border-color: var(--color-hover-primary);\n background: var(--color-hover-primary);\n color: var(--color-text-inverse);\n}\n\n:host([href]:not([disabled]):focus-within) .indicator {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([href]:not([disabled], [pressed], [checked])) .indicator:hover {\n border-color: var(--color-hover-primary);\n color: var(--color-hover-primary);\n}\n\n:host([disabled]) .indicator {\n border-color: var(--color-form-disabled01-icon);\n color: var(--color-form-disabled01-icon);\n}\n\n:host([checked]:not([disabled])) .indicator {\n border-color: var(--color-primary01);\n background-color: var(--color-primary01);\n}\n\n:host([checked]:not([disabled])) .indicator z-icon {\n fill: var(--color-white);\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n :host {\n --z-icon-width: 24px;\n --z-icon-height: 24px;\n --indicator-size: calc(var(--space-unit) * 4.5);\n --stepper-item-size: calc(var(--space-unit) * 4.5);\n }\n\n .stepper-item {\n gap: 12px;\n }\n\n .stepper-item .indicator,\n .stepper-item span:not(.indicator-number) {\n font-size: var(--font-size-3);\n line-height: 1.5;\n }\n\n :host([pressed]) {\n --indicator-size: calc(var(--space-unit) * 5);\n }\n\n :host([pressed]) .stepper-item {\n gap: 10px;\n }\n\n :host([pressed]) .stepper-item .indicator {\n font-size: var(--font-size-6);\n }\n}\n\n/* stylelint-disable property-no-unknown */\n@supports (text-box-trim: trim-both) {\n .indicator-number {\n text-box-edge: cap alphabetic;\n text-box-trim: trim-both;\n transform: none;\n }\n}\n/* stylelint-enable property-no-unknown */\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-stepper-item\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZStepperItem implements ComponentInterface {\n /**\n * The number of the step item.\n */\n @Prop({reflect: true})\n index: number;\n\n /**\n * The href to navigate on click.\n */\n @Prop({reflect: true})\n href: string;\n\n /**\n * The pressed state of the item.\n */\n @Prop({reflect: true})\n pressed: boolean;\n\n /**\n * The checked state of the item.\n */\n @Prop({reflect: true})\n checked: boolean;\n\n /**\n * The disabled state of the item.\n */\n @Prop({reflect: true})\n disabled: boolean;\n\n /**\n * Aria label of the item.\n */\n @Prop()\n htmlAriaLabel: string;\n\n private getAttributes(): Record<string, unknown> {\n const href = this.href && !this.disabled ? {onClick: () => (location.href = this.href)} : undefined;\n const role = href ? {role: \"link\"} : undefined;\n const current = this.pressed && !this.disabled ? {\"aria-current\": \"step\"} : undefined;\n const tabindex = this.href === \"\" ? {tabIndex: -1} : undefined;\n const ariaPressed = !role && this.pressed !== undefined ? {\"aria-pressed\": String(this.pressed)} : undefined;\n const ariaDisabled = this.disabled !== undefined ? {\"aria-disabled\": String(this.disabled)} : undefined;\n\n return {\n ...href,\n ...role,\n ...current,\n ...tabindex,\n ...ariaPressed,\n ...ariaDisabled,\n };\n }\n\n render(): HTMLAnchorElement | HTMLButtonElement {\n return (\n <Host role=\"listitem\">\n <button\n class=\"stepper-item\"\n disabled={this.disabled}\n {...this.getAttributes()}\n aria-label={this.htmlAriaLabel}\n >\n <div class=\"indicator\">\n {this.checked ? <z-icon name=\"checkmark\" /> : <span class=\"indicator-number\">{this.index}</span>}\n </div>\n <span>\n <slot />\n </span>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -192,11 +192,11 @@ export class ZAppHeader {
|
|
|
192
192
|
if (this.searchPageUrl && (this.isMobile || this.isTablet)) {
|
|
193
193
|
return (h("z-button", { class: "search-page-button", variant: ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: ControlSize.X_SMALL }));
|
|
194
194
|
}
|
|
195
|
-
return (h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, htmlAriaLabel: this.searchLabel, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, searchButtonLabel: this.isMobile || this.isTablet ? undefined : this.searchButtonLabel, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
|
|
195
|
+
return (h("z-searchbar", { htmlid: "app-header-searchbar", value: this.searchString, placeholder: this.searchPlaceholder, htmlAriaLabel: this.searchLabel, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, searchButtonLabel: this.isMobile || this.isTablet ? undefined : this.searchButtonLabel, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
|
|
196
196
|
}
|
|
197
197
|
renderSearchLabel() {
|
|
198
|
-
if (
|
|
199
|
-
return h("label", { class: "z-label" }, this.searchLabel);
|
|
198
|
+
if (!this.isMobile && !this.isTablet && !this.enableOffcanvas) {
|
|
199
|
+
return (h("label", { class: "z-label", htmlFor: "input-app-header-searchbar", "aria-hidden": this.searchLabel ? "false" : "true" }, this.searchLabel));
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
202
|
renderProductLogos() {
|
|
@@ -285,7 +285,7 @@ export class ZAppHeader {
|
|
|
285
285
|
}
|
|
286
286
|
render() {
|
|
287
287
|
const hasTopSubtitle = this.hasSlot("top-subtitle");
|
|
288
|
-
return (h(Host, { key: '
|
|
288
|
+
return (h(Host, { key: 'c15911d36102dbd84ef16cc2155d7f3d07197a86', "menu-length": this.menuLength }, h("div", { key: 'd3cc38a154e7185c01c17edc9437078b5fe80ac8', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: 'ee83f741c6cb12180b8255230664812788f3d7d1', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, h("div", { key: 'f4a164803967f1583a3b66ef20aa552d1974e7ca', class: "heading-block" }, h("div", { key: '088943806c86d488e62d3bf487e2d1f121d79a04', class: "heading-title" }, h("slot", { key: 'f869ce8f66551f99e0ed66381f16a9d56c66bb8e', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("div", { key: '5ca595378175860aa1aa986086144b75ee62e770', class: "title-container" }, !this.isMobile && this.renderTopSubtitle(), h("slot", { key: '69ccb983a555f459aa9376e9d44303cb846869ee', name: "title" })), h("div", { key: '1d9538bddc38f730a88568e0fb61cbcd07ef4b2c', class: "search-slot" }, this.enableSearch && this.renderSearchLabel(), this.enableSearch && !this.isMobile && this.renderSeachbar())), this.isMobile && this.renderTopSubtitle()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'f7eac2208962da7cc9aeb02db9705820e37fc6dc', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '5ff91209b3672beabe855ca7e906c40d857b55b2', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '72a3f48cbcd6b363540a210acf36ea8baae39015', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
|
|
289
289
|
}
|
|
290
290
|
static get is() { return "z-app-header"; }
|
|
291
291
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-app-header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAC5G,OAAO,EAAC,WAAW,EAAC,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAElD,MAAM,6BAA6B,GAAG,OAAO,oBAAoB,KAAK,WAAW,CAAC;AAElF;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;IAgHrB,OAAO;QACL,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAGD,mBAAmB;QACjB,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACnC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACpC,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC;YACrB,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC;QAC5C,CAAC,CAAC,CAAC;IACL,CAAC;IAGD,aAAa;;QACX,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,MAAA,IAAI,CAAC,qBAAqB,0CAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,MAAA,IAAI,CAAC,qBAAqB,0CAAE,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAED,IAAY,KAAK;;QACf,OAAO,MAAA,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,0CAAE,WAAW,CAAC,IAAI,EAAE,CAAC;IAC9E,CAAC;IAED,IAAY,YAAY;QACtB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;QAC7C,IAAI,MAAM,KAAK,QAAQ,CAAC,IAAI,IAAI,MAAM,KAAK,QAAQ,CAAC,eAAe,EAAE,CAAC;YACpE,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;IACrG,CAAC;IAED,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC;IAC/D,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,YAAY,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7F,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,6CAA6C;IACvG,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,GAAG,CAAC,CAAC;IACnD,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;QACnF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,YAAY,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7F,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;QAC3C,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,IAAI,CAAC,SAAS;gBACZ,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;oBAChF,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,4CAA4C,CAAC;QAC5E,CAAC;QACD,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,mFAAmF;IAC3E,uBAAuB;QAC7B,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,kBAAkB,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YACvD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;gBAE5B,OAAO;YACT,CAAC;YAED,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;YAC/D,IAAI,IAAI,CAAC,SAAS,KAAK,CAAC,EAAE,CAAC;gBACzB,OAAO;YACT,CAAC;YAED,IAAI,IAAI,CAAC,SAAS,GAAG,cAAc,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;gBAC7D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC9B,CAAC;iBAAM,IAAI,IAAI,CAAC,SAAS,IAAI,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBACpE,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAClD,CAAC;IAEO,OAAO,CAAC,QAAgB;QAC9B,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,KAAK,IAAI,CAAC;IACzE,CAAC;IAEO,SAAS,CAAC,OAAyB,EAAE,QAA0B;QACrE,OAAO,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;QAC1B,QAAQ,CAAC,QAAQ,EAAE,CAAC;IACtB,CAAC;IAEO,kBAAkB,CAAC,EAAiB;;QAC1C,IAAI,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACpD,OAAO;QACT,CAAC;QAED,MAAM,WAAW,GAAI,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACjE,IAAI,WAAW,EAAE,CAAC;YAChB,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,+DAA+D;YAC/D,WAAW,CAAC,YAAY,GAAG,CAAC,CAAC;YAC7B,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QACjC,CAAC;aAAM,IAAI,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAChD,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,IAAI,EAAE,CAAC,QAAQ,EAAE,CAAC;gBAChB,sEAAsE;gBACtE,CAAC,MAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;YAC7G,CAAC;iBAAM,CAAC;gBACN,wEAAwE;gBACxE,CAAC,MAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,mCAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;YACnF,CAAC;QACH,CAAC;IACH,CAAC;IAED,mEAAmE;IAGnE,WAAW,CAAC,EAA6B;QACvC,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,EAAE,EAAE,CAAC,MAAiB,CAAC,CAAC,CAAC;QACjG,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBACjC,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;oBACxB,OAAO;gBACT,CAAC;gBAED,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;oBACrB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBACpB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YAC5B,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBACjC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YACpB,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAGD,aAAa,CAAC,EAAiB;;QAC7B,IAAI,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,GAAG,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACnD,IAAI,CAAC,WAAW,EAAE,CAAC;YAEnB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAqB,CAAC,CAAC,EAAE,CAAC;YAC/E,OAAO;QACT,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC;QACnC,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACxD,IAAI,QAA0B,CAAC;QAC/B,IACE,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,WAAW,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;YACjE,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,UAAU,IAAI,OAAO,CAAC,eAAe,CAAC,EAC/D,CAAC;YACD,QAAQ,GAAG,MAAA,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACzE,CAAC;aAAM,IACL,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,UAAU,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;YAChE,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,QAAQ,IAAI,OAAO,CAAC,eAAe,CAAC,EAC7D,CAAC;YACD,QAAQ,GAAG,MAAA,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;QAC3F,CAAC;QACD,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO;QACT,CAAC;QAED,IAAI,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,QAAQ,IAAI,OAAO,CAAC,eAAe,EAAE,CAAC;YAChE,IAAI,QAAQ,CAAC,IAAI,EAAE,CAAC;gBAClB,OAAO,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;gBAC1B,QAAQ,CAAC,aAAa,EAAE,CAAC;gBAEzB,OAAO;YACT,CAAC;QACH,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IACpC,CAAC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACxD,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC3D,OAAO,CACL,gBACE,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,aAAa,EACxB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,WAAW,CAAC,OAAO,GACzB,CACH,CAAC;QACJ,CAAC;QAED,OAAO,CACL,mBACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,WAAW,EAAE,IAAI,CAAC,iBAAiB,EACnC,aAAa,EAAE,IAAI,CAAC,WAAW,EAC/B,gBAAgB,EAAE,IAAI,EACtB,oBAAoB,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACpD,iBAAiB,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EACtF,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,aAAa,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,EAC3C,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC,GACrD,CACH,CAAC;IACJ,CAAC;IAEO,iBAAiB;QACvB,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YAClF,OAAO,aAAO,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,WAAW,CAAS,CAAC;QAC3D,CAAC;IACH,CAAC;IAEO,kBAAkB;QACxB,OAAO,CACL,EAAC,QAAQ;YACN,IAAI,CAAC,WAAW,IAAI,CACnB,YAAM,KAAK,EAAC,QAAQ;gBAClB,WAAK,GAAG,EAAC,iBAAiB,GAAG,CACxB,CACR;YACA,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,IAAI,CAC1D,YAAM,KAAK,EAAC,cAAc;gBACxB,YAAM,IAAI,EAAC,cAAc,GAAG,CACvB,CACR,CACQ,CACZ,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,OAAO,CACL,IAAI,CAAC,UAAU,GAAG,CAAC;YACnB,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CACxD,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAuB,CAAC,EAC1D,KAAK,EAAC,gBAAgB,gBACX,WAAW,mBACR,MAAM,mBACL,GAAG,IAAI,CAAC,UAAU,EAAE,mBACrB,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,UAAU;YAExB,cAAQ,IAAI,EAAC,aAAa,GAAG,CACtB,CACV,CACF,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,OAAO,CACL,mBACE,EAAE,EAAC,gBAAgB,EACnB,OAAO,EAAE,gBAAgB,CAAC,OAAO,EACjC,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,EAC9C,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,yBAAyB,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,MAAM,CAAC,EAChE,SAAS,EAAE,IAAI,CAAC,kBAAkB;YAElC,WAAK,IAAI,EAAC,eAAe;gBACvB,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,EAC1C,KAAK,EAAC,cAAc,gBACT,aAAa,EACxB,OAAO,EAAE,IAAI,CAAC,WAAW,iBACZ,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,EAClC,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU;oBAE1B,cAAQ,IAAI,EAAC,OAAO,GAAG,CAChB;gBAET,WACE,KAAK,EAAC,gBAAgB,iBACT,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE;oBAElC,YACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,mBAAmB,GACtC,CACE,CACF,CACM,CACf,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,OAAO,CACL,WAAK,KAAK,EAAC,eAAe;YACxB,WAAK,KAAK,EAAC,uBAAuB;gBAC/B,IAAI,CAAC,gBAAgB,EAAE;gBACxB,WAAK,KAAK,EAAC,eAAe;oBACvB,IAAI,CAAC,kBAAkB,EAAE;oBAC1B,WAAK,KAAK,EAAC,eAAe;wBACxB,YAAM,IAAI,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1C,CACF;gBACL,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,CACvC,CACF,CACP,CAAC;IACJ,CAAC;IAED;QA1bA;;;WAGG;QAEH,UAAK,GAAG,KAAK,CAAC;QAEd;;WAEG;QAEH,oBAAe,GAAG,KAAK,CAAC;QAExB;;WAEG;QAEH,iBAAY,GAAG,KAAK,CAAC;QAQrB;;WAEG;QAEH,sBAAiB,GAAG,OAAO,CAAC;QAQ5B;;WAEG;QAEH,iBAAY,GAAG,EAAE,CAAC;QAUlB;;WAEG;QAEH,gBAAW,GAAG,IAAI,CAAC;QAEnB;;WAEG;QAEH,eAAU,GAAG,KAAK,CAAC;QAQnB;;WAEG;QAEK,WAAM,GAAG,KAAK,CAAC;QASf,aAAQ,GAAG,IAAI,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAIjB,iBAAY,GAAuB,EAAE,CAAC;QAUtC,0BAAqB,GAA0B,6BAA6B;YAClF,CAAC,CAAC,IAAI,oBAAoB,CACtB,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;gBACV,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,cAAc,CAAC;YACtC,CAAC,EACD,EAAC,SAAS,EAAE,GAAG,EAAC,CACjB;YACH,CAAC,CAAC,SAAS,CAAC;QAiVZ,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/D,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9D;IAED,iBAAiB;QACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAE3B,4CAA4C;QAC5C,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,CAAC;QACnF,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,OAAO,CAAC;QACzC,gBAAgB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;QAChF,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CACxC,eAAe,WAAW,CAAC,MAAM,GAAG,CAAC,uBAAuB,WAAW,CAAC,MAAM,KAAK,CACpF,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,OAAO,CAAC;QACzC,gBAAgB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAClF,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,kBAAkB,0CAAE,UAAU,EAAE,CAAC;IACxC,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1E,OAAO;QACT,CAAC;QAED,OAAO,CACL,WAAK,KAAK,EAAE,EAAC,cAAc,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAAC;YAClF,YAAM,IAAI,EAAC,cAAc,GAAG,CACxB,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAEpD,OAAO,CACL,EAAC,IAAI,oEAAc,IAAI,CAAC,UAAU;YAChC,4DACE,KAAK,EAAE,EAAC,eAAe,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAC,EAC3F,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;gBAElC,4DAAK,KAAK,EAAE,EAAC,mBAAmB,EAAE,IAAI,EAAE,kBAAkB,EAAE,cAAc,EAAC;oBACzE,4DAAK,KAAK,EAAC,eAAe;wBACxB,4DAAK,KAAK,EAAC,eAAe;4BACxB,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,gBAAgB,EAAE,CAAQ;4BACxD,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,kBAAkB,EAAE;4BAC1C,4DAAK,KAAK,EAAC,iBAAiB;gCACzB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,EAAE;gCAC3C,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB;4BACN,4DAAK,KAAK,EAAC,aAAa;gCACrB,IAAI,CAAC,iBAAiB,EAAE;gCACxB,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,CACzD,CACF;wBACL,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,EAAE,CACtC;oBACL,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,CACxD;gBAEN,4DACE,KAAK,EAAC,gBAAgB,gBACV,IAAI,CAAC,KAAK,IAAI,SAAS,IAElC,IAAI,CAAC,WAAW,IAAI,CACnB,4DACE,IAAI,EAAC,SAAS,gBACF,IAAI,CAAC,KAAK,IAAI,SAAS;oBAEnC,6DACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,mBAAmB,GACtC,CACE,CACP,CACG,CACF;YACL,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE,CAC7B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Fragment,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/**\n * @slot menu-button - Slot for a custom menu button. It will replace the default burger icon.\n * @slot title - Slot for the main title\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @slot product-logo - To insert the product logo, it should be used with an img tag.\n */\n@Component({\n tag: \"z-app-header\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAppHeader implements ComponentInterface {\n @Element() hostElement: HTMLZAppHeaderElement;\n\n /**\n * Stuck mode for the header.\n * You can programmatically set it using an IntersectionObserver.\n */\n @Prop({reflect: true})\n stuck = false;\n\n /**\n * When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container.\n */\n @Prop({reflect: true, mutable: true})\n enableOffcanvas = false;\n\n /**\n * Enable the search bar.\n */\n @Prop({reflect: true})\n enableSearch = false;\n\n /**\n * Visible label for the search bar.\n */\n @Prop()\n searchLabel?: string;\n\n /**\n * Placeholder text for the search bar.\n */\n @Prop()\n searchPlaceholder = \"Cerca\";\n\n /**\n * Label of the search button.\n */\n @Prop()\n searchButtonLabel?: string;\n\n /**\n * Search string for the search bar.\n */\n @Prop({mutable: true})\n searchString = \"\";\n\n /**\n * Url to the search page.\n * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n * The link will also appear on the sticky header.\n */\n @Prop()\n searchPageUrl: string;\n\n /**\n * Enable laZ logo.\n */\n @Prop({reflect: true})\n enableZLogo = true;\n\n /**\n * The opening state of the drawer.\n */\n @Prop({mutable: true})\n drawerOpen = false;\n\n /**\n * Emitted when the `stuck` state of the header changes\n */\n @Event()\n sticking: EventEmitter;\n\n /**\n * The stuck state of the bar.\n */\n @State()\n private _stuck = false;\n\n /**\n * Current count of menu items.\n */\n @State()\n private menuLength: number;\n\n @State()\n private isMobile = true;\n\n @State()\n private isTablet = false;\n\n private container?: HTMLDivElement;\n\n private menuElements: HTMLZMenuElement[] = [];\n\n private menuWidth: number;\n\n private closeDrawerButton: HTMLButtonElement;\n\n private burgerButton: HTMLButtonElement;\n\n private menuResizeObserver: ResizeObserver;\n\n private stuckIntersecObserver?: IntersectionObserver = SUPPORT_INTERSECTION_OBSERVER\n ? new IntersectionObserver(\n ([entry]) => {\n this._stuck = !entry.isIntersecting;\n },\n {threshold: 0.5}\n )\n : undefined;\n\n @Watch(\"_stuck\")\n onStuck(): void {\n const scrollParent = this.scrollParent;\n if (!scrollParent) {\n return;\n }\n\n this.sticking.emit(this._stuck);\n }\n\n @Watch(\"drawerOpen\")\n setMenuFloatingMode(): void {\n if (this.menuElements.length === 0) {\n return;\n }\n\n this.menuElements.forEach((element) => {\n element.open = false;\n element.verticalContext = this.drawerOpen;\n });\n }\n\n @Watch(\"stuck\")\n onStuckChange(): void {\n if (!this.container) {\n return;\n }\n\n if (this.stuck) {\n this.stuckIntersecObserver?.observe(this.container);\n } else {\n this._stuck = false;\n this.stuckIntersecObserver?.unobserve(this.container);\n }\n }\n\n private get title(): string {\n return this.hostElement.querySelector('[slot=\"title\"]')?.textContent.trim();\n }\n\n private get scrollParent(): Window | Element {\n const parent = this.hostElement.offsetParent;\n if (parent === document.body || parent === document.documentElement) {\n return window;\n }\n\n return parent;\n }\n\n private get canShowMenu(): boolean {\n return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;\n }\n\n private get focusableMenu(): HTMLZMenuElement {\n return this.menuElements.find((el) => el.htmlTabindex === 0);\n }\n\n private openDrawer(): void {\n this.drawerOpen = true;\n this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n setTimeout(() => this.menuElements[0].setFocus(), 400); /* wait for the 400ms offcanvas transition */\n }\n\n private closeDrawer(): void {\n this.drawerOpen = false;\n setTimeout(() => this.burgerButton.focus(), 100);\n }\n\n private collectMenuElements(): void {\n this.menuElements = Array.from(this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n this.menuLength = this.menuElements.length;\n if (!this.enableOffcanvas) {\n this.menuWidth =\n this.menuElements.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0) +\n (this.menuLength - 1) * 32 /* 32px is the gap between each menu item */;\n }\n this.setMenuFloatingMode();\n }\n\n /** Automatically use offcanvas mode when the menubar doesn't fit in the header. */\n private setupMenuResizeObserver(): void {\n if (this.enableOffcanvas) {\n return;\n }\n\n this.menuResizeObserver = new ResizeObserver((entries) => {\n if (this.isMobile) {\n this.enableOffcanvas = true;\n\n return;\n }\n\n const containerWidth = entries[0].contentBoxSize[0].inlineSize;\n if (this.menuWidth === 0) {\n return;\n }\n\n if (this.menuWidth > containerWidth && !this.enableOffcanvas) {\n this.enableOffcanvas = true;\n } else if (this.menuWidth <= containerWidth && this.enableOffcanvas) {\n this.enableOffcanvas = false;\n }\n });\n this.menuResizeObserver.observe(this.container);\n }\n\n private hasSlot(slotName: string): boolean {\n return this.hostElement.querySelector(`[slot=\"${slotName}\"]`) !== null;\n }\n\n private moveFocus(current: HTMLZMenuElement, receiver: HTMLZMenuElement): void {\n current.htmlTabindex = -1;\n receiver.setFocus();\n }\n\n private onOffcanvasKeydown(ev: KeyboardEvent): void {\n if (ev.key !== KeyboardCode.TAB || !this.drawerOpen) {\n return;\n }\n\n const closestMenu = (ev.target as HTMLElement).closest(\"z-menu\");\n if (closestMenu) {\n ev.preventDefault();\n ev.stopPropagation();\n // restore tabindex to the zmenu containing the focused element\n closestMenu.htmlTabindex = 0;\n this.closeDrawerButton.focus();\n } else if (ev.target === this.closeDrawerButton) {\n ev.preventDefault();\n ev.stopPropagation();\n if (ev.shiftKey) {\n // give focus to the last open menu if any or the last menu otherwhise\n (this.menuElements.filter((menu) => menu.open).pop() ?? this.menuElements[this.menuLength - 1]).setFocus();\n } else {\n // give focus to the first open menu if any or the first menu otherwhise\n (this.menuElements.find((menu) => menu.open) ?? this.menuElements[0]).setFocus();\n }\n }\n }\n\n /** Close each menu except the one receiving focus/click, if any */\n @Listen(\"focusin\", {target: \"document\", passive: true})\n @Listen(\"click\", {target: \"document\", passive: true})\n manageMenus(ev: FocusEvent | PointerEvent): void {\n const targetMenu = this.menuElements.find((menu) => containsElement(menu, ev.target as Element));\n if (targetMenu) {\n this.menuElements.forEach((menu) => {\n if (menu === targetMenu) {\n return;\n }\n\n menu.htmlTabindex = -1;\n if (!this.drawerOpen) {\n menu.open = false;\n }\n });\n } else if (!this.drawerOpen) {\n this.menuElements.forEach((menu) => {\n menu.open = false;\n });\n }\n }\n\n @Listen(\"keydown\", {passive: true})\n handleKeydown(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.ESC && this.drawerOpen) {\n this.closeDrawer();\n\n return;\n }\n\n if (!this.menuElements.some((elem) => elem.contains(ev.target as HTMLElement))) {\n return;\n }\n\n const current = this.focusableMenu;\n const currentIndex = this.menuElements.indexOf(current);\n let receiver: HTMLZMenuElement;\n if (\n (ev.key === KeyboardCode.ARROW_RIGHT && !current.verticalContext) ||\n (ev.key === KeyboardCode.ARROW_DOWN && current.verticalContext)\n ) {\n receiver = this.menuElements[currentIndex + 1] ?? this.menuElements[0];\n } else if (\n (ev.key === KeyboardCode.ARROW_LEFT && !current.verticalContext) ||\n (ev.key === KeyboardCode.ARROW_UP && current.verticalContext)\n ) {\n receiver = this.menuElements[currentIndex - 1] ?? this.menuElements[this.menuLength - 1];\n }\n if (!receiver) {\n return;\n }\n\n if (ev.key === KeyboardCode.ARROW_UP && current.verticalContext) {\n if (receiver.open) {\n current.htmlTabindex = -1;\n receiver.focusLastItem();\n\n return;\n }\n }\n\n this.moveFocus(current, receiver);\n }\n\n private renderSeachbar(): HTMLZButtonElement | HTMLZSearchbarElement | undefined {\n if (this.isMobile && !this.searchPageUrl && this._stuck) {\n return;\n }\n\n if (this.searchPageUrl && (this.isMobile || this.isTablet)) {\n return (\n <z-button\n class=\"search-page-button\"\n variant={ButtonVariant.SECONDARY}\n href={this.searchPageUrl}\n icon=\"search\"\n size={ControlSize.X_SMALL}\n />\n );\n }\n\n return (\n <z-searchbar\n value={this.searchString}\n placeholder={this.searchPlaceholder}\n htmlAriaLabel={this.searchLabel}\n showSearchButton={true}\n searchButtonIconOnly={this.isMobile || this.isTablet}\n searchButtonLabel={this.isMobile || this.isTablet ? undefined : this.searchButtonLabel}\n size={ControlSize.X_SMALL}\n variant={ButtonVariant.SECONDARY}\n preventSubmit={this.searchString.length < 3}\n onSearchTyping={(e) => (this.searchString = e.detail)}\n />\n );\n }\n\n private renderSearchLabel(): HTMLSpanElement | undefined {\n if (this.searchLabel && !this.isMobile && !this.isTablet && !this.enableOffcanvas) {\n return <label class=\"z-label\">{this.searchLabel}</label>;\n }\n }\n\n private renderProductLogos(): HTMLElement | null {\n return (\n <Fragment>\n {this.enableZLogo && (\n <span class=\"z-logo\">\n <img alt=\"Logo Zanichelli\" />\n </span>\n )}\n {this.hostElement.querySelector(\"[slot='product-logo']\") && (\n <span class=\"product-logo\">\n <slot name=\"product-logo\" />\n </span>\n )}\n </Fragment>\n );\n }\n\n private renderMenuButton(): HTMLButtonElement {\n return (\n this.menuLength > 0 &&\n (this.enableOffcanvas || this._stuck || this.isMobile) && (\n <button\n ref={(el) => (this.burgerButton = el as HTMLButtonElement)}\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n aria-haspopup=\"menu\"\n aria-expanded={`${this.drawerOpen}`}\n aria-controls=\"offcanvas-menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\" />\n </button>\n )\n );\n }\n\n private renderOffcanvas(): HTMLZOffcanvasElement {\n return (\n <z-offcanvas\n id=\"offcanvas-menu\"\n variant={OffCanvasVariant.OVERLAY}\n transitiondirection={TransitionDirection.RIGHT}\n open={this.drawerOpen}\n onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n onKeyDown={this.onOffcanvasKeydown}\n >\n <div slot=\"canvasContent\">\n <button\n ref={(el) => (this.closeDrawerButton = el)}\n class=\"drawer-close\"\n aria-label=\"Chiudi menu\"\n onClick={this.closeDrawer}\n aria-hidden={`${!this.drawerOpen}`}\n disabled={!this.drawerOpen}\n >\n <z-icon name=\"close\" />\n </button>\n\n <div\n class=\"drawer-content\"\n aria-hidden={`${!this.drawerOpen}`}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n />\n </div>\n </div>\n </z-offcanvas>\n );\n }\n\n private renderStuck(): HTMLElement {\n return (\n <div class=\"heading-stuck\">\n <div class=\"heading-stuck-content\">\n {this.renderMenuButton()}\n <div class=\"heading-title\">\n {this.renderProductLogos()}\n <div class=\"stucked-title\">\n <slot name=\"stucked-title\">{this.title}</slot>\n </div>\n </div>\n {this.enableSearch && this.renderSeachbar()}\n </div>\n </div>\n );\n }\n\n constructor() {\n this.openDrawer = this.openDrawer.bind(this);\n this.closeDrawer = this.closeDrawer.bind(this);\n this.collectMenuElements = this.collectMenuElements.bind(this);\n this.onOffcanvasKeydown = this.onOffcanvasKeydown.bind(this);\n }\n\n componentWillLoad(): void {\n this.collectMenuElements();\n\n // mobile and tablet media queries listeners\n const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);\n this.isMobile = mobileMediaQuery.matches;\n mobileMediaQuery.addEventListener(\"change\", (e) => (this.isMobile = e.matches));\n const tabletMediaQuery = window.matchMedia(\n `(min-width: ${Breakpoints.MOBILE + 1}px) and (max-width: ${Breakpoints.TABLET}px)`\n );\n this.isTablet = tabletMediaQuery.matches;\n tabletMediaQuery.addEventListener(\"change\", (e) => (this.isTablet = e.matches));\n }\n\n componentDidLoad(): void {\n this.onStuckChange();\n this.setupMenuResizeObserver();\n }\n\n disconnectedCallback(): void {\n this.menuResizeObserver?.disconnect();\n }\n\n private renderTopSubtitle(): HTMLElement | undefined {\n if (!this.hasSlot(\"top-subtitle\") || (this.enableSearch && this.isMobile)) {\n return;\n }\n\n return (\n <div class={{\"top-subtitle\": true, \"has-product-logo\": this.hasSlot(\"product-logo\")}}>\n <slot name=\"top-subtitle\" />\n </div>\n );\n }\n\n render(): HTMLZAppHeaderElement {\n const hasTopSubtitle = this.hasSlot(\"top-subtitle\");\n\n return (\n <Host menu-length={this.menuLength}>\n <div\n class={{\"heading-panel\": true, \"has-menubar\": this.menuLength > 0 && !this.enableOffcanvas}}\n ref={(el) => (this.container = el)}\n >\n <div class={{\"heading-container\": true, \"has-top-subtitle\": hasTopSubtitle}}>\n <div class=\"heading-block\">\n <div class=\"heading-title\">\n <slot name=\"menu-button\">{this.renderMenuButton()}</slot>\n {!this._stuck && this.renderProductLogos()}\n <div class=\"title-container\">\n {!this.isMobile && this.renderTopSubtitle()}\n <slot name=\"title\" />\n </div>\n <div class=\"search-slot\">\n {this.renderSearchLabel()}\n {this.enableSearch && !this.isMobile && this.renderSeachbar()}\n </div>\n </div>\n {this.isMobile && this.renderTopSubtitle()}\n </div>\n {this.enableSearch && this.isMobile && this.renderSeachbar()}\n </div>\n\n <nav\n class=\"menu-container\"\n aria-label={this.title || undefined}\n >\n {this.canShowMenu && (\n <div\n role=\"menubar\"\n aria-label={this.title || undefined}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n />\n </div>\n )}\n </nav>\n </div>\n {this.renderOffcanvas()}\n {this._stuck && this.renderStuck()}\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-app-header/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Fragment,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/**\n * @slot menu-button - Slot for a custom menu button. It will replace the default burger icon.\n * @slot title - Slot for the main title\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @slot product-logo - To insert the product logo, it should be used with an img tag.\n */\n@Component({\n tag: \"z-app-header\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAppHeader implements ComponentInterface {\n @Element() hostElement: HTMLZAppHeaderElement;\n\n /**\n * Stuck mode for the header.\n * You can programmatically set it using an IntersectionObserver.\n */\n @Prop({reflect: true})\n stuck = false;\n\n /**\n * When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container.\n */\n @Prop({reflect: true, mutable: true})\n enableOffcanvas = false;\n\n /**\n * Enable the search bar.\n */\n @Prop({reflect: true})\n enableSearch = false;\n\n /**\n * Visible label for the search bar.\n */\n @Prop()\n searchLabel?: string;\n\n /**\n * Placeholder text for the search bar.\n */\n @Prop()\n searchPlaceholder = \"Cerca\";\n\n /**\n * Label of the search button.\n */\n @Prop()\n searchButtonLabel?: string;\n\n /**\n * Search string for the search bar.\n */\n @Prop({mutable: true})\n searchString = \"\";\n\n /**\n * Url to the search page.\n * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n * The link will also appear on the sticky header.\n */\n @Prop()\n searchPageUrl: string;\n\n /**\n * Enable laZ logo.\n */\n @Prop({reflect: true})\n enableZLogo = true;\n\n /**\n * The opening state of the drawer.\n */\n @Prop({mutable: true})\n drawerOpen = false;\n\n /**\n * Emitted when the `stuck` state of the header changes\n */\n @Event()\n sticking: EventEmitter;\n\n /**\n * The stuck state of the bar.\n */\n @State()\n private _stuck = false;\n\n /**\n * Current count of menu items.\n */\n @State()\n private menuLength: number;\n\n @State()\n private isMobile = true;\n\n @State()\n private isTablet = false;\n\n private container?: HTMLDivElement;\n\n private menuElements: HTMLZMenuElement[] = [];\n\n private menuWidth: number;\n\n private closeDrawerButton: HTMLButtonElement;\n\n private burgerButton: HTMLButtonElement;\n\n private menuResizeObserver: ResizeObserver;\n\n private stuckIntersecObserver?: IntersectionObserver = SUPPORT_INTERSECTION_OBSERVER\n ? new IntersectionObserver(\n ([entry]) => {\n this._stuck = !entry.isIntersecting;\n },\n {threshold: 0.5}\n )\n : undefined;\n\n @Watch(\"_stuck\")\n onStuck(): void {\n const scrollParent = this.scrollParent;\n if (!scrollParent) {\n return;\n }\n\n this.sticking.emit(this._stuck);\n }\n\n @Watch(\"drawerOpen\")\n setMenuFloatingMode(): void {\n if (this.menuElements.length === 0) {\n return;\n }\n\n this.menuElements.forEach((element) => {\n element.open = false;\n element.verticalContext = this.drawerOpen;\n });\n }\n\n @Watch(\"stuck\")\n onStuckChange(): void {\n if (!this.container) {\n return;\n }\n\n if (this.stuck) {\n this.stuckIntersecObserver?.observe(this.container);\n } else {\n this._stuck = false;\n this.stuckIntersecObserver?.unobserve(this.container);\n }\n }\n\n private get title(): string {\n return this.hostElement.querySelector('[slot=\"title\"]')?.textContent.trim();\n }\n\n private get scrollParent(): Window | Element {\n const parent = this.hostElement.offsetParent;\n if (parent === document.body || parent === document.documentElement) {\n return window;\n }\n\n return parent;\n }\n\n private get canShowMenu(): boolean {\n return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;\n }\n\n private get focusableMenu(): HTMLZMenuElement {\n return this.menuElements.find((el) => el.htmlTabindex === 0);\n }\n\n private openDrawer(): void {\n this.drawerOpen = true;\n this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n setTimeout(() => this.menuElements[0].setFocus(), 400); /* wait for the 400ms offcanvas transition */\n }\n\n private closeDrawer(): void {\n this.drawerOpen = false;\n setTimeout(() => this.burgerButton.focus(), 100);\n }\n\n private collectMenuElements(): void {\n this.menuElements = Array.from(this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n this.menuLength = this.menuElements.length;\n if (!this.enableOffcanvas) {\n this.menuWidth =\n this.menuElements.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0) +\n (this.menuLength - 1) * 32 /* 32px is the gap between each menu item */;\n }\n this.setMenuFloatingMode();\n }\n\n /** Automatically use offcanvas mode when the menubar doesn't fit in the header. */\n private setupMenuResizeObserver(): void {\n if (this.enableOffcanvas) {\n return;\n }\n\n this.menuResizeObserver = new ResizeObserver((entries) => {\n if (this.isMobile) {\n this.enableOffcanvas = true;\n\n return;\n }\n\n const containerWidth = entries[0].contentBoxSize[0].inlineSize;\n if (this.menuWidth === 0) {\n return;\n }\n\n if (this.menuWidth > containerWidth && !this.enableOffcanvas) {\n this.enableOffcanvas = true;\n } else if (this.menuWidth <= containerWidth && this.enableOffcanvas) {\n this.enableOffcanvas = false;\n }\n });\n this.menuResizeObserver.observe(this.container);\n }\n\n private hasSlot(slotName: string): boolean {\n return this.hostElement.querySelector(`[slot=\"${slotName}\"]`) !== null;\n }\n\n private moveFocus(current: HTMLZMenuElement, receiver: HTMLZMenuElement): void {\n current.htmlTabindex = -1;\n receiver.setFocus();\n }\n\n private onOffcanvasKeydown(ev: KeyboardEvent): void {\n if (ev.key !== KeyboardCode.TAB || !this.drawerOpen) {\n return;\n }\n\n const closestMenu = (ev.target as HTMLElement).closest(\"z-menu\");\n if (closestMenu) {\n ev.preventDefault();\n ev.stopPropagation();\n // restore tabindex to the zmenu containing the focused element\n closestMenu.htmlTabindex = 0;\n this.closeDrawerButton.focus();\n } else if (ev.target === this.closeDrawerButton) {\n ev.preventDefault();\n ev.stopPropagation();\n if (ev.shiftKey) {\n // give focus to the last open menu if any or the last menu otherwhise\n (this.menuElements.filter((menu) => menu.open).pop() ?? this.menuElements[this.menuLength - 1]).setFocus();\n } else {\n // give focus to the first open menu if any or the first menu otherwhise\n (this.menuElements.find((menu) => menu.open) ?? this.menuElements[0]).setFocus();\n }\n }\n }\n\n /** Close each menu except the one receiving focus/click, if any */\n @Listen(\"focusin\", {target: \"document\", passive: true})\n @Listen(\"click\", {target: \"document\", passive: true})\n manageMenus(ev: FocusEvent | PointerEvent): void {\n const targetMenu = this.menuElements.find((menu) => containsElement(menu, ev.target as Element));\n if (targetMenu) {\n this.menuElements.forEach((menu) => {\n if (menu === targetMenu) {\n return;\n }\n\n menu.htmlTabindex = -1;\n if (!this.drawerOpen) {\n menu.open = false;\n }\n });\n } else if (!this.drawerOpen) {\n this.menuElements.forEach((menu) => {\n menu.open = false;\n });\n }\n }\n\n @Listen(\"keydown\", {passive: true})\n handleKeydown(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.ESC && this.drawerOpen) {\n this.closeDrawer();\n\n return;\n }\n\n if (!this.menuElements.some((elem) => elem.contains(ev.target as HTMLElement))) {\n return;\n }\n\n const current = this.focusableMenu;\n const currentIndex = this.menuElements.indexOf(current);\n let receiver: HTMLZMenuElement;\n if (\n (ev.key === KeyboardCode.ARROW_RIGHT && !current.verticalContext) ||\n (ev.key === KeyboardCode.ARROW_DOWN && current.verticalContext)\n ) {\n receiver = this.menuElements[currentIndex + 1] ?? this.menuElements[0];\n } else if (\n (ev.key === KeyboardCode.ARROW_LEFT && !current.verticalContext) ||\n (ev.key === KeyboardCode.ARROW_UP && current.verticalContext)\n ) {\n receiver = this.menuElements[currentIndex - 1] ?? this.menuElements[this.menuLength - 1];\n }\n if (!receiver) {\n return;\n }\n\n if (ev.key === KeyboardCode.ARROW_UP && current.verticalContext) {\n if (receiver.open) {\n current.htmlTabindex = -1;\n receiver.focusLastItem();\n\n return;\n }\n }\n\n this.moveFocus(current, receiver);\n }\n\n private renderSeachbar(): HTMLZButtonElement | HTMLZSearchbarElement | undefined {\n if (this.isMobile && !this.searchPageUrl && this._stuck) {\n return;\n }\n\n if (this.searchPageUrl && (this.isMobile || this.isTablet)) {\n return (\n <z-button\n class=\"search-page-button\"\n variant={ButtonVariant.SECONDARY}\n href={this.searchPageUrl}\n icon=\"search\"\n size={ControlSize.X_SMALL}\n />\n );\n }\n\n return (\n <z-searchbar\n htmlid=\"app-header-searchbar\"\n value={this.searchString}\n placeholder={this.searchPlaceholder}\n htmlAriaLabel={this.searchLabel}\n showSearchButton={true}\n searchButtonIconOnly={this.isMobile || this.isTablet}\n searchButtonLabel={this.isMobile || this.isTablet ? undefined : this.searchButtonLabel}\n size={ControlSize.X_SMALL}\n variant={ButtonVariant.SECONDARY}\n preventSubmit={this.searchString.length < 3}\n onSearchTyping={(e) => (this.searchString = e.detail)}\n />\n );\n }\n\n private renderSearchLabel(): HTMLSpanElement | undefined {\n if (!this.isMobile && !this.isTablet && !this.enableOffcanvas) {\n return (\n <label\n class=\"z-label\"\n htmlFor=\"input-app-header-searchbar\"\n aria-hidden={this.searchLabel ? \"false\" : \"true\"}\n >\n {this.searchLabel}\n </label>\n );\n }\n }\n\n private renderProductLogos(): HTMLElement | null {\n return (\n <Fragment>\n {this.enableZLogo && (\n <span class=\"z-logo\">\n <img alt=\"Logo Zanichelli\" />\n </span>\n )}\n {this.hostElement.querySelector(\"[slot='product-logo']\") && (\n <span class=\"product-logo\">\n <slot name=\"product-logo\" />\n </span>\n )}\n </Fragment>\n );\n }\n\n private renderMenuButton(): HTMLButtonElement {\n return (\n this.menuLength > 0 &&\n (this.enableOffcanvas || this._stuck || this.isMobile) && (\n <button\n ref={(el) => (this.burgerButton = el as HTMLButtonElement)}\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n aria-haspopup=\"menu\"\n aria-expanded={`${this.drawerOpen}`}\n aria-controls=\"offcanvas-menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\" />\n </button>\n )\n );\n }\n\n private renderOffcanvas(): HTMLZOffcanvasElement {\n return (\n <z-offcanvas\n id=\"offcanvas-menu\"\n variant={OffCanvasVariant.OVERLAY}\n transitiondirection={TransitionDirection.RIGHT}\n open={this.drawerOpen}\n onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n onKeyDown={this.onOffcanvasKeydown}\n >\n <div slot=\"canvasContent\">\n <button\n ref={(el) => (this.closeDrawerButton = el)}\n class=\"drawer-close\"\n aria-label=\"Chiudi menu\"\n onClick={this.closeDrawer}\n aria-hidden={`${!this.drawerOpen}`}\n disabled={!this.drawerOpen}\n >\n <z-icon name=\"close\" />\n </button>\n\n <div\n class=\"drawer-content\"\n aria-hidden={`${!this.drawerOpen}`}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n />\n </div>\n </div>\n </z-offcanvas>\n );\n }\n\n private renderStuck(): HTMLElement {\n return (\n <div class=\"heading-stuck\">\n <div class=\"heading-stuck-content\">\n {this.renderMenuButton()}\n <div class=\"heading-title\">\n {this.renderProductLogos()}\n <div class=\"stucked-title\">\n <slot name=\"stucked-title\">{this.title}</slot>\n </div>\n </div>\n {this.enableSearch && this.renderSeachbar()}\n </div>\n </div>\n );\n }\n\n constructor() {\n this.openDrawer = this.openDrawer.bind(this);\n this.closeDrawer = this.closeDrawer.bind(this);\n this.collectMenuElements = this.collectMenuElements.bind(this);\n this.onOffcanvasKeydown = this.onOffcanvasKeydown.bind(this);\n }\n\n componentWillLoad(): void {\n this.collectMenuElements();\n\n // mobile and tablet media queries listeners\n const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);\n this.isMobile = mobileMediaQuery.matches;\n mobileMediaQuery.addEventListener(\"change\", (e) => (this.isMobile = e.matches));\n const tabletMediaQuery = window.matchMedia(\n `(min-width: ${Breakpoints.MOBILE + 1}px) and (max-width: ${Breakpoints.TABLET}px)`\n );\n this.isTablet = tabletMediaQuery.matches;\n tabletMediaQuery.addEventListener(\"change\", (e) => (this.isTablet = e.matches));\n }\n\n componentDidLoad(): void {\n this.onStuckChange();\n this.setupMenuResizeObserver();\n }\n\n disconnectedCallback(): void {\n this.menuResizeObserver?.disconnect();\n }\n\n private renderTopSubtitle(): HTMLElement | undefined {\n if (!this.hasSlot(\"top-subtitle\") || (this.enableSearch && this.isMobile)) {\n return;\n }\n\n return (\n <div class={{\"top-subtitle\": true, \"has-product-logo\": this.hasSlot(\"product-logo\")}}>\n <slot name=\"top-subtitle\" />\n </div>\n );\n }\n\n render(): HTMLZAppHeaderElement {\n const hasTopSubtitle = this.hasSlot(\"top-subtitle\");\n\n return (\n <Host menu-length={this.menuLength}>\n <div\n class={{\"heading-panel\": true, \"has-menubar\": this.menuLength > 0 && !this.enableOffcanvas}}\n ref={(el) => (this.container = el)}\n >\n <div class={{\"heading-container\": true, \"has-top-subtitle\": hasTopSubtitle}}>\n <div class=\"heading-block\">\n <div class=\"heading-title\">\n <slot name=\"menu-button\">{this.renderMenuButton()}</slot>\n {!this._stuck && this.renderProductLogos()}\n <div class=\"title-container\">\n {!this.isMobile && this.renderTopSubtitle()}\n <slot name=\"title\" />\n </div>\n <div class=\"search-slot\">\n {this.enableSearch && this.renderSearchLabel()}\n {this.enableSearch && !this.isMobile && this.renderSeachbar()}\n </div>\n </div>\n {this.isMobile && this.renderTopSubtitle()}\n </div>\n {this.enableSearch && this.isMobile && this.renderSeachbar()}\n </div>\n\n <nav\n class=\"menu-container\"\n aria-label={this.title || undefined}\n >\n {this.canShowMenu && (\n <div\n role=\"menubar\"\n aria-label={this.title || undefined}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n />\n </div>\n )}\n </nav>\n </div>\n {this.renderOffcanvas()}\n {this._stuck && this.renderStuck()}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -203,6 +203,7 @@ z-searchbar {
|
|
|
203
203
|
}
|
|
204
204
|
|
|
205
205
|
.search-slot .z-label {
|
|
206
|
+
height: 10px;
|
|
206
207
|
padding-bottom: 0;
|
|
207
208
|
margin-bottom: -3px;
|
|
208
209
|
font-size: 10px;
|
|
@@ -405,6 +406,10 @@ z-offcanvas[open] .drawer-content ::slotted(z-menu) {
|
|
|
405
406
|
|
|
406
407
|
/* Desktop breakpoint */
|
|
407
408
|
@media (min-width: 1152px) {
|
|
409
|
+
.search-slot {
|
|
410
|
+
height: 53px;
|
|
411
|
+
}
|
|
412
|
+
|
|
408
413
|
z-searchbar {
|
|
409
414
|
min-width: calc(var(--space-unit) * 45);
|
|
410
415
|
}
|
|
@@ -239,7 +239,7 @@ Unfortunately the `aspect-ratio` property is still experimental */
|
|
|
239
239
|
left: 0;
|
|
240
240
|
justify-content: flex-end;
|
|
241
241
|
padding: var(--space-unit);
|
|
242
|
-
background-image: linear-gradient(to
|
|
242
|
+
background-image: linear-gradient(to bottom, transparent, rgb(39 39 39 / 57%) 85%, var(--gray800) 100%);
|
|
243
243
|
color: var(--color-text-inverse);
|
|
244
244
|
fill: var(--color-text-inverse);
|
|
245
245
|
}
|
|
@@ -204,17 +204,17 @@ export class ZSearchbar {
|
|
|
204
204
|
}
|
|
205
205
|
render() {
|
|
206
206
|
var _a, _b, _c, _d, _e;
|
|
207
|
-
return (h(Host, { key: 'beeb6767dbccbc257ee122c0fbe405337812a64b', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: '91ea65a3b095acc51ce1244d91fe21133f850ded', class: "input-container" }, h("z-input", { key: '
|
|
207
|
+
return (h(Host, { key: 'beeb6767dbccbc257ee122c0fbe405337812a64b', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: '91ea65a3b095acc51ce1244d91fe21133f850ded', class: "input-container" }, h("z-input", { key: 'a87a56c3b654ee2a6d51abbcbd0b00b4f113db29', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
|
|
208
208
|
handleEnterKeydSubmit(e, () => this.handleSubmit());
|
|
209
209
|
this.handleArrowsNavigation(e);
|
|
210
|
-
}, onFocus: () => (this.showResults = true), value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), size: this.size, label: this.label,
|
|
210
|
+
}, onFocus: () => (this.showResults = true), value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), size: this.size, label: this.label, htmlAriaLabel: this.htmlAriaLabel || this.placeholder || undefined }), !!(this.showResults &&
|
|
211
211
|
this.autocomplete &&
|
|
212
212
|
this.searchString &&
|
|
213
213
|
this.searchString.length >= this.autocompleteMinChars &&
|
|
214
|
-
this.resultsItemsList) && (h("div", { key: '
|
|
214
|
+
this.resultsItemsList) && (h("div", { key: 'b0ec36671df7c21f50dc39b4806d5fcd510dfdf3', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", h("b", null, this.searchString), h("br", null), h("br", null), "Cosa puoi fare?", h("ul", null, h("li", null, "Verificare di aver scritto bene"), h("li", null, "Provare a cercare un'altra parola"), h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("div", { class: "item-label body-3 mobile-body-4", innerHTML: (_c = this.searchHelperLabel) === null || _c === void 0 ? void 0 : _c.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))), this.renderItemGroups(), !!(this.searchString &&
|
|
215
215
|
((_d = this.resultsItemsList) === null || _d === void 0 ? void 0 : _d.length) &&
|
|
216
216
|
this.currResultsCount &&
|
|
217
|
-
this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, h("div", { role: "option", class: "item-show-all body-3 mobile-body-4", tabindex: 0, onClick: () => (this.currResultsCount = undefined) }, "Vedi tutti i risultati")))))))), this.showSearchButton && (h("z-button", { key: '
|
|
217
|
+
this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, h("div", { role: "option", class: "item-show-all body-3 mobile-body-4", tabindex: 0, onClick: () => (this.currResultsCount = undefined) }, "Vedi tutti i risultati")))))))), this.showSearchButton && (h("z-button", { key: '168b680221822a07a73cdbf8917f4fadb9063a98', icon: this.searchButtonIconOnly ? "search" : undefined, "aria-label": this.searchButtonIconOnly ? this.searchButtonLabel.trim() || "CERCA" : undefined, disabled: !!this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, this.searchButtonIconOnly ? "" : this.searchButtonLabel.trim() || "CERCA"))));
|
|
218
218
|
}
|
|
219
219
|
static get is() { return "z-searchbar"; }
|
|
220
220
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-searchbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {\n ButtonVariant,\n ControlSize,\n KeyboardCode,\n SearchbarGroup,\n SearchbarGroupedItem,\n SearchbarItem,\n} from \"../../beans\";\nimport {handleEnterKeydSubmit, randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-searchbar\",\n styleUrls: [\n \"styles.css\",\n \"../css-components/z-label/styles.css\",\n \"../css-components/z-scrollbar/styles.css\",\n \"../../tokens/typography.css\",\n ],\n shadow: true,\n})\nexport class ZSearchbar implements ComponentInterface {\n @Element() host: HTMLZSearchbarElement;\n\n /** The id of the searchbar element */\n @Prop({reflect: true})\n htmlid = `searchbar-${randomId()}`;\n\n /** Prevent submit action */\n @Prop()\n preventSubmit?: boolean = false;\n\n /** The input label */\n @Prop()\n label?: string;\n\n /** The input aria-label */\n @Prop()\n htmlAriaLabel?: string;\n\n /** Input search string */\n @Prop()\n value?: string;\n\n /** Search input placeholder */\n @Prop()\n placeholder?: string;\n\n /** Show autocomplete results */\n @Prop()\n autocomplete?: boolean = false;\n\n /** Minimun number of characters to dispatch typing event */\n @Prop()\n autocompleteMinChars?: number = 3;\n\n /** Number of results shown. Default: all */\n @Prop()\n resultsCount?: number;\n\n /** Search helper text */\n @Prop()\n searchHelperLabel?: string = \"Cerca {searchString}\";\n\n /** Autocomplete results items */\n @Prop()\n resultsItems?: SearchbarItem[] | string;\n\n /** Sort autocomplete results items */\n @Prop()\n sortResultsItems?: boolean = false;\n\n /** Show submit button */\n @Prop()\n showSearchButton?: boolean = false;\n\n /** Hide the label of the submit button, showing only the icon */\n @Prop()\n searchButtonIconOnly?: boolean = false;\n\n /** The label of the submit button */\n @Prop()\n searchButtonLabel?: string = \"CERCA\";\n\n /** Size of the `z-input` and submit `z-button` */\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n /** Submit `z-button` variant */\n @Prop()\n variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n @State()\n searchString = this.value;\n\n @State()\n currResultsCount: number | undefined = this.resultsCount;\n\n @State()\n showResults = false;\n\n @State()\n isMobile = false;\n\n @State()\n selectedItem?: SearchbarItem;\n\n private resultsItemsList: SearchbarItem[] | undefined = null;\n\n private inputRef: HTMLZInputElement;\n\n /** Media query list for detecting mobile view. */\n private mql?: MediaQueryList;\n\n /** Listener for changes in the mobile view media query. */\n private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n /** Emitted on search submit, return search string */\n @Event()\n searchSubmit: EventEmitter<string>;\n\n /** Emitted on search typing, return search string */\n @Event()\n searchTyping: EventEmitter<string>;\n\n /** Emitted on search result click, return item */\n @Event()\n searchItemClick: EventEmitter<SearchbarItem>;\n\n private emitSearchItemClick(item: SearchbarItem): void {\n this.searchItemClick.emit(item);\n this.selectedItem = item;\n this.searchString = \"\";\n }\n\n private emitSearchSubmit(): void {\n this.searchSubmit.emit(this.inputRef.value);\n }\n\n @Watch(\"resultsItems\")\n watchItems(): void {\n this.resultsItemsList = this.getResultsItemsList();\n }\n\n @Watch(\"resultsCount\")\n watchResultsCount(): void {\n this.currResultsCount = this.resultsCount;\n }\n\n @Watch(\"value\")\n watchValue(): void {\n this.searchString = this.value;\n }\n\n @Watch(\"searchString\")\n watchSearchString(): void {\n this.searchTyping.emit(this.searchString);\n if (!this.searchString) {\n this.currResultsCount = this.resultsCount;\n }\n }\n\n private getResultsItemsList(): SearchbarItem[] | undefined {\n return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n }\n\n private getGroupedItems(): SearchbarGroupedItem {\n const groupedItems = {};\n this.resultsItemsList.forEach((item: SearchbarItem) => {\n const key = `${item?.category}${item?.subcategory}`;\n groupedItems[key] = groupedItems[key] ?? {\n category: item?.category,\n subcategory: item?.subcategory,\n items: [],\n };\n groupedItems[key][\"items\"].push(item);\n });\n\n if (this.sortResultsItems) {\n return Object.keys(groupedItems)\n .sort()\n .reduce((obj, key) => {\n obj[key] = {\n ...groupedItems[key],\n items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n const nameA = a.label.toUpperCase();\n const nameB = b.label.toUpperCase();\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n\n return 0;\n }),\n };\n\n return obj;\n }, {});\n }\n\n return groupedItems;\n }\n\n private onListItemKeyDown(e: KeyboardEvent, item: SearchbarItem): void {\n if (e.key === KeyboardCode.ENTER) {\n e.preventDefault();\n this.emitSearchItemClick(item);\n\n return;\n }\n\n this.handleArrowsNavigation(e);\n }\n\n private onSearchHelperKeyDown(e: KeyboardEvent): void {\n if (e.key === KeyboardCode.ENTER) {\n e.preventDefault();\n this.emitSearchSubmit();\n\n return;\n }\n\n this.handleArrowsNavigation(e);\n }\n\n private handleArrowsNavigation(e: KeyboardEvent): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode)) {\n return;\n }\n\n const currentElement = e.target as HTMLElement;\n const items = Array.from(this.host.shadowRoot?.querySelectorAll(\"z-list .list-item\") ?? []);\n const currentIndex = items.indexOf(currentElement);\n\n if (e.key === KeyboardCode.ARROW_DOWN) {\n e.preventDefault();\n const nextIndex = currentIndex + 1;\n if (nextIndex < items.length) {\n (items[nextIndex] as HTMLElement).focus();\n }\n }\n\n if (e.key === KeyboardCode.ARROW_UP) {\n e.preventDefault();\n const prevIndex = currentIndex - 1;\n if (prevIndex < 0) {\n this.host.shadowRoot?.querySelector(\"input\")?.focus();\n this.host.shadowRoot\n ?.querySelector(\"input\")\n ?.setSelectionRange(this.inputRef.value.length, this.inputRef.value.length);\n }\n if (prevIndex >= 0) {\n (items[prevIndex] as HTMLElement).focus();\n }\n }\n }\n\n private handleStopTyping(e: CustomEvent): void {\n e.stopPropagation();\n this.searchString = e.detail.value;\n this.selectedItem = undefined;\n }\n\n private handleSubmit(): void {\n if (this.preventSubmit) {\n return;\n }\n\n this.emitSearchSubmit();\n }\n\n @Listen(\"click\", {target: \"document\"})\n private handleOutsideClick(e: MouseEvent): void {\n const cp = e.composedPath();\n if (cp.includes(this.host)) {\n return;\n }\n\n this.showResults = false;\n }\n\n componentWillLoad(): void {\n this.resultsItemsList = this.getResultsItemsList();\n\n this.mql = matchMedia(\"(max-width: 767px)\");\n this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n this.mql.addEventListener(\"change\", this.onMobileViewChange);\n this.isMobile = this.mql.matches;\n }\n\n disconnectedCallback(): void {\n this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n }\n\n private renderItemLabel(label: string): string {\n if (!this.searchString) {\n return label;\n }\n\n return label.replace(\n new RegExp(this.searchString.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n (found) => `<mark>${found}</mark>`\n );\n }\n\n private renderItem(item: SearchbarItem, index: number): HTMLZListElementElement {\n return (\n <z-list-element\n id={`list-item-${this.htmlid}-${index}`}\n role=\"presentation\"\n htmlTabindex={-1}\n onKeyDown={(e: KeyboardEvent) => this.onListItemKeyDown(e, item)}\n onClick={(e: MouseEvent) => {\n e.stopPropagation();\n this.emitSearchItemClick(item);\n }}\n >\n <div\n class=\"list-item ellipsis\"\n role=\"option\"\n tabindex={0}\n >\n {!!item?.icon && (\n <z-icon\n class=\"item-icon\"\n name={item.icon}\n />\n )}\n\n <div\n class=\"item-label body-3 mobile-body-4\"\n title={item.label}\n innerHTML={this.renderItemLabel(item.label)}\n />\n {!!item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n </div>\n {!!item.children?.length && (\n <z-list\n class=\"sub-list\"\n role=\"group\"\n aria-label={item.label || undefined}\n >\n {item.children.map((child, index) => this.renderItem(child, index))}\n </z-list>\n )}\n </z-list-element>\n );\n }\n\n /**\n * Renders the item grouped by category and subcategory. If `resultsCount` is set, it limits the number of rendered items.\n */\n private renderItemGroups(): HTMLZListGroupElement[] | undefined {\n if (!this.resultsItemsList?.length) {\n return;\n }\n\n const groupedItems = Object.values(this.getGroupedItems()) as SearchbarGroup[];\n const listGroups: HTMLZListGroupElement[] = [];\n const hasResultsLimit = !!this.currResultsCount;\n let renderedCount = 0;\n\n for (const groupItem of groupedItems) {\n const remaining = hasResultsLimit ? this.currResultsCount - renderedCount : groupItem.items.length;\n if (remaining <= 0) {\n break;\n }\n\n const visibleItems = groupItem.items.slice(0, remaining);\n const listGroupsElements: HTMLZListElement[] = visibleItems.map((item: SearchbarItem, subindex: number) =>\n this.renderItem(item, subindex)\n );\n renderedCount += listGroupsElements.length;\n\n if (!listGroupsElements.length) {\n continue;\n }\n\n const ariaLabel = [groupItem.category, groupItem.subcategory].filter(Boolean).join(\" \");\n\n listGroups.push(\n <z-list-group aria-label={ariaLabel || undefined}>\n {groupItem.category && (\n <z-list-element\n class=\"category-heading body-3 mobile-body-4\"\n slot=\"header-title\"\n role=\"presentation\"\n htmlTabindex={-1}\n >\n <div class=\"category\">{groupItem.category}</div>\n {groupItem.subcategory && <div class=\"subcategory\">{groupItem.subcategory}</div>}\n </z-list-element>\n )}\n\n {listGroupsElements}\n </z-list-group>\n );\n }\n\n return listGroups;\n }\n\n render(): HTMLZSearchbarElement {\n return (\n <Host\n onFocus={() => (this.showResults = true)}\n onClick={(e: MouseEvent) => this.handleOutsideClick(e)}\n class={{\"has-submit\": !!this.showSearchButton, \"has-results\": !!this.autocomplete}}\n >\n <div class=\"input-container\">\n <z-input\n ref={(el) => (this.inputRef = el)}\n htmlid={`input-${this.htmlid}`}\n message={false}\n placeholder={this.placeholder}\n onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n onKeyUp={(e: KeyboardEvent) => {\n handleEnterKeydSubmit(e, () => this.handleSubmit());\n this.handleArrowsNavigation(e);\n }}\n onFocus={() => (this.showResults = true)}\n value={this.searchString || this.selectedItem?.label}\n size={this.size}\n label={this.label}\n aria-label={this.htmlAriaLabel || this.placeholder || undefined}\n />\n\n {!!(\n this.showResults &&\n this.autocomplete &&\n this.searchString &&\n this.searchString.length >= this.autocompleteMinChars &&\n this.resultsItemsList\n ) && (\n <div class=\"results z-scrollbar\">\n {this.preventSubmit && !this.resultsItemsList?.length ? (\n <div class=\"item-no-results body-3 mobile-body-4\">\n Non abbiamo trovato risultati per <b>{this.searchString}</b>\n <br />\n <br />\n Cosa puoi fare?\n <ul>\n <li>Verificare di aver scritto bene</li>\n <li>Provare a cercare un'altra parola</li>\n <li>Provare a cercare qualcosa di più generico</li>\n </ul>\n </div>\n ) : (\n <z-list\n role=\"listbox\"\n id={`list-${this.htmlid}`}\n aria-label={this.htmlAriaLabel || this.label || undefined}\n >\n {this.autocomplete && !this.preventSubmit && !!this.searchString && (\n <z-list-element\n role=\"presentation\"\n htmlTabindex={-1}\n id={`list-item-${this.htmlid}-search`}\n onKeyDown={(e: KeyboardEvent) => this.onSearchHelperKeyDown(e)}\n onClick={() => this.emitSearchSubmit()}\n >\n <div\n class=\"list-item item-search\"\n role=\"option\"\n tabindex={0}\n >\n <z-icon\n class=\"search-icon\"\n name=\"left-magnifying-glass\"\n />\n <div\n class=\"item-label body-3 mobile-body-4\"\n innerHTML={this.searchHelperLabel?.replace(\n \"{searchString}\",\n `<mark>${this.searchString}</mark>`\n )}\n />\n </div>\n </z-list-element>\n )}\n\n {this.renderItemGroups()}\n\n {!!(\n this.searchString &&\n this.resultsItemsList?.length &&\n this.currResultsCount &&\n this.currResultsCount < this.resultsItemsList?.length\n ) && (\n <z-list-element\n role=\"presentation\"\n htmlTabindex={-1}\n id={`list-item-${this.htmlid}-show-all`}\n >\n <div\n role=\"option\"\n class=\"item-show-all body-3 mobile-body-4\"\n tabindex={0}\n onClick={() => (this.currResultsCount = undefined)}\n >\n Vedi tutti i risultati\n </div>\n </z-list-element>\n )}\n </z-list>\n )}\n </div>\n )}\n </div>\n\n {this.showSearchButton && (\n <z-button\n icon={this.searchButtonIconOnly ? \"search\" : undefined}\n aria-label={this.searchButtonIconOnly ? this.searchButtonLabel.trim() || \"CERCA\" : undefined}\n disabled={!!this.preventSubmit}\n variant={this.variant}\n size={this.size}\n onClick={() => this.handleSubmit()}\n >\n {this.searchButtonIconOnly ? \"\" : this.searchButtonLabel.trim() || \"CERCA\"}\n </z-button>\n )}\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-searchbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {\n ButtonVariant,\n ControlSize,\n KeyboardCode,\n SearchbarGroup,\n SearchbarGroupedItem,\n SearchbarItem,\n} from \"../../beans\";\nimport {handleEnterKeydSubmit, randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-searchbar\",\n styleUrls: [\n \"styles.css\",\n \"../css-components/z-label/styles.css\",\n \"../css-components/z-scrollbar/styles.css\",\n \"../../tokens/typography.css\",\n ],\n shadow: true,\n})\nexport class ZSearchbar implements ComponentInterface {\n @Element() host: HTMLZSearchbarElement;\n\n /** The id of the searchbar element */\n @Prop({reflect: true})\n htmlid = `searchbar-${randomId()}`;\n\n /** Prevent submit action */\n @Prop()\n preventSubmit?: boolean = false;\n\n /** The input label */\n @Prop()\n label?: string;\n\n /** The input aria-label */\n @Prop()\n htmlAriaLabel?: string;\n\n /** Input search string */\n @Prop()\n value?: string;\n\n /** Search input placeholder */\n @Prop()\n placeholder?: string;\n\n /** Show autocomplete results */\n @Prop()\n autocomplete?: boolean = false;\n\n /** Minimun number of characters to dispatch typing event */\n @Prop()\n autocompleteMinChars?: number = 3;\n\n /** Number of results shown. Default: all */\n @Prop()\n resultsCount?: number;\n\n /** Search helper text */\n @Prop()\n searchHelperLabel?: string = \"Cerca {searchString}\";\n\n /** Autocomplete results items */\n @Prop()\n resultsItems?: SearchbarItem[] | string;\n\n /** Sort autocomplete results items */\n @Prop()\n sortResultsItems?: boolean = false;\n\n /** Show submit button */\n @Prop()\n showSearchButton?: boolean = false;\n\n /** Hide the label of the submit button, showing only the icon */\n @Prop()\n searchButtonIconOnly?: boolean = false;\n\n /** The label of the submit button */\n @Prop()\n searchButtonLabel?: string = \"CERCA\";\n\n /** Size of the `z-input` and submit `z-button` */\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n /** Submit `z-button` variant */\n @Prop()\n variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n @State()\n searchString = this.value;\n\n @State()\n currResultsCount: number | undefined = this.resultsCount;\n\n @State()\n showResults = false;\n\n @State()\n isMobile = false;\n\n @State()\n selectedItem?: SearchbarItem;\n\n private resultsItemsList: SearchbarItem[] | undefined = null;\n\n private inputRef: HTMLZInputElement;\n\n /** Media query list for detecting mobile view. */\n private mql?: MediaQueryList;\n\n /** Listener for changes in the mobile view media query. */\n private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n /** Emitted on search submit, return search string */\n @Event()\n searchSubmit: EventEmitter<string>;\n\n /** Emitted on search typing, return search string */\n @Event()\n searchTyping: EventEmitter<string>;\n\n /** Emitted on search result click, return item */\n @Event()\n searchItemClick: EventEmitter<SearchbarItem>;\n\n private emitSearchItemClick(item: SearchbarItem): void {\n this.searchItemClick.emit(item);\n this.selectedItem = item;\n this.searchString = \"\";\n }\n\n private emitSearchSubmit(): void {\n this.searchSubmit.emit(this.inputRef.value);\n }\n\n @Watch(\"resultsItems\")\n watchItems(): void {\n this.resultsItemsList = this.getResultsItemsList();\n }\n\n @Watch(\"resultsCount\")\n watchResultsCount(): void {\n this.currResultsCount = this.resultsCount;\n }\n\n @Watch(\"value\")\n watchValue(): void {\n this.searchString = this.value;\n }\n\n @Watch(\"searchString\")\n watchSearchString(): void {\n this.searchTyping.emit(this.searchString);\n if (!this.searchString) {\n this.currResultsCount = this.resultsCount;\n }\n }\n\n private getResultsItemsList(): SearchbarItem[] | undefined {\n return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n }\n\n private getGroupedItems(): SearchbarGroupedItem {\n const groupedItems = {};\n this.resultsItemsList.forEach((item: SearchbarItem) => {\n const key = `${item?.category}${item?.subcategory}`;\n groupedItems[key] = groupedItems[key] ?? {\n category: item?.category,\n subcategory: item?.subcategory,\n items: [],\n };\n groupedItems[key][\"items\"].push(item);\n });\n\n if (this.sortResultsItems) {\n return Object.keys(groupedItems)\n .sort()\n .reduce((obj, key) => {\n obj[key] = {\n ...groupedItems[key],\n items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n const nameA = a.label.toUpperCase();\n const nameB = b.label.toUpperCase();\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n\n return 0;\n }),\n };\n\n return obj;\n }, {});\n }\n\n return groupedItems;\n }\n\n private onListItemKeyDown(e: KeyboardEvent, item: SearchbarItem): void {\n if (e.key === KeyboardCode.ENTER) {\n e.preventDefault();\n this.emitSearchItemClick(item);\n\n return;\n }\n\n this.handleArrowsNavigation(e);\n }\n\n private onSearchHelperKeyDown(e: KeyboardEvent): void {\n if (e.key === KeyboardCode.ENTER) {\n e.preventDefault();\n this.emitSearchSubmit();\n\n return;\n }\n\n this.handleArrowsNavigation(e);\n }\n\n private handleArrowsNavigation(e: KeyboardEvent): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode)) {\n return;\n }\n\n const currentElement = e.target as HTMLElement;\n const items = Array.from(this.host.shadowRoot?.querySelectorAll(\"z-list .list-item\") ?? []);\n const currentIndex = items.indexOf(currentElement);\n\n if (e.key === KeyboardCode.ARROW_DOWN) {\n e.preventDefault();\n const nextIndex = currentIndex + 1;\n if (nextIndex < items.length) {\n (items[nextIndex] as HTMLElement).focus();\n }\n }\n\n if (e.key === KeyboardCode.ARROW_UP) {\n e.preventDefault();\n const prevIndex = currentIndex - 1;\n if (prevIndex < 0) {\n this.host.shadowRoot?.querySelector(\"input\")?.focus();\n this.host.shadowRoot\n ?.querySelector(\"input\")\n ?.setSelectionRange(this.inputRef.value.length, this.inputRef.value.length);\n }\n if (prevIndex >= 0) {\n (items[prevIndex] as HTMLElement).focus();\n }\n }\n }\n\n private handleStopTyping(e: CustomEvent): void {\n e.stopPropagation();\n this.searchString = e.detail.value;\n this.selectedItem = undefined;\n }\n\n private handleSubmit(): void {\n if (this.preventSubmit) {\n return;\n }\n\n this.emitSearchSubmit();\n }\n\n @Listen(\"click\", {target: \"document\"})\n private handleOutsideClick(e: MouseEvent): void {\n const cp = e.composedPath();\n if (cp.includes(this.host)) {\n return;\n }\n\n this.showResults = false;\n }\n\n componentWillLoad(): void {\n this.resultsItemsList = this.getResultsItemsList();\n\n this.mql = matchMedia(\"(max-width: 767px)\");\n this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n this.mql.addEventListener(\"change\", this.onMobileViewChange);\n this.isMobile = this.mql.matches;\n }\n\n disconnectedCallback(): void {\n this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n }\n\n private renderItemLabel(label: string): string {\n if (!this.searchString) {\n return label;\n }\n\n return label.replace(\n new RegExp(this.searchString.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n (found) => `<mark>${found}</mark>`\n );\n }\n\n private renderItem(item: SearchbarItem, index: number): HTMLZListElementElement {\n return (\n <z-list-element\n id={`list-item-${this.htmlid}-${index}`}\n role=\"presentation\"\n htmlTabindex={-1}\n onKeyDown={(e: KeyboardEvent) => this.onListItemKeyDown(e, item)}\n onClick={(e: MouseEvent) => {\n e.stopPropagation();\n this.emitSearchItemClick(item);\n }}\n >\n <div\n class=\"list-item ellipsis\"\n role=\"option\"\n tabindex={0}\n >\n {!!item?.icon && (\n <z-icon\n class=\"item-icon\"\n name={item.icon}\n />\n )}\n\n <div\n class=\"item-label body-3 mobile-body-4\"\n title={item.label}\n innerHTML={this.renderItemLabel(item.label)}\n />\n {!!item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n </div>\n {!!item.children?.length && (\n <z-list\n class=\"sub-list\"\n role=\"group\"\n aria-label={item.label || undefined}\n >\n {item.children.map((child, index) => this.renderItem(child, index))}\n </z-list>\n )}\n </z-list-element>\n );\n }\n\n /**\n * Renders the item grouped by category and subcategory. If `resultsCount` is set, it limits the number of rendered items.\n */\n private renderItemGroups(): HTMLZListGroupElement[] | undefined {\n if (!this.resultsItemsList?.length) {\n return;\n }\n\n const groupedItems = Object.values(this.getGroupedItems()) as SearchbarGroup[];\n const listGroups: HTMLZListGroupElement[] = [];\n const hasResultsLimit = !!this.currResultsCount;\n let renderedCount = 0;\n\n for (const groupItem of groupedItems) {\n const remaining = hasResultsLimit ? this.currResultsCount - renderedCount : groupItem.items.length;\n if (remaining <= 0) {\n break;\n }\n\n const visibleItems = groupItem.items.slice(0, remaining);\n const listGroupsElements: HTMLZListElement[] = visibleItems.map((item: SearchbarItem, subindex: number) =>\n this.renderItem(item, subindex)\n );\n renderedCount += listGroupsElements.length;\n\n if (!listGroupsElements.length) {\n continue;\n }\n\n const ariaLabel = [groupItem.category, groupItem.subcategory].filter(Boolean).join(\" \");\n\n listGroups.push(\n <z-list-group aria-label={ariaLabel || undefined}>\n {groupItem.category && (\n <z-list-element\n class=\"category-heading body-3 mobile-body-4\"\n slot=\"header-title\"\n role=\"presentation\"\n htmlTabindex={-1}\n >\n <div class=\"category\">{groupItem.category}</div>\n {groupItem.subcategory && <div class=\"subcategory\">{groupItem.subcategory}</div>}\n </z-list-element>\n )}\n\n {listGroupsElements}\n </z-list-group>\n );\n }\n\n return listGroups;\n }\n\n render(): HTMLZSearchbarElement {\n return (\n <Host\n onFocus={() => (this.showResults = true)}\n onClick={(e: MouseEvent) => this.handleOutsideClick(e)}\n class={{\"has-submit\": !!this.showSearchButton, \"has-results\": !!this.autocomplete}}\n >\n <div class=\"input-container\">\n <z-input\n ref={(el) => (this.inputRef = el)}\n htmlid={`input-${this.htmlid}`}\n message={false}\n placeholder={this.placeholder}\n onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n onKeyUp={(e: KeyboardEvent) => {\n handleEnterKeydSubmit(e, () => this.handleSubmit());\n this.handleArrowsNavigation(e);\n }}\n onFocus={() => (this.showResults = true)}\n value={this.searchString || this.selectedItem?.label}\n size={this.size}\n label={this.label}\n htmlAriaLabel={this.htmlAriaLabel || this.placeholder || undefined}\n />\n\n {!!(\n this.showResults &&\n this.autocomplete &&\n this.searchString &&\n this.searchString.length >= this.autocompleteMinChars &&\n this.resultsItemsList\n ) && (\n <div class=\"results z-scrollbar\">\n {this.preventSubmit && !this.resultsItemsList?.length ? (\n <div class=\"item-no-results body-3 mobile-body-4\">\n Non abbiamo trovato risultati per <b>{this.searchString}</b>\n <br />\n <br />\n Cosa puoi fare?\n <ul>\n <li>Verificare di aver scritto bene</li>\n <li>Provare a cercare un'altra parola</li>\n <li>Provare a cercare qualcosa di più generico</li>\n </ul>\n </div>\n ) : (\n <z-list\n role=\"listbox\"\n id={`list-${this.htmlid}`}\n aria-label={this.htmlAriaLabel || this.label || undefined}\n >\n {this.autocomplete && !this.preventSubmit && !!this.searchString && (\n <z-list-element\n role=\"presentation\"\n htmlTabindex={-1}\n id={`list-item-${this.htmlid}-search`}\n onKeyDown={(e: KeyboardEvent) => this.onSearchHelperKeyDown(e)}\n onClick={() => this.emitSearchSubmit()}\n >\n <div\n class=\"list-item item-search\"\n role=\"option\"\n tabindex={0}\n >\n <z-icon\n class=\"search-icon\"\n name=\"left-magnifying-glass\"\n />\n <div\n class=\"item-label body-3 mobile-body-4\"\n innerHTML={this.searchHelperLabel?.replace(\n \"{searchString}\",\n `<mark>${this.searchString}</mark>`\n )}\n />\n </div>\n </z-list-element>\n )}\n\n {this.renderItemGroups()}\n\n {!!(\n this.searchString &&\n this.resultsItemsList?.length &&\n this.currResultsCount &&\n this.currResultsCount < this.resultsItemsList?.length\n ) && (\n <z-list-element\n role=\"presentation\"\n htmlTabindex={-1}\n id={`list-item-${this.htmlid}-show-all`}\n >\n <div\n role=\"option\"\n class=\"item-show-all body-3 mobile-body-4\"\n tabindex={0}\n onClick={() => (this.currResultsCount = undefined)}\n >\n Vedi tutti i risultati\n </div>\n </z-list-element>\n )}\n </z-list>\n )}\n </div>\n )}\n </div>\n\n {this.showSearchButton && (\n <z-button\n icon={this.searchButtonIconOnly ? \"search\" : undefined}\n aria-label={this.searchButtonIconOnly ? this.searchButtonLabel.trim() || \"CERCA\" : undefined}\n disabled={!!this.preventSubmit}\n variant={this.variant}\n size={this.size}\n onClick={() => this.handleSubmit()}\n >\n {this.searchButtonIconOnly ? \"\" : this.searchButtonLabel.trim() || \"CERCA\"}\n </z-button>\n )}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -10,7 +10,7 @@ export class ZStepperItem {
|
|
|
10
10
|
return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex), ariaPressed), ariaDisabled);
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '42329c166903a0ce77e82d222371804f3e7279b1', role: "listitem" }, h("button", Object.assign({ key: 'ed6351193460e7a873cd9867bbd2ded798bbad8f', class: "stepper-item", disabled: this.disabled }, this.getAttributes(), { "aria-label": this.htmlAriaLabel }), h("div", { key: 'fc09e304cff2a9651859002047bd825f32c08e88', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: '
|
|
13
|
+
return (h(Host, { key: '42329c166903a0ce77e82d222371804f3e7279b1', role: "listitem" }, h("button", Object.assign({ key: 'ed6351193460e7a873cd9867bbd2ded798bbad8f', class: "stepper-item", disabled: this.disabled }, this.getAttributes(), { "aria-label": this.htmlAriaLabel }), h("div", { key: 'fc09e304cff2a9651859002047bd825f32c08e88', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : h("span", { class: "indicator-number" }, this.index)), h("span", { key: '2535476a7879ce7dd090c4c3c11c8c8acff91b85' }, h("slot", { key: '682000b3779da6edaa09dc1af5861c6161831eac' })))));
|
|
14
14
|
}
|
|
15
15
|
static get is() { return "z-stepper-item"; }
|
|
16
16
|
static get encapsulation() { return "shadow"; }
|