@oiz/stzh-components 2.14.0 → 2.14.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{app-globals-1fca38db.js → app-globals-856f268a.js} +2 -2
- package/dist/cjs/{app-globals-1fca38db.js.map → app-globals-856f268a.js.map} +1 -1
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stzh-actionset_4.cjs.entry.js +15 -27
- package/dist/cjs/stzh-actionset_4.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-appnav.cjs.entry.js +1 -1
- package/dist/cjs/stzh-appnav.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-components.cjs.js +1 -1
- package/dist/cjs/stzh-header.cjs.entry.js +6 -6
- package/dist/cjs/stzh-header.cjs.entry.js.map +1 -1
- package/dist/collection/components/stzh-actionset/stzh-actionset.js +3 -9
- package/dist/collection/components/stzh-actionset/stzh-actionset.js.map +1 -1
- package/dist/collection/components/stzh-appnav/stzh-appnav.css +0 -3
- package/dist/collection/components/stzh-card/stzh-card.css +0 -37
- package/dist/collection/components/stzh-card/stzh-card.js +11 -17
- package/dist/collection/components/stzh-card/stzh-card.js.map +1 -1
- package/dist/collection/components/stzh-card/stzh-card.stories.js +1 -2
- package/dist/collection/components/stzh-card-list/stzh-card-list.stories.js +0 -2
- package/dist/collection/components/stzh-header/stzh-header.js +6 -6
- package/dist/collection/components/stzh-header/stzh-header.js.map +1 -1
- package/dist/collection/index.js.map +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/index2.js.map +1 -1
- package/dist/components/stzh-actionset2.js +3 -9
- package/dist/components/stzh-actionset2.js.map +1 -1
- package/dist/components/stzh-appnav.js +1 -1
- package/dist/components/stzh-appnav.js.map +1 -1
- package/dist/components/stzh-card2.js +12 -18
- package/dist/components/stzh-card2.js.map +1 -1
- package/dist/components/stzh-header.js +6 -6
- package/dist/components/stzh-header.js.map +1 -1
- package/dist/esm/{app-globals-327436ba.js → app-globals-8a09d78c.js} +2 -2
- package/dist/esm/{app-globals-327436ba.js.map → app-globals-8a09d78c.js.map} +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stzh-actionset_4.entry.js +15 -27
- package/dist/esm/stzh-actionset_4.entry.js.map +1 -1
- package/dist/esm/stzh-appnav.entry.js +1 -1
- package/dist/esm/stzh-appnav.entry.js.map +1 -1
- package/dist/esm/stzh-components.js +1 -1
- package/dist/esm/stzh-header.entry.js +6 -6
- package/dist/esm/stzh-header.entry.js.map +1 -1
- package/dist/esm-es5/{app-globals-327436ba.js → app-globals-8a09d78c.js} +2 -2
- package/dist/esm-es5/index.js.map +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/stzh-actionset_4.entry.js +2 -2
- package/dist/esm-es5/stzh-actionset_4.entry.js.map +1 -1
- package/dist/esm-es5/stzh-appnav.entry.js +1 -1
- package/dist/esm-es5/stzh-appnav.entry.js.map +1 -1
- package/dist/esm-es5/stzh-components.js +1 -1
- package/dist/esm-es5/stzh-header.entry.js +1 -1
- package/dist/esm-es5/stzh-header.entry.js.map +1 -1
- package/dist/stzh-components/index.esm.js.map +1 -1
- package/dist/stzh-components/p-0bb08043.system.js.map +1 -1
- package/dist/stzh-components/{p-b1dbd448.system.entry.js → p-1caa099b.system.entry.js} +2 -2
- package/dist/stzh-components/p-1caa099b.system.entry.js.map +1 -0
- package/dist/stzh-components/{p-90df75de.system.entry.js → p-5733dcff.system.entry.js} +2 -2
- package/dist/stzh-components/p-5733dcff.system.entry.js.map +1 -0
- package/dist/stzh-components/{p-fb869e60.system.js → p-6af6b8ac.system.js} +2 -2
- package/dist/stzh-components/{p-a9ce16ca.system.js → p-6c7cc671.system.js} +2 -2
- package/dist/stzh-components/{p-61cc4013.entry.js → p-6e3396de.entry.js} +2 -2
- package/dist/stzh-components/p-6e3396de.entry.js.map +1 -0
- package/dist/stzh-components/{p-4926cc0e.entry.js → p-964e87a2.entry.js} +3 -3
- package/dist/stzh-components/p-964e87a2.entry.js.map +1 -0
- package/dist/stzh-components/{p-6a2947fe.system.entry.js → p-a14e154a.system.entry.js} +3 -3
- package/dist/stzh-components/p-a14e154a.system.entry.js.map +1 -0
- package/dist/stzh-components/{p-ce92b185.js → p-bd52acfe.js} +2 -2
- package/dist/stzh-components/{p-c53ea563.entry.js → p-de184696.entry.js} +2 -2
- package/dist/stzh-components/p-de184696.entry.js.map +1 -0
- package/dist/stzh-components/stzh-components.esm.js +1 -1
- package/dist/stzh-components/stzh-components.js +1 -1
- package/dist/types/components/stzh-header/stzh-header.d.ts +2 -2
- package/dist/types/index.d.ts +0 -1
- package/package.json +1 -1
- package/dist/stzh-components/p-4926cc0e.entry.js.map +0 -1
- package/dist/stzh-components/p-61cc4013.entry.js.map +0 -1
- package/dist/stzh-components/p-6a2947fe.system.entry.js.map +0 -1
- package/dist/stzh-components/p-90df75de.system.entry.js.map +0 -1
- package/dist/stzh-components/p-b1dbd448.system.entry.js.map +0 -1
- package/dist/stzh-components/p-c53ea563.entry.js.map +0 -1
- /package/dist/esm-es5/{app-globals-327436ba.js.map → app-globals-8a09d78c.js.map} +0 -0
- /package/dist/stzh-components/{p-fb869e60.system.js.map → p-6af6b8ac.system.js.map} +0 -0
- /package/dist/stzh-components/{p-a9ce16ca.system.js.map → p-6c7cc671.system.js.map} +0 -0
- /package/dist/stzh-components/{p-ce92b185.js.map → p-bd52acfe.js.map} +0 -0
|
@@ -6,7 +6,7 @@ const index = require('./index-45029280.js');
|
|
|
6
6
|
const utils = require('./utils-01c0bbdd.js');
|
|
7
7
|
require('./string-utils-5dd70320.js');
|
|
8
8
|
|
|
9
|
-
const stzhAppnavCss = ".sc-stzh-appnav-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-appnav-h{display:none}.sc-stzh-appnav-h *.sc-stzh-appnav,.sc-stzh-appnav-h *.sc-stzh-appnav::before,.sc-stzh-appnav-h *.sc-stzh-appnav::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-appnav-h .has-focus.sc-stzh-appnav{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-appnav-h .stzh-fylingfocus-focused.sc-stzh-appnav{outline-style:none !important}.sc-stzh-appnav-h .stzh-fylingfocus-focused.sc-stzh-appnav::-moz-focus-inner{border:0 !important}.sc-stzh-appnav-h{width:100%}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link{--text-decoration-line:none;--hover-text-decoration-line:underline;letter-spacing:0.01em}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link--is-active{text-decoration:underline}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__inner{-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__inner{-ms-flex-direction:row;flex-direction:row}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:0}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:var(--stzh-space-xsmall)}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:0}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:var(--stzh-space-small)}}@media screen and (max-width: 599px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__icon-wrapper{height:auto}}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>*:not(:last-child){margin-right:var(--stzh-space-xlarge)}}.stzh-appnav.sc-stzh-appnav{display:-ms-flexbox;display:flex;background-color:var(--stzh-color-white);height:4rem;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:center}@media screen and (min-width: 600px){.stzh-appnav.sc-stzh-appnav{height:3rem;text-align:left}}.stzh-appnav__items.sc-stzh-appnav{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 600px){.stzh-appnav__items.sc-stzh-appnav{-ms-flex-positive:0;flex-grow:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}}.stzh-appnav__title.sc-stzh-appnav{font-family:var(--stzh-font-family-light);font-weight:var(--stzh-font-weight-light);font-style:var(--stzh-font-style-light);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-base-color);-webkit-text-decoration-line:none;text-decoration-line:none;white-space:nowrap;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);display:none}@media screen and (min-width: 800px){.stzh-appnav__title.sc-stzh-appnav{display:-ms-flexbox;display:flex}}.stzh-appnav__title.sc-stzh-appnav:hover{
|
|
9
|
+
const stzhAppnavCss = ".sc-stzh-appnav-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-appnav-h{display:none}.sc-stzh-appnav-h *.sc-stzh-appnav,.sc-stzh-appnav-h *.sc-stzh-appnav::before,.sc-stzh-appnav-h *.sc-stzh-appnav::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-appnav-h .has-focus.sc-stzh-appnav{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-appnav-h .stzh-fylingfocus-focused.sc-stzh-appnav{outline-style:none !important}.sc-stzh-appnav-h .stzh-fylingfocus-focused.sc-stzh-appnav::-moz-focus-inner{border:0 !important}.sc-stzh-appnav-h{width:100%}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link{--text-decoration-line:none;--hover-text-decoration-line:underline;letter-spacing:0.01em}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link--is-active{text-decoration:underline}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__inner{-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__inner{-ms-flex-direction:row;flex-direction:row}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:0}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:var(--stzh-space-xsmall)}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:0}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:var(--stzh-space-small)}}@media screen and (max-width: 599px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__icon-wrapper{height:auto}}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>*:not(:last-child){margin-right:var(--stzh-space-xlarge)}}.stzh-appnav.sc-stzh-appnav{display:-ms-flexbox;display:flex;background-color:var(--stzh-color-white);height:4rem;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:center}@media screen and (min-width: 600px){.stzh-appnav.sc-stzh-appnav{height:3rem;text-align:left}}.stzh-appnav__items.sc-stzh-appnav{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 600px){.stzh-appnav__items.sc-stzh-appnav{-ms-flex-positive:0;flex-grow:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}}.stzh-appnav__title.sc-stzh-appnav{font-family:var(--stzh-font-family-light);font-weight:var(--stzh-font-weight-light);font-style:var(--stzh-font-style-light);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-base-color);-webkit-text-decoration-line:none;text-decoration-line:none;white-space:nowrap;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);display:none}@media screen and (min-width: 800px){.stzh-appnav__title.sc-stzh-appnav{display:-ms-flexbox;display:flex}}.stzh-appnav__title.sc-stzh-appnav:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));text-decoration:underline}.stzh-appnav__title.sc-stzh-appnav:hover .stzh-appnav__status.sc-stzh-appnav{border-color:rgba(7, 2, 80, 0.4);color:var(--stzh-color-white);background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-appnav__status.sc-stzh-appnav{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:0.875rem;min-width:0.625rem;font-size:0.625rem;line-height:1.4;border-radius:0.875rem;padding:0.0625rem 0.375rem;border:0.0625rem solid rgba(115, 115, 115, 0.25);color:inherit;-webkit-transform:translateY(calc(var(--stzh-space-xsmall) * -1));transform:translateY(calc(var(--stzh-space-xsmall) * -1));margin-left:var(--stzh-space-xxsmall);-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed);text-decoration:none}";
|
|
10
10
|
|
|
11
11
|
const StzhAppnav = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"stzh-appnav.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,
|
|
1
|
+
{"file":"stzh-appnav.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,oyKAAoyK;;MCmB7yK,UAAU;;;IAwBb,SAAI,GAAG;MACb,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;MAEzD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;QACjBA,oBAAc,CAAC,IAAI,EAAE;UACnB,IAAI,EAAE,OAAO;UACb,OAAO,EAAE,WAAW;SACE,CAAC,CAAA;QAEzB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;OACvC,CAAC,CAAC;KACJ,CAAA;;oBA9B0B,EAAE;qBAGD,EAAE;mBAGJ,EAAE;;;EA0B5B,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;KACjG;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,YAAY,CAAC,KAAK,IAC5EA,iBAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,MAAM,IACzCA,qBAAa,CACT,EACL,IAAI,CAAC,QAAQ;MACZA,eACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAE,IAAI,CAAC,OAAO,iBACL,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,IAEhD,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,SAAS;QACbA,kBAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,SAAS,CAAQ,CAEzD,CAEF,CACD,EACP;GACH;;;;;;;","names":["setPropsIfNull","h","Host"],"sources":["src/components/stzh-appnav/stzh-appnav.scss?tag=stzh-appnav&encapsulation=scoped","src/components/stzh-appnav/stzh-appnav.tsx"],"sourcesContent":[":host {\n width: 100%;\n\n ::slotted(stzh-link) {\n --text-decoration-line: none;\n --hover-text-decoration-line: underline;\n letter-spacing: 0.01em;\n\n .stzh-link--is-active {\n text-decoration: underline;\n }\n\n .stzh-link__inner {\n flex-direction: column;\n\n @include mq($from: small) {\n flex-direction: row;\n }\n }\n\n .stzh-link__text {\n @include fontSize('nano');\n\n @include mq($from: small) {\n @include fontSize('micro');\n }\n }\n\n .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper + .stzh-link__text:not(:empty) {\n margin-left: 0;\n\n @include mq($from: small) {\n margin-left: space('xsmall');\n }\n }\n\n .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper + .stzh-link__text:not(:empty) {\n margin-left: 0;\n\n @include mq($from: small) {\n margin-left: space('small');\n }\n }\n\n .stzh-link__icon-wrapper {\n @include mq($to: small) {\n height: auto;\n }\n }\n }\n\n ::slotted(*:not(:last-child)) {\n @include mq($from: small) {\n margin-right: space('xlarge');\n }\n }\n}\n\n.stzh-appnav {\n display: flex;\n background-color: $colorWhite;\n height: $appnavHeight;\n justify-content: space-between;\n align-items: center;\n text-align: center;\n\n @include mq($from: small) {\n height: $appnavHeightSmall;\n text-align: left;\n }\n\n &__items {\n display: flex;\n justify-content: space-around;\n flex-grow: 1;\n\n @include mq($from: small) {\n flex-grow: 0;\n align-items: center;\n justify-content: flex-start;\n }\n }\n\n &__title {\n @include font('light');\n @include fontSize('milli');\n color: $baseColor;\n text-decoration-line: none;\n white-space: nowrap;\n transition: color $baseTransitionAnimationSpeed;\n margin-left: space('small');\n display: none;\n\n @include mq($from: smallheader) {\n display: flex;\n }\n\n &:hover {\n color: $colorPrimaryHover;\n text-decoration: underline;\n }\n }\n\n &__title:hover &__status {\n border-color: rgba(7, 2, 80, 0.4);\n color: $colorWhite;\n background-color: $colorPrimaryHover;\n }\n\n &__status {\n @include status;\n transform: translateY(calc(#{space('xsmall')} * -1));\n margin-left: space('xxsmall');\n transition: border-color $baseTransitionAnimationSpeed;\n text-decoration: none;\n }\n}\n","import {\n Component,\n Host,\n Prop,\n h,\n Element\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { StzhAppnavLocalizedText } from \"./stzh-appnav.localization\";\n\n/**\n * @slot - Slot for `stzh-link` elements\n */\n@Component({\n tag: \"stzh-appnav\",\n styleUrl: \"stzh-appnav.scss\",\n scoped: true\n})\nexport class StzhAppnav {\n /** Translation strings */\n @Prop() localization: StzhAppnavLocalizedText;\n\n /** App title shown on tablet/desktop */\n @Prop() appTitle: string = \"\";\n\n /** Status displayed next to app title (only displayed if `app-title` is defined) */\n @Prop() appStatus: string = \"\";\n\n /** Link of app title (only used if `app-title` is defined) */\n @Prop() appHref: string = \"\";\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the app title link element.\n * Default value will be taken from `appTitle` prop or default slot.\n */\n @Prop() appAnalyticsId: string;\n\n @Element() element: HTMLStzhAppnavElement;\n\n private observer: MutationObserver;\n\n private init = () => {\n const links = this.element.querySelectorAll(\"stzh-link\");\n\n links.forEach((link) => {\n setPropsIfNull(link, {\n size: \"small\",\n variant: \"secondary\"\n } as HTMLStzhLinkElement)\n\n link.setAttribute(\"role\", \"listitem\");\n });\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n }\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <nav class=\"stzh-appnav\" role=\"navigation\" aria-label={this.localization.title}>\n <div class=\"stzh-appnav__items\" role=\"list\">\n <slot></slot>\n </div>\n {this.appTitle &&\n <a\n class=\"stzh-appnav__title\"\n href={this.appHref}\n s-object-id={this.appAnalyticsId || this.appTitle}\n >\n {this.appTitle}\n {this.appStatus &&\n <span class=\"stzh-appnav__status\">{this.appStatus}</span>\n }\n </a>\n }\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-45029280.js');
|
|
6
|
-
const appGlobals = require('./app-globals-
|
|
6
|
+
const appGlobals = require('./app-globals-856f268a.js');
|
|
7
7
|
|
|
8
8
|
/*
|
|
9
9
|
Stencil Client Patch Browser v4.3.0 | MIT Licensed | https://stenciljs.com
|
|
@@ -95,9 +95,9 @@ const StzhHeader = class {
|
|
|
95
95
|
return;
|
|
96
96
|
}
|
|
97
97
|
index.readTask(() => {
|
|
98
|
-
this.
|
|
99
|
-
this.scrollingUp = this.
|
|
100
|
-
this.
|
|
98
|
+
this.currentScrollY = window.scrollY;
|
|
99
|
+
this.scrollingUp = this.lastScrollY && this.lastScrollY > this.currentScrollY;
|
|
100
|
+
this.lastScrollY = this.currentScrollY;
|
|
101
101
|
this.innerHeight = this.innerElement ? this.innerElement.offsetHeight : 0;
|
|
102
102
|
this.mainHeight = this.mainElement ? this.mainElement.offsetHeight : 0;
|
|
103
103
|
this.logobarHeight = this.sticky
|
|
@@ -107,9 +107,9 @@ const StzhHeader = class {
|
|
|
107
107
|
: this.logobarElement
|
|
108
108
|
? this.logobarElement.offsetHeight
|
|
109
109
|
: 0;
|
|
110
|
-
this.belowStayStickyPoint = this.
|
|
111
|
-
this.belowStartStickyPoint = this.
|
|
112
|
-
this.headerOverlap = (this.headerTop - this.
|
|
110
|
+
this.belowStayStickyPoint = this.currentScrollY > this.logobarHeight;
|
|
111
|
+
this.belowStartStickyPoint = this.currentScrollY > this.headerHeight;
|
|
112
|
+
this.headerOverlap = (this.headerTop - this.currentScrollY) / -1;
|
|
113
113
|
this.hideLogo = this.isSmallheader && this.headerOverlap > 10;
|
|
114
114
|
});
|
|
115
115
|
index.writeTask(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"stzh-header.entry.cjs.js","mappings":"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","names":["readTask","media","writeTask","hasSlot","h","Host"],"sources":["src/components/stzh-header/stzh-header.scss?tag=stzh-header&encapsulation=scoped","src/components/stzh-header/stzh-header.tsx"],"sourcesContent":["/**\n * @prop --stzh-header-height: **Global**: Height of header (readonly variable)\n * @prop --stzh-header-appnav-height: **Global**: Height of appnav header if exists (readonly variable)\n * @prop --stzh-header-metabar-height: **Global**: Height of metabar header (readonly variable)\n * @prop --stzh-header-sticky-appnav-height: **Global**: Height of appnav header if he is sticky (readonly variable)\n */\n\n@keyframes stzh-header-open {\n\tfrom {\n\t\ttransform: translateY(-100%);\n\t}\n\n\tto {\n\t\ttransform: translateY(0%);\n\t}\n}\n\n@keyframes stzh-header-close {\n\tfrom {\n\t\ttransform: translateY(0%);\n\t}\n\n\tto {\n\t\ttransform: translateY(-100%);\n\t}\n}\n\n:host {\n @media print {\n display: none;\n }\n\n ::slotted([slot=\"logo\"]) {\n width: auto;\n height: 100%;\n }\n\n ::slotted(stzh-logo[slot=\"logo\"]) {\n --width: auto;\n --height: 100%;\n }\n\n ::slotted(stzh-logo[slot=\"logo\"]:not([type=\"stzh\"]):not([type=\"none\"])) {\n --width: auto;\n --height: 31px;\n\n @include mq($from: medium) {\n --height: 35px;\n }\n\n @include mq($from: ultra) {\n --height: 53px;\n }\n }\n\n ::slotted(stzh-popover[slot=\"login\"]) {\n display: flex;\n flex-grow: 1;\n\n .stzh-popover,\n .stzh-popover__trigger {\n display: flex;\n flex-grow: 1;\n }\n\n .stzh-popover .stzh-popover__trigger stzh-button .stzh-button {\n @include fontSize('micro');\n height: auto;\n\n @include mq($to: smallheader) {\n border-radius: 0;\n height: 100%;\n }\n\n &__badge {\n @include mq($to: smallheader) {\n top: 8px;\n right: 7px;\n }\n }\n }\n }\n}\n\n.header {\n &__inner {\n transition: box-shadow $baseTransitionAnimationSpeed;\n }\n\n &__main {\n position: relative;\n z-index: $zIndexHeader;\n display: flex;\n flex-direction: column;\n position: relative;\n box-shadow: $boxShadowHeader;\n background-color: $colorWhite;\n transition: box-shadow $baseTransitionAnimationSpeed;\n\n @include mq($from: smallheader) {\n box-shadow: none;\n flex-direction: column-reverse;\n border-bottom: 1px solid $baseBorderColor;\n padding-top: $headerMetabarHeightRegularUp;\n\n @supports (position: sticky) {\n padding-top: 0;\n }\n }\n }\n\n &__metabar {\n border-top: 1px solid $baseBorderColor;\n\n @include mq($from: smallheader) {\n border-top: none;\n background-color: $colorGrey5;\n z-index: 1;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n\n @supports (position: sticky) {\n position: sticky;\n }\n }\n }\n\n &__metabar-inner {\n @include container;\n display: flex;\n align-items: stretch;\n height: $headerMetabarHeight;\n\n\t\t@include mq($to: smallheader) {\n // overwrite container margin for smallheader\n // to be able to use fullwidth of metabar\n margin: 0 auto;\n }\n\n\t\t@include mq($from: smallheader) {\n justify-content: flex-end;\n align-items: center;\n height: $headerMetabarHeightRegularUp;\n }\n }\n\n &__metabar-nav,\n &__metabar-langnav {\n display: none;\n\n @include mq($from: smallheader) {\n display: inline-flex;\n }\n }\n\n &__metabar-login {\n display: flex;\n flex-basis: 50%;\n\n &:not(:empty) {\n \t\t@include mq($from: smallheader) {\n flex-basis: auto;\n margin-left: space('small');\n }\n }\n }\n\n &__metabar-langnav {\n &:not(:empty) {\n @include mq($from: smallheader) {\n margin-left: space('medium');\n }\n }\n }\n\n &__logobar {\n display: flex;\n background-color: $colorPrimary;\n }\n\n &__logobar-logo {\n box-sizing: content-box;\n display: flex;\n background-color: $colorWhite;\n overflow: hidden;\n width: calc(100% - #{$headerMetabarHeight} - 1px);\n\n\t\t@include mq($from: smallheader) {\n width: 400px;\n }\n\n\t\t@include mq($from: large) {\n\t\t width: 460px;\n\t\t}\n\n\t\t@include mq($from: ultra) {\n \t\tpadding-left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n\t\t}\n }\n\n &__logo-link {\n flex-grow: 1;\n display: inline-flex;\n\t\theight: 76px;\n padding: space('medium');\n padding-left: $containerMargin;\n transition: opacity $baseTransitionAnimationSpeed;\n\n\t\t@include mq($from: small) {\n\t\t\tpadding-left: $containerMarginSmall;\n\t\t}\n\n\t\t@include mq($from: smallheader) {\n\t\t\theight: 90px;\n\t\t}\n\n\t\t@include mq($from: large) {\n\t\t\theight: 120px;\n padding: space('large');\n\t\t\tpadding-left: $containerMarginLarge;\n }\n\n\t\t@include mq($from: ultra) {\n padding-left: 0;\n }\n }\n\n &__appnav {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: calc(#{$zIndexHeader} - 1);\n box-shadow: $boxShadowHeader;\n background-color: $colorWhite;\n\n @include mq($from: small) {\n position: static;\n box-shadow: none;\n }\n }\n\n &__appnav-inner {\n @include mq($from: small) {\n @include container;\n }\n }\n\n /* Hide logo */\n\n &--hide-logo &__logo-link {\n opacity: 0;\n }\n\n /* Has empty metabar */\n\n &--has-empty-metabar-mobile &__metabar {\n @include mq($to: smallheader) {\n display: none;\n }\n }\n\n /* Has empty metabar */\n\n &--has-empty-metabar &__metabar {\n display: none;\n }\n\n /* Metabar Stay */\n\n &--has-metabar-stay &__metabar-langnav {\n @include mq($to: smallheader) {\n display: inline-flex;\n }\n }\n\n &--has-metabar-stay &__metabar-nav {\n @include mq($to: smallheader) {\n display: inline-flex;\n }\n }\n\n &--has-metabar-stay &__main {\n @include mq($to: smallheader) {\n box-shadow: none;\n flex-direction: column-reverse;\n border-bottom: 1px solid $baseBorderColor;\n }\n }\n\n &--has-metabar-stay &__metabar {\n @include mq($to: smallheader) {\n display: block;\n border-top: none;\n background-color: $colorGrey5;\n }\n }\n\n &--has-metabar-stay &__metabar-inner {\n @include mq($to: smallheader) {\n @include container;\n justify-content: flex-end;\n align-items: center;\n }\n }\n\n /* Sticky metabar */\n\n &--sticky-metabar:not(#{&}--sticky):not(#{&}--is-sticky-disabled) &__metabar {\n @include mq($from: smallheader) {\n position: fixed;\n }\n }\n\n /* Sticky variant */\n\n &--sticky &__inner {\n\t\t@include mq($from: small) {\n animation: stzh-header-open $baseTransitionAnimationSpeed;\n z-index: $zIndexHeader;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n margin: 0;\n box-shadow: $boxShadowHeader;\n }\n }\n\n &--sticky &__main {\n\t\t@include mq($to: small) {\n animation: stzh-header-open $baseTransitionAnimationSpeed;\n z-index: $zIndexHeader;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n margin: 0;\n }\n\n\t\t@include mq($from: small) {\n box-shadow: none;\n }\n }\n\n &--sticky &__appnav {\n\t\t@include mq($to: smallheader) {\n border-top: 1px solid $baseBorderColor;\n }\n }\n\n &--sticky &__metabar {\n border-top: none;\n }\n\n &--sticky#{&}--has-empty-metabar &__metabar {\n display: none;\n }\n\n &--sticky#{&}--has-empty-metabar:not(#{&}--has-appnav) &__main {\n\t\t@include mq($from: small) {\n border-bottom: none;\n }\n }\n\n &--sticky &__logobar {\n display: none;\n }\n\n &--sticky#{&}--has-metabar-stay &__main {\n\t\t@include mq($to: small) {\n box-shadow: $boxShadowHeader;\n }\n }\n\n /* Sticky closing */\n\n &--sticky-closing &__inner {\n\t\t@include mq($from: small) {\n animation: stzh-header-close $baseTransitionAnimationSpeed;\n }\n }\n\n &--sticky-closing &__main {\n\t\t@include mq($to: small) {\n animation: stzh-header-close $baseTransitionAnimationSpeed;\n }\n }\n\n /* Sticky disabled */\n\n &--is-sticky-disabled &__main {\n @include mq($from: smallheader) {\n @supports (position: sticky) {\n padding-top: $headerMetabarHeightRegularUp;\n }\n }\n }\n\n &--is-sticky-disabled &__metabar {\n @include mq($from: smallheader) {\n @supports (position: sticky) {\n position: absolute;\n }\n }\n }\n}\n","import {\n Component,\n Element,\n Listen,\n Host,\n State,\n h,\n writeTask,\n readTask,\n Method,\n Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot logo - Slot for brand logo\n * @slot nav - Slot for `stzh-metanav` element\n * @slot login - Slot for login button\n * @slot appnav - Slot for `stzh-appnav` element\n * @slot langnav - Slot for `stzh-langnav` element\n */\n@Component({\n tag: \"stzh-header\",\n styleUrl: \"stzh-header.scss\",\n scoped: true\n})\nexport class StzhHeader {\n /** Portal link (for logo) */\n @Prop() href: string = \"https://www.stadt-zuerich.ch\";\n\n /** Whether grey metabar should stay (on top) on mobile */\n @Prop() metabarStay: boolean = false;\n\n /** Whether sticky behaviour should be disabled */\n @Prop() stickyDisabled: boolean = false;\n\n /**\n * Prevent creating a appnav placeholder element\n * with the size of appnav inside header parent element.\n * This prevents the fixed appnav to overlap\n * content at the end on mikro breakpoint,\n * but could lead to problems with certain layouts.\n */\n @Prop() preventAppnavPlaceholder: boolean = false;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the logo link element.\n * Default value is \"Header Logo\".\n */\n @Prop() logoAnalyticsId: string;\n\n @State() hideLogo: boolean = false;\n @State() paddingTop: number;\n @State() metabarTransform: string;\n @State() sticky: boolean = false;\n @State() stickyClosing: boolean = false;\n @State() stickyMetabar: boolean = false;\n @State() stickyMetabarEnd: boolean = false;\n\n @Element() element: HTMLStzhHeaderElement;\n\n /** Update position / sticky state of header */\n @Method()\n async updatePosition() {\n if (this.stickyDisabled) {\n return;\n }\n\n const removeSticky = () => {\n this.sticky = false;\n this.stickyClosing = false;\n this.paddingTop = 0;\n }\n\n if (this.scrollingUp && this.belowStayStickyPoint) {\n if (!this.sticky && this.belowStartStickyPoint) {\n this.paddingTop = this.headerHeight;\n this.sticky = true;\n }\n\n this.updateMetabarPosition();\n } else {\n if (this.sticky && this.belowStayStickyPoint) {\n const animationEnd = () => {\n removeSticky();\n this.updateMetabarPosition();\n this.innerElement.removeEventListener(\"animationend\", animationEnd);\n };\n\n this.innerElement.addEventListener(\"animationend\", animationEnd);\n this.stickyClosing = true;\n } else {\n removeSticky();\n this.updateMetabarPosition();\n }\n }\n }\n\n @Listen(\"scroll\", { target: \"window\" })\n scrollListener() {\n if (this.stickyDisabled) {\n return;\n }\n\n readTask(() => {\n this.scrollTop = window.scrollY;\n this.scrollingUp = this.lastScrollTop && this.lastScrollTop > this.scrollTop;\n this.lastScrollTop = this.scrollTop;\n\n this.innerHeight = this.innerElement ? this.innerElement.offsetHeight : 0;\n this.mainHeight = this.mainElement ? this.mainElement.offsetHeight : 0;\n\n this.logobarHeight = this.sticky\n ? this.isSmall\n ? this.headerHeight - this.innerHeight\n : this.headerHeight - this.mainHeight\n : this.logobarElement\n ? this.logobarElement.offsetHeight\n : 0;\n\n this.belowStayStickyPoint = this.scrollTop > this.logobarHeight;\n this.belowStartStickyPoint = this.scrollTop > this.headerHeight;\n\n this.headerOverlap = (this.headerTop - this.scrollTop) / -1;\n this.hideLogo = this.isSmallheader && this.headerOverlap > 10;\n });\n\n writeTask(() => {\n this.updatePosition();\n });\n }\n\n private scrollTop: number;\n private lastScrollTop: number;\n private headerOverlap: number;\n private scrollingUp: boolean;\n private belowStayStickyPoint: boolean;\n private belowStartStickyPoint: boolean;\n\n private headerTop: number;\n private headerHeight: number;\n private innerHeight: number;\n private mainHeight: number;\n private metabarHeight: number;\n private logobarHeight: number;\n private appnavHeight: number;\n\n private isSmall: boolean;\n private isSmallheader: boolean;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private innerElement: HTMLDivElement;\n private mainElement: HTMLDivElement;\n private logobarElement: HTMLDivElement;\n private metabarElement: HTMLDivElement;\n private appnavElement: HTMLDivElement;\n private appnavPlaceholderElement: HTMLDivElement;\n\n private handleResize = () => {\n if (this.stickyDisabled) {\n return;\n }\n\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(() => {\n readTask(() => {\n this.isSmall = media(\"small\").matches;\n this.isSmallheader = media(\"smallheader\").matches;\n\n this.headerTop = this.element.offsetTop;\n this.headerHeight = this.element.offsetHeight;\n this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;\n this.metabarHeight = this.metabarElement ? this.metabarElement.offsetHeight : 0;\n });\n\n writeTask(() => {\n document.documentElement.style.setProperty('--stzh-header-height', `${this.headerHeight}px`);\n document.documentElement.style.setProperty('--stzh-header-appnav-height', `${this.appnavHeight}px`);\n document.documentElement.style.setProperty('--stzh-header-metabar-height', `${this.metabarHeight}px`);\n\n if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {\n this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;\n document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', `${this.appnavHeight}px`);\n } else {\n this.appnavPlaceholderElement.style.height = \"0px\";\n document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', \"0px\");\n }\n });\n\n this.scrollListener();\n });\n }\n\n private updateMetabarPosition() {\n if (!this.metabarElement || this.stickyDisabled) {\n return;\n }\n\n if (CSS && CSS.supports && CSS.supports(\"position\", \"sticky\")) {\n return;\n }\n\n if (this.isSmallheader && this.headerOverlap > 0 && !this.sticky && !this.stickyClosing) {\n if (this.headerOverlap < this.mainHeight - this.metabarHeight) {\n this.stickyMetabar = true;\n this.stickyMetabarEnd = false;\n this.metabarTransform = \"translateY(0)\";\n } else {\n this.stickyMetabar = false;\n this.stickyMetabarEnd = true;\n this.metabarTransform = `translateY(${this.logobarHeight}px)`;\n }\n } else {\n this.stickyMetabar = false;\n this.stickyMetabarEnd = false;\n this.metabarTransform = \"translateY(0)\";\n }\n }\n\n connectedCallback() {\n this.appnavPlaceholderElement = document.createElement(\"div\");\n this.element.parentElement.appendChild(this.appnavPlaceholderElement);\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const navSlotUsed: boolean = hasSlot(this.element, \"nav\");\n const loginSlotUsed: boolean = hasSlot(this.element, \"login\");\n const appnavSlotUsed: boolean = hasSlot(this.element, \"appnav\");\n const langNavSlotUsed = hasSlot(this.element, \"langnav\");\n\n const classes = {\n \"header\": true,\n \"header--is-sticky-disabled\": this.stickyDisabled,\n \"header--sticky\": this.sticky,\n \"header--sticky-closing\": this.stickyClosing,\n \"header--hide-logo\": this.hideLogo,\n \"header--sticky-metabar\": this.stickyMetabar,\n \"header--sticky-metabar-end\": this.stickyMetabarEnd,\n \"header--has-metabar-stay\": this.metabarStay,\n \"header--has-empty-metabar-mobile\": !loginSlotUsed, // check for searchfield and burger slot when implemented\n \"header--has-empty-metabar\": !loginSlotUsed && !langNavSlotUsed && !navSlotUsed,\n \"header--has-appnav\": appnavSlotUsed\n };\n\n return (\n <Host>\n <header style={{paddingTop: `${this.paddingTop}px`}} class={classes}>\n <div\n class=\"header__inner\"\n ref={(el) => (this.innerElement = el as HTMLDivElement)}\n >\n <div\n class=\"header__main\"\n ref={(el) => (this.mainElement = el as HTMLDivElement)}\n >\n <div\n class=\"header__logobar\"\n ref={(el) => (this.logobarElement = el as HTMLDivElement)}\n >\n <div class=\"header__logobar-logo\">\n <a href={this.href} class=\"header__logo-link\" s-object-id={this.logoAnalyticsId || \"Header Logo\"}>\n <slot name=\"logo\"></slot>\n </a>\n </div>\n </div>\n\n <div\n class=\"header__metabar\"\n style={{transform: this.metabarTransform}}\n ref={(el) => (this.metabarElement = el as HTMLDivElement)}\n >\n <div class=\"header__metabar-inner\">\n <div class=\"header__metabar-nav\">\n <slot name=\"nav\"></slot>\n </div>\n <div class=\"header__metabar-login\">\n <slot name=\"login\"></slot>\n </div>\n <div class=\"header__metabar-langnav\">\n <slot name=\"langnav\"></slot>\n </div>\n </div>\n </div>\n </div>\n\n <div\n class=\"header__appnav\"\n ref={(el) => (this.appnavElement = el as HTMLDivElement)}\n >\n <div class=\"header__appnav-inner\">\n <slot name=\"appnav\"></slot>\n </div>\n </div>\n </div>\n </header>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"stzh-header.entry.cjs.js","mappings":"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","names":["readTask","media","writeTask","hasSlot","h","Host"],"sources":["src/components/stzh-header/stzh-header.scss?tag=stzh-header&encapsulation=scoped","src/components/stzh-header/stzh-header.tsx"],"sourcesContent":["/**\n * @prop --stzh-header-height: **Global**: Height of header (readonly variable)\n * @prop --stzh-header-appnav-height: **Global**: Height of appnav header if exists (readonly variable)\n * @prop --stzh-header-metabar-height: **Global**: Height of metabar header (readonly variable)\n * @prop --stzh-header-sticky-appnav-height: **Global**: Height of appnav header if he is sticky (readonly variable)\n */\n\n@keyframes stzh-header-open {\n\tfrom {\n\t\ttransform: translateY(-100%);\n\t}\n\n\tto {\n\t\ttransform: translateY(0%);\n\t}\n}\n\n@keyframes stzh-header-close {\n\tfrom {\n\t\ttransform: translateY(0%);\n\t}\n\n\tto {\n\t\ttransform: translateY(-100%);\n\t}\n}\n\n:host {\n @media print {\n display: none;\n }\n\n ::slotted([slot=\"logo\"]) {\n width: auto;\n height: 100%;\n }\n\n ::slotted(stzh-logo[slot=\"logo\"]) {\n --width: auto;\n --height: 100%;\n }\n\n ::slotted(stzh-logo[slot=\"logo\"]:not([type=\"stzh\"]):not([type=\"none\"])) {\n --width: auto;\n --height: 31px;\n\n @include mq($from: medium) {\n --height: 35px;\n }\n\n @include mq($from: ultra) {\n --height: 53px;\n }\n }\n\n ::slotted(stzh-popover[slot=\"login\"]) {\n display: flex;\n flex-grow: 1;\n\n .stzh-popover,\n .stzh-popover__trigger {\n display: flex;\n flex-grow: 1;\n }\n\n .stzh-popover .stzh-popover__trigger stzh-button .stzh-button {\n @include fontSize('micro');\n height: auto;\n\n @include mq($to: smallheader) {\n border-radius: 0;\n height: 100%;\n }\n\n &__badge {\n @include mq($to: smallheader) {\n top: 8px;\n right: 7px;\n }\n }\n }\n }\n}\n\n.header {\n &__inner {\n transition: box-shadow $baseTransitionAnimationSpeed;\n }\n\n &__main {\n position: relative;\n z-index: $zIndexHeader;\n display: flex;\n flex-direction: column;\n position: relative;\n box-shadow: $boxShadowHeader;\n background-color: $colorWhite;\n transition: box-shadow $baseTransitionAnimationSpeed;\n\n @include mq($from: smallheader) {\n box-shadow: none;\n flex-direction: column-reverse;\n border-bottom: 1px solid $baseBorderColor;\n padding-top: $headerMetabarHeightRegularUp;\n\n @supports (position: sticky) {\n padding-top: 0;\n }\n }\n }\n\n &__metabar {\n border-top: 1px solid $baseBorderColor;\n\n @include mq($from: smallheader) {\n border-top: none;\n background-color: $colorGrey5;\n z-index: 1;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n\n @supports (position: sticky) {\n position: sticky;\n }\n }\n }\n\n &__metabar-inner {\n @include container;\n display: flex;\n align-items: stretch;\n height: $headerMetabarHeight;\n\n\t\t@include mq($to: smallheader) {\n // overwrite container margin for smallheader\n // to be able to use fullwidth of metabar\n margin: 0 auto;\n }\n\n\t\t@include mq($from: smallheader) {\n justify-content: flex-end;\n align-items: center;\n height: $headerMetabarHeightRegularUp;\n }\n }\n\n &__metabar-nav,\n &__metabar-langnav {\n display: none;\n\n @include mq($from: smallheader) {\n display: inline-flex;\n }\n }\n\n &__metabar-login {\n display: flex;\n flex-basis: 50%;\n\n &:not(:empty) {\n \t\t@include mq($from: smallheader) {\n flex-basis: auto;\n margin-left: space('small');\n }\n }\n }\n\n &__metabar-langnav {\n &:not(:empty) {\n @include mq($from: smallheader) {\n margin-left: space('medium');\n }\n }\n }\n\n &__logobar {\n display: flex;\n background-color: $colorPrimary;\n }\n\n &__logobar-logo {\n box-sizing: content-box;\n display: flex;\n background-color: $colorWhite;\n overflow: hidden;\n width: calc(100% - #{$headerMetabarHeight} - 1px);\n\n\t\t@include mq($from: smallheader) {\n width: 400px;\n }\n\n\t\t@include mq($from: large) {\n\t\t width: 460px;\n\t\t}\n\n\t\t@include mq($from: ultra) {\n \t\tpadding-left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n\t\t}\n }\n\n &__logo-link {\n flex-grow: 1;\n display: inline-flex;\n\t\theight: 76px;\n padding: space('medium');\n padding-left: $containerMargin;\n transition: opacity $baseTransitionAnimationSpeed;\n\n\t\t@include mq($from: small) {\n\t\t\tpadding-left: $containerMarginSmall;\n\t\t}\n\n\t\t@include mq($from: smallheader) {\n\t\t\theight: 90px;\n\t\t}\n\n\t\t@include mq($from: large) {\n\t\t\theight: 120px;\n padding: space('large');\n\t\t\tpadding-left: $containerMarginLarge;\n }\n\n\t\t@include mq($from: ultra) {\n padding-left: 0;\n }\n }\n\n &__appnav {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: calc(#{$zIndexHeader} - 1);\n box-shadow: $boxShadowHeader;\n background-color: $colorWhite;\n\n @include mq($from: small) {\n position: static;\n box-shadow: none;\n }\n }\n\n &__appnav-inner {\n @include mq($from: small) {\n @include container;\n }\n }\n\n /* Hide logo */\n\n &--hide-logo &__logo-link {\n opacity: 0;\n }\n\n /* Has empty metabar */\n\n &--has-empty-metabar-mobile &__metabar {\n @include mq($to: smallheader) {\n display: none;\n }\n }\n\n /* Has empty metabar */\n\n &--has-empty-metabar &__metabar {\n display: none;\n }\n\n /* Metabar Stay */\n\n &--has-metabar-stay &__metabar-langnav {\n @include mq($to: smallheader) {\n display: inline-flex;\n }\n }\n\n &--has-metabar-stay &__metabar-nav {\n @include mq($to: smallheader) {\n display: inline-flex;\n }\n }\n\n &--has-metabar-stay &__main {\n @include mq($to: smallheader) {\n box-shadow: none;\n flex-direction: column-reverse;\n border-bottom: 1px solid $baseBorderColor;\n }\n }\n\n &--has-metabar-stay &__metabar {\n @include mq($to: smallheader) {\n display: block;\n border-top: none;\n background-color: $colorGrey5;\n }\n }\n\n &--has-metabar-stay &__metabar-inner {\n @include mq($to: smallheader) {\n @include container;\n justify-content: flex-end;\n align-items: center;\n }\n }\n\n /* Sticky metabar */\n\n &--sticky-metabar:not(#{&}--sticky):not(#{&}--is-sticky-disabled) &__metabar {\n @include mq($from: smallheader) {\n position: fixed;\n }\n }\n\n /* Sticky variant */\n\n &--sticky &__inner {\n\t\t@include mq($from: small) {\n animation: stzh-header-open $baseTransitionAnimationSpeed;\n z-index: $zIndexHeader;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n margin: 0;\n box-shadow: $boxShadowHeader;\n }\n }\n\n &--sticky &__main {\n\t\t@include mq($to: small) {\n animation: stzh-header-open $baseTransitionAnimationSpeed;\n z-index: $zIndexHeader;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n margin: 0;\n }\n\n\t\t@include mq($from: small) {\n box-shadow: none;\n }\n }\n\n &--sticky &__appnav {\n\t\t@include mq($to: smallheader) {\n border-top: 1px solid $baseBorderColor;\n }\n }\n\n &--sticky &__metabar {\n border-top: none;\n }\n\n &--sticky#{&}--has-empty-metabar &__metabar {\n display: none;\n }\n\n &--sticky#{&}--has-empty-metabar:not(#{&}--has-appnav) &__main {\n\t\t@include mq($from: small) {\n border-bottom: none;\n }\n }\n\n &--sticky &__logobar {\n display: none;\n }\n\n &--sticky#{&}--has-metabar-stay &__main {\n\t\t@include mq($to: small) {\n box-shadow: $boxShadowHeader;\n }\n }\n\n /* Sticky closing */\n\n &--sticky-closing &__inner {\n\t\t@include mq($from: small) {\n animation: stzh-header-close $baseTransitionAnimationSpeed;\n }\n }\n\n &--sticky-closing &__main {\n\t\t@include mq($to: small) {\n animation: stzh-header-close $baseTransitionAnimationSpeed;\n }\n }\n\n /* Sticky disabled */\n\n &--is-sticky-disabled &__main {\n @include mq($from: smallheader) {\n @supports (position: sticky) {\n padding-top: $headerMetabarHeightRegularUp;\n }\n }\n }\n\n &--is-sticky-disabled &__metabar {\n @include mq($from: smallheader) {\n @supports (position: sticky) {\n position: absolute;\n }\n }\n }\n}\n","import {\n Component,\n Element,\n Listen,\n Host,\n State,\n h,\n writeTask,\n readTask,\n Method,\n Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot logo - Slot for brand logo\n * @slot nav - Slot for `stzh-metanav` element\n * @slot login - Slot for login button\n * @slot appnav - Slot for `stzh-appnav` element\n * @slot langnav - Slot for `stzh-langnav` element\n */\n@Component({\n tag: \"stzh-header\",\n styleUrl: \"stzh-header.scss\",\n scoped: true\n})\nexport class StzhHeader {\n /** Portal link (for logo) */\n @Prop() href: string = \"https://www.stadt-zuerich.ch\";\n\n /** Whether grey metabar should stay (on top) on mobile */\n @Prop() metabarStay: boolean = false;\n\n /** Whether sticky behaviour should be disabled */\n @Prop() stickyDisabled: boolean = false;\n\n /**\n * Prevent creating a appnav placeholder element\n * with the size of appnav inside header parent element.\n * This prevents the fixed appnav to overlap\n * content at the end on mikro breakpoint,\n * but could lead to problems with certain layouts.\n */\n @Prop() preventAppnavPlaceholder: boolean = false;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the logo link element.\n * Default value is \"Header Logo\".\n */\n @Prop() logoAnalyticsId: string;\n\n @State() hideLogo: boolean = false;\n @State() paddingTop: number;\n @State() metabarTransform: string;\n @State() sticky: boolean = false;\n @State() stickyClosing: boolean = false;\n @State() stickyMetabar: boolean = false;\n @State() stickyMetabarEnd: boolean = false;\n\n @Element() element: HTMLStzhHeaderElement;\n\n /** Update position / sticky state of header */\n @Method()\n async updatePosition() {\n if (this.stickyDisabled) {\n return;\n }\n\n const removeSticky = () => {\n this.sticky = false;\n this.stickyClosing = false;\n this.paddingTop = 0;\n }\n\n if (this.scrollingUp && this.belowStayStickyPoint) {\n if (!this.sticky && this.belowStartStickyPoint) {\n this.paddingTop = this.headerHeight;\n this.sticky = true;\n }\n\n this.updateMetabarPosition();\n } else {\n if (this.sticky && this.belowStayStickyPoint) {\n const animationEnd = () => {\n removeSticky();\n this.updateMetabarPosition();\n this.innerElement.removeEventListener(\"animationend\", animationEnd);\n };\n\n this.innerElement.addEventListener(\"animationend\", animationEnd);\n this.stickyClosing = true;\n } else {\n removeSticky();\n this.updateMetabarPosition();\n }\n }\n }\n\n @Listen(\"scroll\", { target: \"window\" })\n scrollListener() {\n if (this.stickyDisabled) {\n return;\n }\n\n readTask(() => {\n this.currentScrollY = window.scrollY;\n this.scrollingUp = this.lastScrollY && this.lastScrollY > this.currentScrollY;\n this.lastScrollY = this.currentScrollY;\n\n this.innerHeight = this.innerElement ? this.innerElement.offsetHeight : 0;\n this.mainHeight = this.mainElement ? this.mainElement.offsetHeight : 0;\n\n this.logobarHeight = this.sticky\n ? this.isSmall\n ? this.headerHeight - this.innerHeight\n : this.headerHeight - this.mainHeight\n : this.logobarElement\n ? this.logobarElement.offsetHeight\n : 0;\n\n this.belowStayStickyPoint = this.currentScrollY > this.logobarHeight;\n this.belowStartStickyPoint = this.currentScrollY > this.headerHeight;\n\n this.headerOverlap = (this.headerTop - this.currentScrollY) / -1;\n this.hideLogo = this.isSmallheader && this.headerOverlap > 10;\n });\n\n writeTask(() => {\n this.updatePosition();\n });\n }\n\n private currentScrollY: number;\n private lastScrollY: number;\n private headerOverlap: number;\n private scrollingUp: boolean;\n private belowStayStickyPoint: boolean;\n private belowStartStickyPoint: boolean;\n\n private headerTop: number;\n private headerHeight: number;\n private innerHeight: number;\n private mainHeight: number;\n private metabarHeight: number;\n private logobarHeight: number;\n private appnavHeight: number;\n\n private isSmall: boolean;\n private isSmallheader: boolean;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private innerElement: HTMLDivElement;\n private mainElement: HTMLDivElement;\n private logobarElement: HTMLDivElement;\n private metabarElement: HTMLDivElement;\n private appnavElement: HTMLDivElement;\n private appnavPlaceholderElement: HTMLDivElement;\n\n private handleResize = () => {\n if (this.stickyDisabled) {\n return;\n }\n\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(() => {\n readTask(() => {\n this.isSmall = media(\"small\").matches;\n this.isSmallheader = media(\"smallheader\").matches;\n\n this.headerTop = this.element.offsetTop;\n this.headerHeight = this.element.offsetHeight;\n this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;\n this.metabarHeight = this.metabarElement ? this.metabarElement.offsetHeight : 0;\n });\n\n writeTask(() => {\n document.documentElement.style.setProperty('--stzh-header-height', `${this.headerHeight}px`);\n document.documentElement.style.setProperty('--stzh-header-appnav-height', `${this.appnavHeight}px`);\n document.documentElement.style.setProperty('--stzh-header-metabar-height', `${this.metabarHeight}px`);\n\n if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {\n this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;\n document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', `${this.appnavHeight}px`);\n } else {\n this.appnavPlaceholderElement.style.height = \"0px\";\n document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', \"0px\");\n }\n });\n\n this.scrollListener();\n });\n }\n\n private updateMetabarPosition() {\n if (!this.metabarElement || this.stickyDisabled) {\n return;\n }\n\n if (CSS && CSS.supports && CSS.supports(\"position\", \"sticky\")) {\n return;\n }\n\n if (this.isSmallheader && this.headerOverlap > 0 && !this.sticky && !this.stickyClosing) {\n if (this.headerOverlap < this.mainHeight - this.metabarHeight) {\n this.stickyMetabar = true;\n this.stickyMetabarEnd = false;\n this.metabarTransform = \"translateY(0)\";\n } else {\n this.stickyMetabar = false;\n this.stickyMetabarEnd = true;\n this.metabarTransform = `translateY(${this.logobarHeight}px)`;\n }\n } else {\n this.stickyMetabar = false;\n this.stickyMetabarEnd = false;\n this.metabarTransform = \"translateY(0)\";\n }\n }\n\n connectedCallback() {\n this.appnavPlaceholderElement = document.createElement(\"div\");\n this.element.parentElement.appendChild(this.appnavPlaceholderElement);\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const navSlotUsed: boolean = hasSlot(this.element, \"nav\");\n const loginSlotUsed: boolean = hasSlot(this.element, \"login\");\n const appnavSlotUsed: boolean = hasSlot(this.element, \"appnav\");\n const langNavSlotUsed = hasSlot(this.element, \"langnav\");\n\n const classes = {\n \"header\": true,\n \"header--is-sticky-disabled\": this.stickyDisabled,\n \"header--sticky\": this.sticky,\n \"header--sticky-closing\": this.stickyClosing,\n \"header--hide-logo\": this.hideLogo,\n \"header--sticky-metabar\": this.stickyMetabar,\n \"header--sticky-metabar-end\": this.stickyMetabarEnd,\n \"header--has-metabar-stay\": this.metabarStay,\n \"header--has-empty-metabar-mobile\": !loginSlotUsed, // check for searchfield and burger slot when implemented\n \"header--has-empty-metabar\": !loginSlotUsed && !langNavSlotUsed && !navSlotUsed,\n \"header--has-appnav\": appnavSlotUsed\n };\n\n return (\n <Host>\n <header style={{paddingTop: `${this.paddingTop}px`}} class={classes}>\n <div\n class=\"header__inner\"\n ref={(el) => (this.innerElement = el as HTMLDivElement)}\n >\n <div\n class=\"header__main\"\n ref={(el) => (this.mainElement = el as HTMLDivElement)}\n >\n <div\n class=\"header__logobar\"\n ref={(el) => (this.logobarElement = el as HTMLDivElement)}\n >\n <div class=\"header__logobar-logo\">\n <a href={this.href} class=\"header__logo-link\" s-object-id={this.logoAnalyticsId || \"Header Logo\"}>\n <slot name=\"logo\"></slot>\n </a>\n </div>\n </div>\n\n <div\n class=\"header__metabar\"\n style={{transform: this.metabarTransform}}\n ref={(el) => (this.metabarElement = el as HTMLDivElement)}\n >\n <div class=\"header__metabar-inner\">\n <div class=\"header__metabar-nav\">\n <slot name=\"nav\"></slot>\n </div>\n <div class=\"header__metabar-login\">\n <slot name=\"login\"></slot>\n </div>\n <div class=\"header__metabar-langnav\">\n <slot name=\"langnav\"></slot>\n </div>\n </div>\n </div>\n </div>\n\n <div\n class=\"header__appnav\"\n ref={(el) => (this.appnavElement = el as HTMLDivElement)}\n >\n <div class=\"header__appnav-inner\">\n <slot name=\"appnav\"></slot>\n </div>\n </div>\n </div>\n </header>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -120,18 +120,12 @@ export class StzhActionset {
|
|
|
120
120
|
};
|
|
121
121
|
const Action = (action) => (h("stzh-button", { class: {
|
|
122
122
|
"stzh-actionset__action": true,
|
|
123
|
-
"is-button": true
|
|
124
|
-
|
|
125
|
-
// "hide-when-collapsed": !action.onlyCollapseText,
|
|
126
|
-
// "hide-text-when-collapsed": action.onlyCollapseText
|
|
127
|
-
}, icon: action.icon, iconPosition: action.iconPosition, iconOnly: action.iconOnly, badge: action.badge, variant: action.variant
|
|
123
|
+
"is-button": true
|
|
124
|
+
}, label: action.label, icon: action.icon, iconPosition: action.iconPosition, iconOnly: action.iconOnly, badge: action.badge, variant: action.variant
|
|
128
125
|
? action.variant
|
|
129
126
|
: (this.variant === "stack" ? "secondary" : "tertiary"), size: action.size
|
|
130
127
|
? action.size
|
|
131
|
-
: (this.variant === "stack" ? "default" : "tiny"), badgePosition: "icon", onClick: (e) => { this.actionClick(action, e); } }
|
|
132
|
-
// "show-medium": action.onlyCollapseText,
|
|
133
|
-
// "hide-when-collapsed": action.onlyCollapseText
|
|
134
|
-
} }, action.label)));
|
|
128
|
+
: (this.variant === "stack" ? "default" : "tiny"), badgePosition: "icon", onClick: (e) => { this.actionClick(action, e); } }));
|
|
135
129
|
return (h(Host, { "has-collapsed-items": this.actionsCollapsed.length > 0 }, h("div", { class: classes }, h("div", { class: "stzh-actionset__actions", role: "group" }, h("div", { ref: (el) => (this.actionsElement = el), class: "stzh-actionset__actions-wrapper" }, this._actions.map(action => ((this.dynamicActions
|
|
136
130
|
|| (!this.dynamicActions &&
|
|
137
131
|
this.actionsCollapsed.indexOf(action) === -1))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stzh-actionset.js","sourceRoot":"","sources":["../../../../src/components/stzh-actionset/stzh-actionset.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Watch,\n Event,\n EventEmitter,\n State\n} from \"@stencil/core\";\n\nimport {\n StzhActionsetItem,\n StzhActionsetItemClickEvent\n} from \"../../index\";\n\nimport { StzhActionsetLocalizedText } from './stzh-actionset.localization';\n\nimport {\n media,\n addMediaChangeListener,\n removeMediaChangeListener\n} from '../../utils/media-utils';\n\nimport {\n Placement,\n} from \"@floating-ui/dom\";\n\n/**\n */\n@Component({\n tag: \"stzh-actionset\",\n styleUrl: \"stzh-actionset.scss\",\n scoped: true\n})\nexport class StzhActionset {\n /** Translation strings */\n @Prop() localization: StzhActionsetLocalizedText;\n\n /** Variant determining what position the action buttons are */\n @Prop({ reflect: true }) variant: \"stack\" | \"overflow\" = \"stack\";\n\n /** Button variant of popover button (button thats holds collapsed actions) */\n @Prop({ reflect: true }) popoverButtonVariant: \"\" | \"default\" | \"secondary\" | \"input\" | \"tertiary\" = \"\";\n\n /** Button size of popover button (button that holds collapsed actions) */\n @Prop({ reflect: true }) popoverButtonSize: \"\" | \"default\" | \"small\" | \"tiny\" = \"\";\n\n /** Popover placement of button that holds collapsed actions */\n @Prop({ reflect: true }) popoverPlacement: Placement = \"bottom-end\";\n\n /**\n * Card header actions.\n * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n * `[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`\n */\n @Prop() actions: StzhActionsetItem[] | string = [];\n private _actions: StzhActionsetItem[] = [];\n\n /** Header action click event */\n @Event() stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;\n\n @Element() element: HTMLStzhActionsetElement;\n\n @Watch(\"actions\")\n actionsWatcher(newValue: StzhActionsetItem[] | string) {\n if (typeof newValue === \"string\") {\n this._actions = JSON.parse(newValue);\n } else {\n this._actions = newValue;\n }\n }\n\n @State() actionsCollapsed: StzhActionsetItem[] = [];\n @State() dynamicActions: boolean;\n @State() isSmall: boolean;\n @State() isMedium: boolean;\n\n private actionsElement: HTMLElement;\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private actionClick = (action: StzhActionsetItem, originalEvent: MouseEvent) => {\n this.stzhActionClick.emit({\n component: \"stzh-actionset\",\n action,\n originalEvent\n });\n }\n\n private update = () => {\n this.isSmall = media(\"small\").matches;\n this.isMedium = media(\"medium\").matches;\n\n if (!this.actionsElement) {\n return;\n }\n\n Object.assign(this.actionsElement.style, {\n width: null,\n height: null\n });\n\n let newActionsVisible = 0;\n\n if (\n this.variant === \"overflow\" && this.isMedium\n || this.variant === \"stack\" && this.isSmall\n ) {\n this.dynamicActions = true;\n\n let newActionsHeight = 0;\n let newActionsWidth = 0;\n\n // update height and width\n Array.from(this.actionsElement.children).forEach((child: HTMLElement) => {\n // check which item is visible and\n if (child.offsetTop === 0) {\n newActionsVisible++;\n\n const style = getComputedStyle(child);\n const marginLeft = parseInt(style.marginLeft);\n const marginRight = parseInt(style.marginRight);\n const marginTop = parseInt(style.marginTop);\n const marginBottom = parseInt(style.marginBottom);\n\n const childWidth = child.offsetWidth + marginLeft + marginRight;\n const childHeight = child.offsetHeight + marginTop + marginBottom;\n\n if (newActionsHeight < childHeight) {\n newActionsHeight = childHeight;\n }\n\n newActionsWidth = newActionsWidth + childWidth + 1;\n }\n });\n\n Object.assign(this.actionsElement.style, {\n width: `${newActionsWidth}px`,\n height: `${newActionsHeight}px`\n });\n } else {\n this.dynamicActions = false;\n\n if (this.variant === \"overflow\") {\n newActionsVisible = 0;\n } else if (this.variant === \"stack\") {\n newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;\n }\n }\n\n this.actionsCollapsed = this._actions.slice(newActionsVisible);\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.update);\n }\n\n private mediaChangeHandler = () => {\n this.actionsCollapsed = [];\n requestAnimationFrame(this.update);\n }\n\n async componentWillLoad() {\n this.actionsWatcher(this.actions);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"actionset\");\n }\n }\n\n connectedCallback() {\n addMediaChangeListener(this.mediaChangeHandler);\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.mediaChangeHandler);\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentDidLoad() {\n this.update();\n }\n\n render() {\n const classes = {\n \"stzh-actionset\": true,\n // \"stzh-actionset--has-dynamic-actions\": this.dynamicActions,\n \"stzh-actionset--has-collapsed-items\": this.actionsCollapsed.length > 0,\n [`stzh-actionset--${this.variant}`]: !!this.variant\n };\n\n const Action = (action: StzhActionsetItem) => (\n <stzh-button\n class={{\n \"stzh-actionset__action\": true,\n \"is-button\": true,\n // \"show-medium\": !action.onlyCollapseText,\n // \"hide-when-collapsed\": !action.onlyCollapseText,\n // \"hide-text-when-collapsed\": action.onlyCollapseText\n }}\n icon={action.icon}\n iconPosition={action.iconPosition}\n iconOnly={action.iconOnly}\n badge={action.badge}\n variant={action.variant\n ? action.variant\n : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n size={action.size\n ? action.size\n : (this.variant === \"stack\" ? \"default\" : \"tiny\")}\n badgePosition=\"icon\"\n onClick={(e) => { this.actionClick(action, e) }}\n >\n <span\n class={{\n // \"show-medium\": action.onlyCollapseText,\n // \"hide-when-collapsed\": action.onlyCollapseText\n }}\n >\n {action.label}\n </span>\n </stzh-button>\n );\n\n return (\n <Host has-collapsed-items={this.actionsCollapsed.length > 0}>\n <div class={classes}>\n <div class=\"stzh-actionset__actions\" role=\"group\">\n <div\n ref={(el) => (this.actionsElement = el as HTMLElement)}\n class=\"stzh-actionset__actions-wrapper\"\n >\n {this._actions.map(action => (\n (this.dynamicActions\n || (!this.dynamicActions &&\n this.actionsCollapsed.indexOf(action) === -1))\n &&\n (action.tooltipContent\n ?\n <stzh-tooltip\n strategy=\"fixed\"\n content={action.tooltipContent}\n >\n {Action(action)}\n </stzh-tooltip>\n :\n Action(action))\n ))}\n </div>\n\n <stzh-popover\n label={this.variant === \"stack\"\n ? this.localization.furtherActions\n : (!this.isMedium ? this.localization.actions : \"\")}\n strategy=\"fixed\"\n placement={this.popoverPlacement}\n class=\"stzh-actionset__action-popover\"\n >\n <stzh-button\n fullwidth\n disabled={this.actionsCollapsed.length === 0}\n class=\"stzh-actionset__action is-further\"\n variant={this.popoverButtonVariant !== \"\"\n ? this.popoverButtonVariant\n : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n size={this.popoverButtonSize !== \"\"\n ? this.popoverButtonSize\n : (this.variant === \"stack\" ? \"default\" : \"tiny\")}\n icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n iconOnly={this.variant === \"overflow\" && this.isMedium}\n iconPosition=\"right\"\n label={this.variant === \"stack\"\n ? this.localization.furtherActions\n : (!this.isMedium ? this.localization.actions : \"\")}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {this.actionsCollapsed.map(action => (\n <stzh-menu-item\n // class=\"hide-medium show-when-collapsed\"\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n onClick={(e) => { this.actionClick(action, e) }}\n >\n {action.label}\n </stzh-menu-item>\n ))}\n </stzh-menu>\n </stzh-popover>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"stzh-actionset.js","sourceRoot":"","sources":["../../../../src/components/stzh-actionset/stzh-actionset.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Watch,\n Event,\n EventEmitter,\n State\n} from \"@stencil/core\";\n\nimport {\n StzhActionsetItem,\n StzhActionsetItemClickEvent\n} from \"../../index\";\n\nimport { StzhActionsetLocalizedText } from './stzh-actionset.localization';\n\nimport {\n media,\n addMediaChangeListener,\n removeMediaChangeListener\n} from '../../utils/media-utils';\n\nimport {\n Placement,\n} from \"@floating-ui/dom\";\n\n/**\n */\n@Component({\n tag: \"stzh-actionset\",\n styleUrl: \"stzh-actionset.scss\",\n scoped: true\n})\nexport class StzhActionset {\n /** Translation strings */\n @Prop() localization: StzhActionsetLocalizedText;\n\n /** Variant determining what position the action buttons are */\n @Prop({ reflect: true }) variant: \"stack\" | \"overflow\" = \"stack\";\n\n /** Button variant of popover button (button thats holds collapsed actions) */\n @Prop({ reflect: true }) popoverButtonVariant: \"\" | \"default\" | \"secondary\" | \"input\" | \"tertiary\" = \"\";\n\n /** Button size of popover button (button that holds collapsed actions) */\n @Prop({ reflect: true }) popoverButtonSize: \"\" | \"default\" | \"small\" | \"tiny\" = \"\";\n\n /** Popover placement of button that holds collapsed actions */\n @Prop({ reflect: true }) popoverPlacement: Placement = \"bottom-end\";\n\n /**\n * Card header actions.\n * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n * `[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`\n */\n @Prop() actions: StzhActionsetItem[] | string = [];\n private _actions: StzhActionsetItem[] = [];\n\n /** Header action click event */\n @Event() stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;\n\n @Element() element: HTMLStzhActionsetElement;\n\n @Watch(\"actions\")\n actionsWatcher(newValue: StzhActionsetItem[] | string) {\n if (typeof newValue === \"string\") {\n this._actions = JSON.parse(newValue);\n } else {\n this._actions = newValue;\n }\n }\n\n @State() actionsCollapsed: StzhActionsetItem[] = [];\n @State() dynamicActions: boolean;\n @State() isSmall: boolean;\n @State() isMedium: boolean;\n\n private actionsElement: HTMLElement;\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private actionClick = (action: StzhActionsetItem, originalEvent: MouseEvent) => {\n this.stzhActionClick.emit({\n component: \"stzh-actionset\",\n action,\n originalEvent\n });\n }\n\n private update = () => {\n this.isSmall = media(\"small\").matches;\n this.isMedium = media(\"medium\").matches;\n\n if (!this.actionsElement) {\n return;\n }\n\n Object.assign(this.actionsElement.style, {\n width: null,\n height: null\n });\n\n let newActionsVisible = 0;\n\n if (\n this.variant === \"overflow\" && this.isMedium\n || this.variant === \"stack\" && this.isSmall\n ) {\n this.dynamicActions = true;\n\n let newActionsHeight = 0;\n let newActionsWidth = 0;\n\n // update height and width\n Array.from(this.actionsElement.children).forEach((child: HTMLElement) => {\n // check which item is visible and\n if (child.offsetTop === 0) {\n newActionsVisible++;\n\n const style = getComputedStyle(child);\n const marginLeft = parseInt(style.marginLeft);\n const marginRight = parseInt(style.marginRight);\n const marginTop = parseInt(style.marginTop);\n const marginBottom = parseInt(style.marginBottom);\n\n const childWidth = child.offsetWidth + marginLeft + marginRight;\n const childHeight = child.offsetHeight + marginTop + marginBottom;\n\n if (newActionsHeight < childHeight) {\n newActionsHeight = childHeight;\n }\n\n newActionsWidth = newActionsWidth + childWidth + 1;\n }\n });\n\n Object.assign(this.actionsElement.style, {\n width: `${newActionsWidth}px`,\n height: `${newActionsHeight}px`\n });\n } else {\n this.dynamicActions = false;\n\n if (this.variant === \"overflow\") {\n newActionsVisible = 0;\n } else if (this.variant === \"stack\") {\n newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;\n }\n }\n\n this.actionsCollapsed = this._actions.slice(newActionsVisible);\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.update);\n }\n\n private mediaChangeHandler = () => {\n this.actionsCollapsed = [];\n requestAnimationFrame(this.update);\n }\n\n async componentWillLoad() {\n this.actionsWatcher(this.actions);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"actionset\");\n }\n }\n\n connectedCallback() {\n addMediaChangeListener(this.mediaChangeHandler);\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.mediaChangeHandler);\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentDidLoad() {\n this.update();\n }\n\n render() {\n const classes = {\n \"stzh-actionset\": true,\n // \"stzh-actionset--has-dynamic-actions\": this.dynamicActions,\n \"stzh-actionset--has-collapsed-items\": this.actionsCollapsed.length > 0,\n [`stzh-actionset--${this.variant}`]: !!this.variant\n };\n\n const Action = (action: StzhActionsetItem) => (\n <stzh-button\n class={{\n \"stzh-actionset__action\": true,\n \"is-button\": true\n }}\n label={action.label}\n icon={action.icon}\n iconPosition={action.iconPosition}\n iconOnly={action.iconOnly}\n badge={action.badge}\n variant={action.variant\n ? action.variant\n : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n size={action.size\n ? action.size\n : (this.variant === \"stack\" ? \"default\" : \"tiny\")}\n badgePosition=\"icon\"\n onClick={(e) => { this.actionClick(action, e) }}\n ></stzh-button>\n );\n\n return (\n <Host has-collapsed-items={this.actionsCollapsed.length > 0}>\n <div class={classes}>\n <div class=\"stzh-actionset__actions\" role=\"group\">\n <div\n ref={(el) => (this.actionsElement = el as HTMLElement)}\n class=\"stzh-actionset__actions-wrapper\"\n >\n {this._actions.map(action => (\n (this.dynamicActions\n || (!this.dynamicActions &&\n this.actionsCollapsed.indexOf(action) === -1))\n &&\n (action.tooltipContent\n ?\n <stzh-tooltip\n strategy=\"fixed\"\n content={action.tooltipContent}\n >\n {Action(action)}\n </stzh-tooltip>\n :\n Action(action))\n ))}\n </div>\n\n <stzh-popover\n label={this.variant === \"stack\"\n ? this.localization.furtherActions\n : (!this.isMedium ? this.localization.actions : \"\")}\n strategy=\"fixed\"\n placement={this.popoverPlacement}\n class=\"stzh-actionset__action-popover\"\n >\n <stzh-button\n fullwidth\n disabled={this.actionsCollapsed.length === 0}\n class=\"stzh-actionset__action is-further\"\n variant={this.popoverButtonVariant !== \"\"\n ? this.popoverButtonVariant\n : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n size={this.popoverButtonSize !== \"\"\n ? this.popoverButtonSize\n : (this.variant === \"stack\" ? \"default\" : \"tiny\")}\n icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n iconOnly={this.variant === \"overflow\" && this.isMedium}\n iconPosition=\"right\"\n label={this.variant === \"stack\"\n ? this.localization.furtherActions\n : (!this.isMedium ? this.localization.actions : \"\")}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {this.actionsCollapsed.map(action => (\n <stzh-menu-item\n // class=\"hide-medium show-when-collapsed\"\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n onClick={(e) => { this.actionClick(action, e) }}\n >\n {action.label}\n </stzh-menu-item>\n ))}\n </stzh-menu>\n </stzh-popover>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -222,9 +222,6 @@
|
|
|
222
222
|
}
|
|
223
223
|
}
|
|
224
224
|
.stzh-appnav__title:hover {
|
|
225
|
-
font-family: var(--stzh-font-family-heavy);
|
|
226
|
-
font-weight: var(--stzh-font-weight-heavy);
|
|
227
|
-
font-style: var(--stzh-font-style-heavy);
|
|
228
225
|
color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
|
|
229
226
|
text-decoration: underline;
|
|
230
227
|
}
|
|
@@ -247,29 +247,6 @@
|
|
|
247
247
|
/* Starred */
|
|
248
248
|
/** Hidden header / footer border */
|
|
249
249
|
}
|
|
250
|
-
@media screen and (max-width: 1023px) {
|
|
251
|
-
.stzh-card .vshow-medium {
|
|
252
|
-
border: 0;
|
|
253
|
-
clip: rect(0 0 0 0);
|
|
254
|
-
-webkit-clip-path: inset(100%);
|
|
255
|
-
clip-path: inset(100%);
|
|
256
|
-
width: 0.0625rem;
|
|
257
|
-
height: 0.0625rem;
|
|
258
|
-
overflow: hidden;
|
|
259
|
-
padding: 0;
|
|
260
|
-
position: absolute;
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
@media screen and (max-width: 1023px) {
|
|
264
|
-
.stzh-card .show-medium {
|
|
265
|
-
display: none;
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
@media screen and (min-width: 1024px) {
|
|
269
|
-
.stzh-card .hide-medium {
|
|
270
|
-
display: none;
|
|
271
|
-
}
|
|
272
|
-
}
|
|
273
250
|
.stzh-card__content-wrapper {
|
|
274
251
|
position: relative;
|
|
275
252
|
flex-grow: 1;
|
|
@@ -492,23 +469,9 @@
|
|
|
492
469
|
.stzh-card--is-collapsible .stzh-card__header {
|
|
493
470
|
cursor: pointer;
|
|
494
471
|
}
|
|
495
|
-
.stzh-card--is-collapsed .vhide-when-collapsed, .stzh-card--has-collapsed-header .stzh-card__header .vhide-when-collapsed {
|
|
496
|
-
border: 0;
|
|
497
|
-
clip: rect(0 0 0 0);
|
|
498
|
-
-webkit-clip-path: inset(100%);
|
|
499
|
-
clip-path: inset(100%);
|
|
500
|
-
width: 0.0625rem;
|
|
501
|
-
height: 0.0625rem;
|
|
502
|
-
overflow: hidden;
|
|
503
|
-
padding: 0;
|
|
504
|
-
position: absolute;
|
|
505
|
-
}
|
|
506
472
|
.stzh-card--is-collapsed .hide-when-collapsed, .stzh-card--has-collapsed-header .stzh-card__header .hide-when-collapsed {
|
|
507
473
|
display: none;
|
|
508
474
|
}
|
|
509
|
-
.stzh-card--is-collapsed .show-when-collapsed, .stzh-card--has-collapsed-header .stzh-card__header .show-when-collapsed {
|
|
510
|
-
display: block;
|
|
511
|
-
}
|
|
512
475
|
.stzh-card--is-collapsed .stzh-card__header {
|
|
513
476
|
border-bottom: none;
|
|
514
477
|
}
|
|
@@ -263,7 +263,7 @@ export class StzhCard {
|
|
|
263
263
|
.indexOf(sortableChildElement) === ((_c = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _c === void 0 ? void 0 : _c.children.length) - 1;
|
|
264
264
|
const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;
|
|
265
265
|
const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;
|
|
266
|
-
const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);
|
|
266
|
+
// const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);
|
|
267
267
|
// const headerActions = [
|
|
268
268
|
// ...this._headerActions
|
|
269
269
|
// ];
|
|
@@ -271,7 +271,7 @@ export class StzhCard {
|
|
|
271
271
|
const hasHeader = hasHeading
|
|
272
272
|
|| this._subtitles.length > 0
|
|
273
273
|
|| this._headerActions.length > 0
|
|
274
|
-
|| nonCollapsingTextHeaderActions.length > 0
|
|
274
|
+
// || nonCollapsingTextHeaderActions.length > 0
|
|
275
275
|
|| this.starrable
|
|
276
276
|
|| sortableActionsEnabled;
|
|
277
277
|
const hasFooter = footerUsed
|
|
@@ -297,25 +297,19 @@ export class StzhCard {
|
|
|
297
297
|
};
|
|
298
298
|
return (h(Host, { role: "listitem", "aria-label": this.heading, "is-sortable": sortableEnabled }, h("article", { ref: (el) => (this.mainElement = el), class: classes }, h("a", { ref: (el) => (this.imageLinkElement = el), "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, h("slot", { name: "image" })), h("div", { class: "stzh-card__content-wrapper" }, h("stzh-icon", { class: "stzh-card__dnd", name: "drag" }), h("header", { ref: (el) => (this.headerElement = el), class: "stzh-card__header", onClick: this.headerClick }, h("div", { class: "stzh-card__header-top" }, h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-card__header-left" }, h("div", { class: "stzh-card__title-area" }, hasHeading &&
|
|
299
299
|
h(Heading, { class: "stzh-card__title" }, h("a", { ref: (el) => (this.titleLinkElement = el), class: "stzh-card__title-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, h("div", { ref: (el) => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" })))), this._subtitles.length > 0 &&
|
|
300
|
-
h(Subtitle, { class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle)))))), h("div", { ref: (el) => (this.headerRightElement = el), class: "stzh-card__header-right" }, h("div", { class: "stzh-card__card-actions" }, this.
|
|
301
|
-
|
|
302
|
-
"is-button": true,
|
|
303
|
-
"show-medium": !action.onlyCollapseText,
|
|
304
|
-
"hide-when-collapsed": !action.onlyCollapseText,
|
|
305
|
-
"hide-text-when-collapsed": action.onlyCollapseText
|
|
306
|
-
}, icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, variant: "tertiary", size: "tiny", badgePosition: "icon", onClick: () => { this.actionClick(action); } }, h("span", { class: {
|
|
307
|
-
"vshow-medium": action.onlyCollapseText,
|
|
308
|
-
"vhide-when-collapsed": action.onlyCollapseText
|
|
309
|
-
} }, action.label)))), this.starrable &&
|
|
310
|
-
h("stzh-tooltip", null, h("stzh-button", { class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)), (nonCollapsingTextHeaderActions.length > 0 || this.starrable || sortableActionsEnabled) &&
|
|
300
|
+
h(Subtitle, { class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle)))))), h("div", { ref: (el) => (this.headerRightElement = el), class: "stzh-card__header-right" }, h("div", { class: "stzh-card__card-actions" }, this.starrable &&
|
|
301
|
+
h("stzh-tooltip", null, h("stzh-button", { class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)), (this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) &&
|
|
311
302
|
h("stzh-popover", { label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: {
|
|
312
303
|
"stzh-card__card-action-popover": true,
|
|
313
|
-
"hide-medium show-when-collapsed": !this.starrable && !sortableActionsEnabled
|
|
314
|
-
} }, h("stzh-button", { class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true }), h("stzh-menu", { slot: "content" }, this.
|
|
315
|
-
|
|
304
|
+
// "hide-medium show-when-collapsed": !this.starrable && !sortableActionsEnabled
|
|
305
|
+
} }, h("stzh-button", { class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true }), h("stzh-menu", { slot: "content" }, this._headerActions.map(action => (h("stzh-menu-item", {
|
|
306
|
+
// class="hide-medium show-when-collapsed"
|
|
307
|
+
icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: () => { this.actionClick(action); }
|
|
308
|
+
}, action.label))), sortableActionsEnabled &&
|
|
316
309
|
h(Fragment, null, !isFirstItemInSortable &&
|
|
317
310
|
h("stzh-menu-item", { icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp), !isLastItemInSortable &&
|
|
318
|
-
h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))
|
|
311
|
+
h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown)), this.starrable &&
|
|
312
|
+
h("stzh-menu-item", { icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)))))), h("div", { class: "stzh-card__header-meta" }, h("slot", { name: "meta" }))), h("div", { class: "stzh-card__content hide-when-collapsed" }, h("slot", { name: "content" })), h("div", { class: "stzh-card__footer hide-when-collapsed" }, h("slot", { name: "footer" }, this._footerActions.length > 0 &&
|
|
319
313
|
h("stzh-actionset", { class: "stzh-card__footer-actionset", actions: this._footerActions }), this.selectable &&
|
|
320
314
|
h("stzh-button", { class: "stzh-card__footer-select-button", fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }), this.withArrow &&
|
|
321
315
|
h("stzh-icon", { class: "stzh-card__footer-arrow", name: "arrow-right-long" })))))));
|