@oiz/stzh-components 3.3.0-beta1 → 3.3.0-beta4
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-c314a0a4.js → app-globals-add1c2c1.js} +2 -2
- package/dist/cjs/{app-globals-c314a0a4.js.map → app-globals-add1c2c1.js.map} +1 -1
- package/dist/cjs/index-92254d32.js +4 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/stzh-app-nav.cjs.entry.js +32 -0
- package/dist/cjs/stzh-app-nav.cjs.entry.js.map +1 -0
- package/dist/cjs/stzh-badge_3.cjs.entry.js +38 -17
- package/dist/cjs/stzh-badge_3.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-components.cjs.js +2 -2
- package/dist/cjs/stzh-datepicker_3.cjs.entry.js +2 -0
- package/dist/cjs/stzh-datepicker_3.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-header.cjs.entry.js +57 -17
- package/dist/cjs/stzh-header.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-olmap.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-pagetitle.cjs.entry.js +1 -1
- package/dist/cjs/stzh-pagetitle.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-row.cjs.entry.js +1 -1
- package/dist/cjs/stzh-row.cjs.entry.js.map +1 -1
- package/dist/collection/assets/i18n/de.json +3 -0
- package/dist/collection/assets/i18n/en.json +3 -0
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/stzh-app-nav/stzh-app-nav.css +247 -0
- package/dist/collection/components/stzh-app-nav/stzh-app-nav.e2e.js +16 -0
- package/dist/collection/components/stzh-app-nav/stzh-app-nav.e2e.js.map +1 -0
- package/dist/collection/components/stzh-app-nav/stzh-app-nav.js +79 -0
- package/dist/collection/components/stzh-app-nav/stzh-app-nav.js.map +1 -0
- package/dist/collection/components/stzh-app-nav/stzh-app-nav.localization.js +2 -0
- package/dist/collection/components/stzh-app-nav/stzh-app-nav.localization.js.map +1 -0
- package/dist/collection/components/stzh-app-nav/stzh-app-nav.stories.js +68 -0
- package/dist/collection/components/stzh-datepicker/stzh-datepicker.js +2 -0
- package/dist/collection/components/stzh-datepicker/stzh-datepicker.js.map +1 -1
- package/dist/collection/components/stzh-header/stzh-header.css +31 -2
- package/dist/collection/components/stzh-header/stzh-header.js +144 -21
- package/dist/collection/components/stzh-header/stzh-header.js.map +1 -1
- package/dist/collection/components/stzh-header/stzh-header.stories.js +72 -62
- package/dist/collection/components/stzh-icon/stzh-icon.js +38 -17
- package/dist/collection/components/stzh-icon/stzh-icon.js.map +1 -1
- package/dist/collection/components/stzh-olmap/stzh-olmap.js +1 -1
- package/dist/collection/components/stzh-olmap/stzh-olmap.js.map +1 -1
- package/dist/collection/components/stzh-pagetitle/stzh-pagetitle.css +0 -1
- package/dist/collection/components/stzh-row/stzh-row.css +184 -240
- 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-app-nav.d.ts +11 -0
- package/dist/components/stzh-app-nav.js +8 -0
- package/dist/components/stzh-app-nav.js.map +1 -0
- package/dist/components/stzh-app-nav2.js +64 -0
- package/dist/components/stzh-app-nav2.js.map +1 -0
- package/dist/components/stzh-datepicker2.js +2 -0
- package/dist/components/stzh-datepicker2.js.map +1 -1
- package/dist/components/stzh-header.js +84 -25
- package/dist/components/stzh-header.js.map +1 -1
- package/dist/components/stzh-icon2.js +38 -17
- package/dist/components/stzh-icon2.js.map +1 -1
- package/dist/components/stzh-olmap.js.map +1 -1
- package/dist/components/stzh-pagetitle.js +1 -1
- package/dist/components/stzh-pagetitle.js.map +1 -1
- package/dist/components/stzh-row.js +1 -1
- package/dist/components/stzh-row.js.map +1 -1
- package/dist/esm/{app-globals-b82e4e9d.js → app-globals-7f5414ca.js} +2 -2
- package/dist/esm/{app-globals-b82e4e9d.js.map → app-globals-7f5414ca.js.map} +1 -1
- package/dist/esm/index-e3050b18.js +4 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +2 -2
- package/dist/esm/stzh-app-nav.entry.js +28 -0
- package/dist/esm/stzh-app-nav.entry.js.map +1 -0
- package/dist/esm/stzh-badge_3.entry.js +38 -17
- package/dist/esm/stzh-badge_3.entry.js.map +1 -1
- package/dist/esm/stzh-components.js +2 -2
- package/dist/esm/stzh-datepicker_3.entry.js +2 -0
- package/dist/esm/stzh-datepicker_3.entry.js.map +1 -1
- package/dist/esm/stzh-header.entry.js +57 -17
- package/dist/esm/stzh-header.entry.js.map +1 -1
- package/dist/esm/stzh-olmap.entry.js.map +1 -1
- package/dist/esm/stzh-pagetitle.entry.js +1 -1
- package/dist/esm/stzh-pagetitle.entry.js.map +1 -1
- package/dist/esm/stzh-row.entry.js +1 -1
- package/dist/esm/stzh-row.entry.js.map +1 -1
- package/dist/stzh-components/assets/i18n/de.json +3 -0
- package/dist/stzh-components/assets/i18n/en.json +3 -0
- package/dist/stzh-components/index.esm.js.map +1 -1
- package/dist/stzh-components/p-10dc377b.entry.js +2 -0
- package/dist/stzh-components/p-10dc377b.entry.js.map +1 -0
- package/dist/stzh-components/p-487b6e52.entry.js +2 -0
- package/dist/stzh-components/p-487b6e52.entry.js.map +1 -0
- package/dist/stzh-components/p-4f7f4362.entry.js +2 -0
- package/dist/stzh-components/p-4f7f4362.entry.js.map +1 -0
- package/dist/stzh-components/{p-d869745a.js → p-6009632f.js} +2 -2
- package/dist/stzh-components/p-6a1d65ce.entry.js +2 -0
- package/dist/stzh-components/p-6a1d65ce.entry.js.map +1 -0
- package/dist/stzh-components/p-b4f5d152.entry.js.map +1 -1
- package/dist/stzh-components/{p-c9265a65.entry.js → p-f0887c02.entry.js} +2 -2
- package/dist/stzh-components/p-f0887c02.entry.js.map +1 -0
- package/dist/stzh-components/p-f42f6787.entry.js +2 -0
- package/dist/stzh-components/p-f42f6787.entry.js.map +1 -0
- package/dist/stzh-components/stzh-components.esm.js +1 -1
- package/dist/stzh-components/stzh-components.esm.js.map +1 -1
- package/dist/types/components/stzh-app-nav/stzh-app-nav.d.ts +11 -0
- package/dist/types/components/stzh-app-nav/stzh-app-nav.localization.d.ts +4 -0
- package/dist/types/components/stzh-header/stzh-header.d.ts +18 -5
- package/dist/types/components/stzh-icon/stzh-icon.d.ts +3 -1
- package/dist/types/components/stzh-olmap/stzh-olmap.d.ts +1 -1
- package/dist/types/components.d.ts +75 -12
- package/dist/types/index.d.ts +10 -0
- package/dist/vscode-data.json +22 -6
- package/package.json +1 -1
- package/dist/stzh-components/p-6e29bc61.entry.js +0 -2
- package/dist/stzh-components/p-6e29bc61.entry.js.map +0 -1
- package/dist/stzh-components/p-b047262a.entry.js +0 -2
- package/dist/stzh-components/p-b047262a.entry.js.map +0 -1
- package/dist/stzh-components/p-b608bf1a.entry.js +0 -2
- package/dist/stzh-components/p-b608bf1a.entry.js.map +0 -1
- package/dist/stzh-components/p-b62c870a.entry.js +0 -2
- package/dist/stzh-components/p-b62c870a.entry.js.map +0 -1
- package/dist/stzh-components/p-c9265a65.entry.js.map +0 -1
- /package/dist/stzh-components/{p-d869745a.js.map → p-6009632f.js.map} +0 -0
|
@@ -7,7 +7,7 @@ const utils = require('./utils-475fb329.js');
|
|
|
7
7
|
const mediaUtils = require('./media-utils-fa9f86b8.js');
|
|
8
8
|
require('./string-utils-5dd70320.js');
|
|
9
9
|
|
|
10
|
-
const stzhPagetitleCss = ".sc-stzh-pagetitle-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-pagetitle-h{display:none}.sc-stzh-pagetitle-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagetitle-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagetitle-h *.sc-stzh-pagetitle,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::before,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-pagetitle-h .has-focus.sc-stzh-pagetitle{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pagetitle{outline-style:none !important}.sc-stzh-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pagetitle::-moz-focus-inner{border:0 !important}.sc-stzh-pagetitle-h{--background-color:var(--stzh-pagetitle-background-color, var(--stzh-pagetitle-background-color));--image-background-color:var(--stzh-ratio-background-color)}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}[background=default].sc-stzh-pagetitle-h{--stzh-readspeaker-background-color:var(--background-color);--stzh-readspeaker-audio-track-progress-background-color:var(--stzh-color-white)}[background=transparent].sc-stzh-pagetitle-h{--background-color:transparent}.stzh-pagetitle.sc-stzh-pagetitle{background-color:var(--background-color)}.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-pagetitle__wrapper.sc-stzh-pagetitle{position:relative;display:grid}.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge);display:flex;flex-direction:column;justify-content:center}@media screen and (min-width: 600px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xbig)}}.stzh-pagetitle__image-wrapper.sc-stzh-pagetitle{position:relative}.stzh-pagetitle__ratio.sc-stzh-pagetitle{--background-color:var(--image-background-color)}.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{background-color:var(--image-background-color);position:absolute;inset:0;height:100%;margin-left:calc(1.25rem / -1);margin-right:calc(1.25rem / -1)}@media screen and (min-width: 600px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{margin-left:calc(2rem / -1);margin-right:calc(2rem / -1)}}@media screen and (min-width: 900px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{margin-left:0;margin-right:0;width:calc(100% + 2.5rem)}}@media screen and (min-width: 1260px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{width:calc(100% + 4rem)}}@media screen and (min-width: 1600px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{width:calc(100% + ((100rem - 84.25rem) / 2))}}.stzh-pagetitle__meta.sc-stzh-pagetitle{display:flex;flex-direction:column-reverse;row-gap:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-pagetitle__meta.sc-stzh-pagetitle{flex-direction:row}}.stzh-pagetitle__tag.sc-stzh-pagetitle:not(:empty){margin-right:auto}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-pagetitle__readspeaker.sc-stzh-pagetitle{--stzh-readspeaker-dropdown-position:relative;--stzh-readspeaker-dropdown-top:auto}}.stzh-pagetitle__dateline.sc-stzh-pagetitle{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);margin-top:var(--stzh-space-medium);color:var(--stzh-color-primary70);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-xxlarge)}}.stzh-pagetitle__lead.sc-stzh-pagetitle{--stzh-base-lead-color:var(--stzh-heading-color)}.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xxxlarge)}}.stzh-pagetitle__disturber.sc-stzh-pagetitle{z-index:var(--stzh-z-index-sticky);position:fixed;left:0;right:0;bottom:0}@media screen and (min-width: 900px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{z-index:initial;position:absolute;width:calc(((100% - 7 * var(--stzh-grid-gutter-medium)) / 8 * 3) + 2 * var(--stzh-grid-gutter-medium));left:auto;bottom:calc((var(--stzh-space-big) - var(--stzh-space-xlarge)) / -1)}}@media screen and (min-width: 1260px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{width:calc(((100% - 11 * var(--stzh-grid-gutter-large)) / 12 * 4) + 3 * var(--stzh-grid-gutter-large));bottom:calc(var(--stzh-space-huge) / -1)}}@media screen and (min-width: 1600px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{width:calc(((100% - 11 * var(--stzh-grid-gutter-ultra)) / 12 * 4) + 3 * var(--stzh-grid-gutter-ultra))}}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__ratio.sc-stzh-pagetitle{display:none}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr))}@media screen and (min-width: 600px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__meta.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__dateline.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 4}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__meta.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__dateline.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle{grid-column:1/span 8}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 6}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 7}}@media screen and (min-width: 900px){.stzh-pagetitle--has-image.sc-stzh-pagetitle .stzh-pagetitle__wrapper.sc-stzh-pagetitle{grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--stzh-space-xxlarge)}}.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-tag.sc-stzh-pagetitle .stzh-pagetitle__readspeaker.sc-stzh-pagetitle{--stzh-readspeaker-dropdown-left:auto;--stzh-readspeaker-dropdown-right:0px;--stzh-readspeaker-dropdown-settings-left:auto;--stzh-readspeaker-dropdown-settings-right:0px}}.stzh-pagetitle--background-default.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{--stzh-selection-background-color:var(--stzh-color-white)}.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-pagetitle--hyphens.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle{-webkit-hyphens:auto;hyphens:auto}";
|
|
10
|
+
const stzhPagetitleCss = ".sc-stzh-pagetitle-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-pagetitle-h{display:none}.sc-stzh-pagetitle-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagetitle-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagetitle-h *.sc-stzh-pagetitle,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::before,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-pagetitle-h .has-focus.sc-stzh-pagetitle{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pagetitle{outline-style:none !important}.sc-stzh-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pagetitle::-moz-focus-inner{border:0 !important}.sc-stzh-pagetitle-h{--background-color:var(--stzh-pagetitle-background-color, var(--stzh-pagetitle-background-color));--image-background-color:var(--stzh-ratio-background-color)}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}[background=default].sc-stzh-pagetitle-h{--stzh-readspeaker-background-color:var(--background-color);--stzh-readspeaker-audio-track-progress-background-color:var(--stzh-color-white)}[background=transparent].sc-stzh-pagetitle-h{--background-color:transparent}.stzh-pagetitle.sc-stzh-pagetitle{background-color:var(--background-color)}.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-pagetitle__wrapper.sc-stzh-pagetitle{position:relative;display:grid}.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge);display:flex;flex-direction:column;justify-content:center}@media screen and (min-width: 600px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xbig)}}.stzh-pagetitle__image-wrapper.sc-stzh-pagetitle{position:relative}.stzh-pagetitle__ratio.sc-stzh-pagetitle{--background-color:var(--image-background-color)}.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{background-color:var(--image-background-color);position:absolute;inset:0;height:100%;margin-left:calc(1.25rem / -1);margin-right:calc(1.25rem / -1)}@media screen and (min-width: 600px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{margin-left:calc(2rem / -1);margin-right:calc(2rem / -1)}}@media screen and (min-width: 900px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{margin-left:0;margin-right:0;width:calc(100% + 2.5rem)}}@media screen and (min-width: 1260px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{width:calc(100% + 4rem)}}@media screen and (min-width: 1600px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{width:calc(100% + ((100rem - 84.25rem) / 2))}}.stzh-pagetitle__meta.sc-stzh-pagetitle{display:flex;flex-direction:column-reverse;row-gap:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-pagetitle__meta.sc-stzh-pagetitle{flex-direction:row}}.stzh-pagetitle__tag.sc-stzh-pagetitle:not(:empty){margin-right:auto}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-pagetitle__readspeaker.sc-stzh-pagetitle{--stzh-readspeaker-dropdown-position:relative;--stzh-readspeaker-dropdown-top:auto}}.stzh-pagetitle__dateline.sc-stzh-pagetitle{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);margin-top:var(--stzh-space-medium);color:var(--stzh-color-primary70);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-xxlarge)}}.stzh-pagetitle__lead.sc-stzh-pagetitle{--stzh-base-lead-color:var(--stzh-heading-color)}.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xxxlarge)}}.stzh-pagetitle__disturber.sc-stzh-pagetitle{z-index:var(--stzh-z-index-sticky);position:fixed;left:0;right:0;bottom:0}@media screen and (min-width: 900px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{z-index:initial;position:absolute;width:calc(((100% - 7 * var(--stzh-grid-gutter-medium)) / 8 * 3) + 2 * var(--stzh-grid-gutter-medium));left:auto;bottom:calc((var(--stzh-space-big) - var(--stzh-space-xlarge)) / -1)}}@media screen and (min-width: 1260px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{width:calc(((100% - 11 * var(--stzh-grid-gutter-large)) / 12 * 4) + 3 * var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{width:calc(((100% - 11 * var(--stzh-grid-gutter-ultra)) / 12 * 4) + 3 * var(--stzh-grid-gutter-ultra))}}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__ratio.sc-stzh-pagetitle{display:none}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr))}@media screen and (min-width: 600px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__meta.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__dateline.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 4}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__meta.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__dateline.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle{grid-column:1/span 8}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 6}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 7}}@media screen and (min-width: 900px){.stzh-pagetitle--has-image.sc-stzh-pagetitle .stzh-pagetitle__wrapper.sc-stzh-pagetitle{grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--stzh-space-xxlarge)}}.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-tag.sc-stzh-pagetitle .stzh-pagetitle__readspeaker.sc-stzh-pagetitle{--stzh-readspeaker-dropdown-left:auto;--stzh-readspeaker-dropdown-right:0px;--stzh-readspeaker-dropdown-settings-left:auto;--stzh-readspeaker-dropdown-settings-right:0px}}.stzh-pagetitle--background-default.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{--stzh-selection-background-color:var(--stzh-color-white)}.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-pagetitle--hyphens.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle{-webkit-hyphens:auto;hyphens:auto}";
|
|
11
11
|
|
|
12
12
|
const StzhPagetitle = class {
|
|
13
13
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"stzh-pagetitle.entry.cjs.js","mappings":"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","names":["media","setPropsIfNull","hasSlot","h","Host"],"sources":["src/components/stzh-pagetitle/stzh-pagetitle.scss?tag=stzh-pagetitle&encapsulation=scoped","src/components/stzh-pagetitle/stzh-pagetitle.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color\n * @prop --image-background-color: Background color of image\n *\n * @prop --stzh-pagetitle-disturber-height: Global: Disturber height\n * @prop --stzh-pagetitle-disturber-stuck-height: Global: Disturber height when sticky (below medium breakpoint)\n * @prop --stzh-pagetitle-disturber-is-stuck: **Global**: Whether disturber is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-disturber-is-not-stuck: **Global**: Whether disturber is currently not sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-background-color: **Global**: Background color of pagetitle.\n */\n\n:host {\n --background-color: var(--stzh-pagetitle-background-color, #{$pagetitleBackgroundColor});\n --image-background-color: #{$ratioBackgroundColor};\n\n ::slotted([slot=\"image\"]) {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n &[background=\"default\"] {\n --stzh-readspeaker-background-color: var(--background-color);\n --stzh-readspeaker-audio-track-progress-background-color: #{$colorWhite};\n }\n\n &[background=\"transparent\"] {\n --background-color: transparent;\n }\n}\n\n.stzh-pagetitle {\n background-color: var(--background-color);\n\n &__container {\n @include container;\n }\n\n &__wrapper {\n position: relative;\n display: grid;\n }\n\n &__text {\n @include spaceCurve('padding-top', 'big');\n @include spaceCurve('padding-bottom', 'big');\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n &__image-wrapper {\n position: relative;\n }\n\n &__ratio {\n --background-color: var(--image-background-color);\n }\n\n &__image-inner-wrapper {\n background-color: var(--image-background-color);\n position: absolute;\n inset: 0;\n height: 100%;\n margin-left: calc(#{$containerMargin} / -1);\n margin-right: calc(#{$containerMargin} / -1);\n\n @include mq($from: small) {\n margin-left: calc(#{$containerMarginSmall} / -1);\n margin-right: calc(#{$containerMarginSmall} / -1);\n }\n\n @include mq($from: medium) {\n margin-left: 0;\n margin-right: 0;\n width: calc(100% + #{$containerMarginMedium});\n }\n\n @include mq($from: large) {\n width: calc(100% + #{$containerMarginLarge});\n }\n\n @include mq($from: ultra) {\n width: calc(100% + ((#{map-get($breakpoints, 'ultra')} - #{$containerMaxWidth}) / 2));\n }\n }\n\n &__meta {\n display: flex;\n flex-direction: column-reverse;\n row-gap: space('xsmall');\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n &__tag {\n &:not(:empty) {\n margin-right: auto;\n }\n }\n\n &__readspeaker {\n @include mq($from: small, $to: medium) {\n --stzh-readspeaker-dropdown-position: relative;\n --stzh-readspeaker-dropdown-top: auto;\n }\n }\n\n &__dateline {\n @include fontSize('milli');\n @include spaceCurve('margin-top', 'regular');\n color: $colorPrimary70;\n margin-bottom: space('xsmall');\n }\n\n &__lead {\n --stzh-base-lead-color: #{$headingColor};\n }\n\n &__heading:not(:empty) + &__lead:not(:empty) {\n @include spaceCurve('margin-top', 'medium');\n }\n\n &__disturber {\n z-index: $zIndexSticky;\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n\n @include mq($from: medium) {\n z-index: initial;\n position: absolute;\n width: calc(((100% - 7 * #{$gridGutterMedium}) / 8 * 3) + 2 * #{$gridGutterMedium});\n left: auto;\n bottom: calc((#{spaceCurveValue('huge', 'medium')} - #{spaceCurveValue('regular', 'medium')}) / -1);\n }\n\n @include mq($from: large) {\n width: calc(((100% - 11 * #{$gridGutterLarge}) / 12 * 4) + 3 * #{$gridGutterLarge});\n bottom: calc(#{spaceCurveValue('huge', 'large')} / -1);\n }\n\n @include mq($from: ultra) {\n width: calc(((100% - 11 * #{$gridGutterUltra}) / 12 * 4) + 3 * #{$gridGutterUltra});\n }\n }\n\n /* Has no image variant */\n\n &--has-no-image &__ratio {\n display: none;\n }\n\n &--has-no-image &__text {\n @include grid;\n }\n\n &--has-no-image &__meta,\n &--has-no-image &__dateline,\n &--has-no-image &__heading,\n &--has-no-image &__lead {\n grid-column: 1 / span 4;\n }\n\n &--has-no-image &__meta,\n &--has-no-image &__dateline,\n &--has-no-image &__heading {\n @include mq($from: medium) {\n grid-column: 1 / span 8;\n }\n }\n\n &--has-no-image &__lead {\n @include mq($from: medium) {\n grid-column: 1 / span 6;\n }\n\n @include mq($from: large) {\n grid-column: 1 / span 7;\n }\n }\n\n /* Has image variant */\n\n &--has-image &__wrapper {\n @include mq($from: medium) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: space('xxlarge');\n }\n }\n\n /* Has meta */\n\n &--has-meta &__text {\n @include spaceCurve('padding-top', 'regular');\n }\n\n /* Has tag */\n\n &--has-tag &__readspeaker {\n @include mq($from: medium) {\n --stzh-readspeaker-dropdown-left: auto;\n --stzh-readspeaker-dropdown-right: 0px;\n\n --stzh-readspeaker-dropdown-settings-left: auto;\n --stzh-readspeaker-dropdown-settings-right: 0px;\n }\n }\n\n /* Default background */\n\n &--background-default &__text {\n --stzh-selection-background-color: #{$colorWhite};\n }\n\n /* Transparent background */\n\n &--background-transparent &__text {\n @include spaceCurve('padding-bottom', 'large');\n }\n\n /* Hyphens */\n &--hyphens &__heading {\n hyphens: auto;\n }\n}\n","import { Component, Element, h, Host, Listen, Prop } from \"@stencil/core\";\n\nimport { StzhDisturberCloseEvent, StzhDisturberOpenEvent } from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot tag - Slot for `stzh-tag` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n * @slot disturber - Slot for disturber content\n */\n@Component({\n tag: \"stzh-pagetitle\",\n styleUrl: \"stzh-pagetitle.scss\",\n scoped: true,\n})\nexport class StzhPagetitle {\n @Element() element: HTMLStzhPagetitleElement;\n\n /** Background color */\n @Prop({ reflect: true }) background: \"default\" | \"transparent\" = \"default\";\n\n /** Automatic Hyphens */\n @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n /** Dateline */\n @Prop() dateline: string;\n\n @Listen(\"resize\", { target: \"window\" })\n handleResize() {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.update);\n }\n\n @Listen(\"stzhOpen\")\n handleStzhOpen(event: CustomEvent<StzhDisturberOpenEvent>) {\n if (event.detail.component === \"stzh-disturber\") {\n this.isDisturberOpen = true;\n requestAnimationFrame(() => {\n requestAnimationFrame(this.update);\n });\n }\n }\n\n @Listen(\"stzhClose\")\n handleStzhClose(event: CustomEvent<StzhDisturberCloseEvent>) {\n if (event.detail.component === \"stzh-disturber\") {\n this.isDisturberOpen = false;\n requestAnimationFrame(() => {\n requestAnimationFrame(this.update);\n });\n }\n }\n\n private observer: MutationObserver;\n private debounceResize: number;\n private disturberElement: HTMLDivElement;\n private isDisturberOpen: boolean = false;\n\n private update = () => {\n if (!this.disturberElement) {\n return;\n }\n\n const isMedium = media(\"medium\").matches;\n const disturberHeight = this.disturberElement?.offsetHeight || 0;\n const hasDisturber = disturberHeight && this.isDisturberOpen;\n const isStuck = hasDisturber && !isMedium;\n\n document.documentElement.style.setProperty(\n \"--stzh-pagetitle-disturber-height\",\n hasDisturber ? `${disturberHeight}px` : \"0px\"\n );\n document.documentElement.style.setProperty(\n \"--stzh-pagetitle-disturber-stuck-height\",\n isStuck ? `${disturberHeight}px` : \"0px\"\n );\n document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-stuck\", isStuck ? \"1\" : \"0\");\n document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-not-stuck\", isStuck ? \"0\" : \"1\");\n\n // document.documentElement.classList.toggle(\"stzh-pagetitle-disturber-is-stuck\", isStuck);\n };\n\n private init = () => {\n const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n const disturber = this.element.querySelector('stzh-disturber[slot=\"disturber\"], [slot=\"disturber\"] stzh-disturber');\n const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n const show = this.element.querySelector('stzh-show[slot=\"disturber\"], [slot=\"disturber\"] stzh-show');\n const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n const tag = this.element.querySelector('stzh-tag[slot=\"tag\"], [slot=\"tag\"] stzh-tag');\n\n if (heading) {\n setPropsIfNull(heading, {\n curve: \"hero\",\n level: \"1\",\n } as HTMLStzhHeadingElement);\n }\n\n if (disturber) {\n setPropsIfNull(disturber, {\n initialOpenAnimation: true,\n } as HTMLStzhDisturberElement);\n }\n\n if (show) {\n setPropsIfNull(show, {\n mikro: true,\n } as HTMLStzhShowElement);\n }\n\n if (tag) {\n setPropsIfNull(tag, {\n type: \"secondary\",\n size: \"large\",\n nonInteractive: true,\n } as HTMLStzhTagElement);\n }\n\n if (readspeakerButton) {\n setPropsIfNull(readspeakerButton, {\n variant: \"tertiary-plain\",\n noPaddingLeft: true,\n noPaddingRight: true,\n size: \"small\",\n sizeMedium: \"tiny\",\n buttonAccesskey: \"L\",\n } as HTMLStzhButtonElement);\n }\n\n leads.forEach(lead => {\n setPropsIfNull(lead, {\n lead: true,\n } as HTMLStzhTextElement);\n });\n };\n\n componentDidRender() {\n requestAnimationFrame(() => {\n requestAnimationFrame(this.update);\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 this.observer?.disconnect();\n }\n\n render() {\n const imageSlotUsed = hasSlot(this.element, \"image\");\n const leadSlotUsed = hasSlot(this.element, \"lead\");\n const tagSlotUsed = hasSlot(this.element, \"tag\");\n const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n\n const classes = {\n \"stzh-pagetitle\": true,\n \"stzh-pagetitle--has-image\": imageSlotUsed,\n \"stzh-pagetitle--has-no-image\": !imageSlotUsed,\n \"stzh-pagetitle--has-lead\": leadSlotUsed,\n \"stzh-pagetitle--has-tag\": tagSlotUsed,\n \"stzh-pagetitle--has-meta\": tagSlotUsed || readspeakerSlotUsed,\n \"stzh-pagetitle--hyphens\": this.hyphensEnabled,\n [`stzh-pagetitle--background-${this.background}`]: !!this.background,\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-pagetitle__container\">\n <div class=\"stzh-pagetitle__wrapper\">\n <div class=\"stzh-pagetitle__text\">\n <div class=\"stzh-pagetitle__meta\">\n <div class=\"stzh-pagetitle__tag\">\n <slot name=\"tag\"></slot>\n </div>\n\n <div class=\"stzh-pagetitle__readspeaker\">\n <slot name=\"readspeaker\"></slot>\n </div>\n </div>\n\n {this.dateline && <div class=\"stzh-pagetitle__dateline\">{this.dateline}</div>}\n\n <div class=\"stzh-pagetitle__heading\">\n <slot name=\"heading\"></slot>\n </div>\n\n <div class=\"stzh-pagetitle__lead\">\n <slot name=\"lead\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-pagetitle__image-wrapper\">\n <stzh-ratio\n ratio={\"16:9\"}\n ratioSmall={\"3:2\"}\n ratioMedium={\"16:9\"}\n class=\"stzh-pagetitle__ratio\"\n ></stzh-ratio>\n <div class=\"stzh-pagetitle__image-inner-wrapper\">\n <slot name=\"image\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-pagetitle__disturber\" ref={el => (this.disturberElement = el as HTMLDivElement)}>\n <slot name=\"disturber\"></slot>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"stzh-pagetitle.entry.cjs.js","mappings":"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","names":["media","setPropsIfNull","hasSlot","h","Host"],"sources":["src/components/stzh-pagetitle/stzh-pagetitle.scss?tag=stzh-pagetitle&encapsulation=scoped","src/components/stzh-pagetitle/stzh-pagetitle.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color\n * @prop --image-background-color: Background color of image\n *\n * @prop --stzh-pagetitle-disturber-height: Global: Disturber height\n * @prop --stzh-pagetitle-disturber-stuck-height: Global: Disturber height when sticky (below medium breakpoint)\n * @prop --stzh-pagetitle-disturber-is-stuck: **Global**: Whether disturber is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-disturber-is-not-stuck: **Global**: Whether disturber is currently not sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-background-color: **Global**: Background color of pagetitle.\n */\n\n:host {\n --background-color: var(--stzh-pagetitle-background-color, #{$pagetitleBackgroundColor});\n --image-background-color: #{$ratioBackgroundColor};\n\n ::slotted([slot=\"image\"]) {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n &[background=\"default\"] {\n --stzh-readspeaker-background-color: var(--background-color);\n --stzh-readspeaker-audio-track-progress-background-color: #{$colorWhite};\n }\n\n &[background=\"transparent\"] {\n --background-color: transparent;\n }\n}\n\n.stzh-pagetitle {\n background-color: var(--background-color);\n\n &__container {\n @include container;\n }\n\n &__wrapper {\n position: relative;\n display: grid;\n }\n\n &__text {\n @include spaceCurve('padding-top', 'big');\n @include spaceCurve('padding-bottom', 'big');\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n &__image-wrapper {\n position: relative;\n }\n\n &__ratio {\n --background-color: var(--image-background-color);\n }\n\n &__image-inner-wrapper {\n background-color: var(--image-background-color);\n position: absolute;\n inset: 0;\n height: 100%;\n margin-left: calc(#{$containerMargin} / -1);\n margin-right: calc(#{$containerMargin} / -1);\n\n @include mq($from: small) {\n margin-left: calc(#{$containerMarginSmall} / -1);\n margin-right: calc(#{$containerMarginSmall} / -1);\n }\n\n @include mq($from: medium) {\n margin-left: 0;\n margin-right: 0;\n width: calc(100% + #{$containerMarginMedium});\n }\n\n @include mq($from: large) {\n width: calc(100% + #{$containerMarginLarge});\n }\n\n @include mq($from: ultra) {\n width: calc(100% + ((#{map-get($breakpoints, 'ultra')} - #{$containerMaxWidth}) / 2));\n }\n }\n\n &__meta {\n display: flex;\n flex-direction: column-reverse;\n row-gap: space('xsmall');\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n &__tag {\n &:not(:empty) {\n margin-right: auto;\n }\n }\n\n &__readspeaker {\n @include mq($from: small, $to: medium) {\n --stzh-readspeaker-dropdown-position: relative;\n --stzh-readspeaker-dropdown-top: auto;\n }\n }\n\n &__dateline {\n @include fontSize('milli');\n @include spaceCurve('margin-top', 'regular');\n color: $colorPrimary70;\n margin-bottom: space('xsmall');\n }\n\n &__lead {\n --stzh-base-lead-color: #{$headingColor};\n }\n\n &__heading:not(:empty) + &__lead:not(:empty) {\n @include spaceCurve('margin-top', 'medium');\n }\n\n &__disturber {\n z-index: $zIndexSticky;\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n\n @include mq($from: medium) {\n z-index: initial;\n position: absolute;\n width: calc(((100% - 7 * #{$gridGutterMedium}) / 8 * 3) + 2 * #{$gridGutterMedium});\n left: auto;\n bottom: calc((#{spaceCurveValue('huge', 'medium')} - #{spaceCurveValue('regular', 'medium')}) / -1);\n }\n\n @include mq($from: large) {\n width: calc(((100% - 11 * #{$gridGutterLarge}) / 12 * 4) + 3 * #{$gridGutterLarge});\n // bottom: calc(#{spaceCurveValue('huge', 'large')} / -1);\n }\n\n @include mq($from: ultra) {\n width: calc(((100% - 11 * #{$gridGutterUltra}) / 12 * 4) + 3 * #{$gridGutterUltra});\n }\n }\n\n /* Has no image variant */\n\n &--has-no-image &__ratio {\n display: none;\n }\n\n &--has-no-image &__text {\n @include grid;\n }\n\n &--has-no-image &__meta,\n &--has-no-image &__dateline,\n &--has-no-image &__heading,\n &--has-no-image &__lead {\n grid-column: 1 / span 4;\n }\n\n &--has-no-image &__meta,\n &--has-no-image &__dateline,\n &--has-no-image &__heading {\n @include mq($from: medium) {\n grid-column: 1 / span 8;\n }\n }\n\n &--has-no-image &__lead {\n @include mq($from: medium) {\n grid-column: 1 / span 6;\n }\n\n @include mq($from: large) {\n grid-column: 1 / span 7;\n }\n }\n\n /* Has image variant */\n\n &--has-image &__wrapper {\n @include mq($from: medium) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: space('xxlarge');\n }\n }\n\n /* Has meta */\n\n &--has-meta &__text {\n @include spaceCurve('padding-top', 'regular');\n }\n\n /* Has tag */\n\n &--has-tag &__readspeaker {\n @include mq($from: medium) {\n --stzh-readspeaker-dropdown-left: auto;\n --stzh-readspeaker-dropdown-right: 0px;\n\n --stzh-readspeaker-dropdown-settings-left: auto;\n --stzh-readspeaker-dropdown-settings-right: 0px;\n }\n }\n\n /* Default background */\n\n &--background-default &__text {\n --stzh-selection-background-color: #{$colorWhite};\n }\n\n /* Transparent background */\n\n &--background-transparent &__text {\n @include spaceCurve('padding-bottom', 'large');\n }\n\n /* Hyphens */\n &--hyphens &__heading {\n hyphens: auto;\n }\n}\n","import { Component, Element, h, Host, Listen, Prop } from \"@stencil/core\";\n\nimport { StzhDisturberCloseEvent, StzhDisturberOpenEvent } from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot tag - Slot for `stzh-tag` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n * @slot disturber - Slot for disturber content\n */\n@Component({\n tag: \"stzh-pagetitle\",\n styleUrl: \"stzh-pagetitle.scss\",\n scoped: true,\n})\nexport class StzhPagetitle {\n @Element() element: HTMLStzhPagetitleElement;\n\n /** Background color */\n @Prop({ reflect: true }) background: \"default\" | \"transparent\" = \"default\";\n\n /** Automatic Hyphens */\n @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n /** Dateline */\n @Prop() dateline: string;\n\n @Listen(\"resize\", { target: \"window\" })\n handleResize() {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.update);\n }\n\n @Listen(\"stzhOpen\")\n handleStzhOpen(event: CustomEvent<StzhDisturberOpenEvent>) {\n if (event.detail.component === \"stzh-disturber\") {\n this.isDisturberOpen = true;\n requestAnimationFrame(() => {\n requestAnimationFrame(this.update);\n });\n }\n }\n\n @Listen(\"stzhClose\")\n handleStzhClose(event: CustomEvent<StzhDisturberCloseEvent>) {\n if (event.detail.component === \"stzh-disturber\") {\n this.isDisturberOpen = false;\n requestAnimationFrame(() => {\n requestAnimationFrame(this.update);\n });\n }\n }\n\n private observer: MutationObserver;\n private debounceResize: number;\n private disturberElement: HTMLDivElement;\n private isDisturberOpen: boolean = false;\n\n private update = () => {\n if (!this.disturberElement) {\n return;\n }\n\n const isMedium = media(\"medium\").matches;\n const disturberHeight = this.disturberElement?.offsetHeight || 0;\n const hasDisturber = disturberHeight && this.isDisturberOpen;\n const isStuck = hasDisturber && !isMedium;\n\n document.documentElement.style.setProperty(\n \"--stzh-pagetitle-disturber-height\",\n hasDisturber ? `${disturberHeight}px` : \"0px\"\n );\n document.documentElement.style.setProperty(\n \"--stzh-pagetitle-disturber-stuck-height\",\n isStuck ? `${disturberHeight}px` : \"0px\"\n );\n document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-stuck\", isStuck ? \"1\" : \"0\");\n document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-not-stuck\", isStuck ? \"0\" : \"1\");\n\n // document.documentElement.classList.toggle(\"stzh-pagetitle-disturber-is-stuck\", isStuck);\n };\n\n private init = () => {\n const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n const disturber = this.element.querySelector('stzh-disturber[slot=\"disturber\"], [slot=\"disturber\"] stzh-disturber');\n const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n const show = this.element.querySelector('stzh-show[slot=\"disturber\"], [slot=\"disturber\"] stzh-show');\n const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n const tag = this.element.querySelector('stzh-tag[slot=\"tag\"], [slot=\"tag\"] stzh-tag');\n\n if (heading) {\n setPropsIfNull(heading, {\n curve: \"hero\",\n level: \"1\",\n } as HTMLStzhHeadingElement);\n }\n\n if (disturber) {\n setPropsIfNull(disturber, {\n initialOpenAnimation: true,\n } as HTMLStzhDisturberElement);\n }\n\n if (show) {\n setPropsIfNull(show, {\n mikro: true,\n } as HTMLStzhShowElement);\n }\n\n if (tag) {\n setPropsIfNull(tag, {\n type: \"secondary\",\n size: \"large\",\n nonInteractive: true,\n } as HTMLStzhTagElement);\n }\n\n if (readspeakerButton) {\n setPropsIfNull(readspeakerButton, {\n variant: \"tertiary-plain\",\n noPaddingLeft: true,\n noPaddingRight: true,\n size: \"small\",\n sizeMedium: \"tiny\",\n buttonAccesskey: \"L\",\n } as HTMLStzhButtonElement);\n }\n\n leads.forEach(lead => {\n setPropsIfNull(lead, {\n lead: true,\n } as HTMLStzhTextElement);\n });\n };\n\n componentDidRender() {\n requestAnimationFrame(() => {\n requestAnimationFrame(this.update);\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 this.observer?.disconnect();\n }\n\n render() {\n const imageSlotUsed = hasSlot(this.element, \"image\");\n const leadSlotUsed = hasSlot(this.element, \"lead\");\n const tagSlotUsed = hasSlot(this.element, \"tag\");\n const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n\n const classes = {\n \"stzh-pagetitle\": true,\n \"stzh-pagetitle--has-image\": imageSlotUsed,\n \"stzh-pagetitle--has-no-image\": !imageSlotUsed,\n \"stzh-pagetitle--has-lead\": leadSlotUsed,\n \"stzh-pagetitle--has-tag\": tagSlotUsed,\n \"stzh-pagetitle--has-meta\": tagSlotUsed || readspeakerSlotUsed,\n \"stzh-pagetitle--hyphens\": this.hyphensEnabled,\n [`stzh-pagetitle--background-${this.background}`]: !!this.background,\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-pagetitle__container\">\n <div class=\"stzh-pagetitle__wrapper\">\n <div class=\"stzh-pagetitle__text\">\n <div class=\"stzh-pagetitle__meta\">\n <div class=\"stzh-pagetitle__tag\">\n <slot name=\"tag\"></slot>\n </div>\n\n <div class=\"stzh-pagetitle__readspeaker\">\n <slot name=\"readspeaker\"></slot>\n </div>\n </div>\n\n {this.dateline && <div class=\"stzh-pagetitle__dateline\">{this.dateline}</div>}\n\n <div class=\"stzh-pagetitle__heading\">\n <slot name=\"heading\"></slot>\n </div>\n\n <div class=\"stzh-pagetitle__lead\">\n <slot name=\"lead\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-pagetitle__image-wrapper\">\n <stzh-ratio\n ratio={\"16:9\"}\n ratioSmall={\"3:2\"}\n ratioMedium={\"16:9\"}\n class=\"stzh-pagetitle__ratio\"\n ></stzh-ratio>\n <div class=\"stzh-pagetitle__image-inner-wrapper\">\n <slot name=\"image\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-pagetitle__disturber\" ref={el => (this.disturberElement = el as HTMLDivElement)}>\n <slot name=\"disturber\"></slot>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-92254d32.js');
|
|
6
6
|
|
|
7
|
-
const stzhRowCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{width:100%;--row-gap:var(--stzh-row-row-gap, 0px)}:host([span=\"1\"]) ::slotted(stzh-cell
|
|
7
|
+
const stzhRowCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{width:100%;--row-gap:var(--stzh-row-row-gap, 0px)}:host([span=\"1\"]) ::slotted(stzh-cell){flex:0 0 8.3333333333%;max-width:8.3333333333%}:host([span=\"2\"]) ::slotted(stzh-cell){flex:0 0 16.6666666667%;max-width:16.6666666667%}:host([span=\"3\"]) ::slotted(stzh-cell){flex:0 0 25%;max-width:25%}:host([span=\"4\"]) ::slotted(stzh-cell){flex:0 0 33.3333333333%;max-width:33.3333333333%}:host([span=\"5\"]) ::slotted(stzh-cell){flex:0 0 41.6666666667%;max-width:41.6666666667%}:host([span=\"6\"]) ::slotted(stzh-cell){flex:0 0 50%;max-width:50%}:host([span=\"7\"]) ::slotted(stzh-cell){flex:0 0 58.3333333333%;max-width:58.3333333333%}:host([span=\"8\"]) ::slotted(stzh-cell){flex:0 0 66.6666666667%;max-width:66.6666666667%}:host([span=\"9\"]) ::slotted(stzh-cell){flex:0 0 75%;max-width:75%}:host([span=\"10\"]) ::slotted(stzh-cell){flex:0 0 83.3333333333%;max-width:83.3333333333%}:host([span=\"11\"]) ::slotted(stzh-cell){flex:0 0 91.6666666667%;max-width:91.6666666667%}:host([span=\"12\"]) ::slotted(stzh-cell){flex:0 0 100%;max-width:100%}@media (min-width: 600px){:host([span-small=\"1\"]) ::slotted(stzh-cell){flex:0 0 8.3333333333%;max-width:8.3333333333%}:host([span-small=\"2\"]) ::slotted(stzh-cell){flex:0 0 16.6666666667%;max-width:16.6666666667%}:host([span-small=\"3\"]) ::slotted(stzh-cell){flex:0 0 25%;max-width:25%}:host([span-small=\"4\"]) ::slotted(stzh-cell){flex:0 0 33.3333333333%;max-width:33.3333333333%}:host([span-small=\"5\"]) ::slotted(stzh-cell){flex:0 0 41.6666666667%;max-width:41.6666666667%}:host([span-small=\"6\"]) ::slotted(stzh-cell){flex:0 0 50%;max-width:50%}:host([span-small=\"7\"]) ::slotted(stzh-cell){flex:0 0 58.3333333333%;max-width:58.3333333333%}:host([span-small=\"8\"]) ::slotted(stzh-cell){flex:0 0 66.6666666667%;max-width:66.6666666667%}:host([span-small=\"9\"]) ::slotted(stzh-cell){flex:0 0 75%;max-width:75%}:host([span-small=\"10\"]) ::slotted(stzh-cell){flex:0 0 83.3333333333%;max-width:83.3333333333%}:host([span-small=\"11\"]) ::slotted(stzh-cell){flex:0 0 91.6666666667%;max-width:91.6666666667%}:host([span-small=\"12\"]) ::slotted(stzh-cell){flex:0 0 100%;max-width:100%}}@media (min-width: 900px){:host([span-medium=\"1\"]) ::slotted(stzh-cell){flex:0 0 8.3333333333%;max-width:8.3333333333%}:host([span-medium=\"2\"]) ::slotted(stzh-cell){flex:0 0 16.6666666667%;max-width:16.6666666667%}:host([span-medium=\"3\"]) ::slotted(stzh-cell){flex:0 0 25%;max-width:25%}:host([span-medium=\"4\"]) ::slotted(stzh-cell){flex:0 0 33.3333333333%;max-width:33.3333333333%}:host([span-medium=\"5\"]) ::slotted(stzh-cell){flex:0 0 41.6666666667%;max-width:41.6666666667%}:host([span-medium=\"6\"]) ::slotted(stzh-cell){flex:0 0 50%;max-width:50%}:host([span-medium=\"7\"]) ::slotted(stzh-cell){flex:0 0 58.3333333333%;max-width:58.3333333333%}:host([span-medium=\"8\"]) ::slotted(stzh-cell){flex:0 0 66.6666666667%;max-width:66.6666666667%}:host([span-medium=\"9\"]) ::slotted(stzh-cell){flex:0 0 75%;max-width:75%}:host([span-medium=\"10\"]) ::slotted(stzh-cell){flex:0 0 83.3333333333%;max-width:83.3333333333%}:host([span-medium=\"11\"]) ::slotted(stzh-cell){flex:0 0 91.6666666667%;max-width:91.6666666667%}:host([span-medium=\"12\"]) ::slotted(stzh-cell){flex:0 0 100%;max-width:100%}}@media (min-width: 1260px){:host([span-large=\"1\"]) ::slotted(stzh-cell){flex:0 0 8.3333333333%;max-width:8.3333333333%}:host([span-large=\"2\"]) ::slotted(stzh-cell){flex:0 0 16.6666666667%;max-width:16.6666666667%}:host([span-large=\"3\"]) ::slotted(stzh-cell){flex:0 0 25%;max-width:25%}:host([span-large=\"4\"]) ::slotted(stzh-cell){flex:0 0 33.3333333333%;max-width:33.3333333333%}:host([span-large=\"5\"]) ::slotted(stzh-cell){flex:0 0 41.6666666667%;max-width:41.6666666667%}:host([span-large=\"6\"]) ::slotted(stzh-cell){flex:0 0 50%;max-width:50%}:host([span-large=\"7\"]) ::slotted(stzh-cell){flex:0 0 58.3333333333%;max-width:58.3333333333%}:host([span-large=\"8\"]) ::slotted(stzh-cell){flex:0 0 66.6666666667%;max-width:66.6666666667%}:host([span-large=\"9\"]) ::slotted(stzh-cell){flex:0 0 75%;max-width:75%}:host([span-large=\"10\"]) ::slotted(stzh-cell){flex:0 0 83.3333333333%;max-width:83.3333333333%}:host([span-large=\"11\"]) ::slotted(stzh-cell){flex:0 0 91.6666666667%;max-width:91.6666666667%}:host([span-large=\"12\"]) ::slotted(stzh-cell){flex:0 0 100%;max-width:100%}}@media (min-width: 1600px){:host([span-ultra=\"1\"]) ::slotted(stzh-cell){flex:0 0 8.3333333333%;max-width:8.3333333333%}:host([span-ultra=\"2\"]) ::slotted(stzh-cell){flex:0 0 16.6666666667%;max-width:16.6666666667%}:host([span-ultra=\"3\"]) ::slotted(stzh-cell){flex:0 0 25%;max-width:25%}:host([span-ultra=\"4\"]) ::slotted(stzh-cell){flex:0 0 33.3333333333%;max-width:33.3333333333%}:host([span-ultra=\"5\"]) ::slotted(stzh-cell){flex:0 0 41.6666666667%;max-width:41.6666666667%}:host([span-ultra=\"6\"]) ::slotted(stzh-cell){flex:0 0 50%;max-width:50%}:host([span-ultra=\"7\"]) ::slotted(stzh-cell){flex:0 0 58.3333333333%;max-width:58.3333333333%}:host([span-ultra=\"8\"]) ::slotted(stzh-cell){flex:0 0 66.6666666667%;max-width:66.6666666667%}:host([span-ultra=\"9\"]) ::slotted(stzh-cell){flex:0 0 75%;max-width:75%}:host([span-ultra=\"10\"]) ::slotted(stzh-cell){flex:0 0 83.3333333333%;max-width:83.3333333333%}:host([span-ultra=\"11\"]) ::slotted(stzh-cell){flex:0 0 91.6666666667%;max-width:91.6666666667%}:host([span-ultra=\"12\"]) ::slotted(stzh-cell){flex:0 0 100%;max-width:100%}}.stzh-row{display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:var(--row-gap);margin-left:calc(var(--stzh-grid-gutter) / -2);margin-right:calc(var(--stzh-grid-gutter) / -2);}.stzh-row--justify-end{justify-content:flex-end}.stzh-row--justify-center{justify-content:center}.stzh-row--justify-between{justify-content:space-between}.stzh-row--justify-around{justify-content:space-around}.stzh-row--justify-evenly{justify-content:space-evenly}.stzh-row--items-end{align-items:flex-end}.stzh-row--items-center{align-items:center}.stzh-row--items-baseline{align-items:baseline}.stzh-row--items-stretch{align-items:stretch}.stzh-row--content-end{align-content:flex-end}.stzh-row--content-center{align-content:center}.stzh-row--content-between{align-content:space-between}.stzh-row--content-around{align-content:space-around}.stzh-row--content-evenly{align-content:space-evenly}";
|
|
8
8
|
|
|
9
9
|
const StzhRow = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"stzh-row.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,
|
|
1
|
+
{"file":"stzh-row.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,8pOAA8pO;;MCiBpqO,OAAO;;;gBAEsB,EAAE;;;;;mBAWS,OAAO;iBAGX,OAAO;mBAGH,OAAO;;EAE1D,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBACE,KAAK,EAAE;QACL,UAAU,EAAE,IAAI;QAChB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACrD,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;QAC/C,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;OACtD,IAEDA,qBAAa,CACT,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","src/components/stzh-row/stzh-row.tsx"],"sourcesContent":[":host {\n width: 100%;\n\n --row-gap: var(--stzh-row-row-gap, 0px);\n}\n\n@for $i from 1 through $gridCells {\n // Standard span\n :host([span=\"#{$i}\"]) ::slotted(stzh-cell) {\n flex: 0 0 #{100% / $gridCells * $i};\n max-width: #{100% / $gridCells * $i};\n }\n}\n\n// Small breakpoint\n@media (min-width: 600px) {\n @for $i from 1 through $gridCells {\n :host([span-small=\"#{$i}\"]) ::slotted(stzh-cell) {\n flex: 0 0 #{100% / $gridCells * $i};\n max-width: #{100% / $gridCells * $i};\n }\n }\n}\n\n// Medium breakpoint\n@media (min-width: 900px) {\n @for $i from 1 through $gridCells {\n :host([span-medium=\"#{$i}\"]) ::slotted(stzh-cell) {\n flex: 0 0 #{100% / $gridCells * $i};\n max-width: #{100% / $gridCells * $i};\n }\n }\n}\n\n// Large breakpoint\n@media (min-width: 1260px) {\n @for $i from 1 through $gridCells {\n :host([span-large=\"#{$i}\"]) ::slotted(stzh-cell) {\n flex: 0 0 #{100% / $gridCells * $i};\n max-width: #{100% / $gridCells * $i};\n }\n }\n}\n\n// Ultra breakpoint\n@media (min-width: 1600px) {\n @for $i from 1 through $gridCells {\n :host([span-ultra=\"#{$i}\"]) ::slotted(stzh-cell) {\n flex: 0 0 #{100% / $gridCells * $i};\n max-width: #{100% / $gridCells * $i};\n }\n }\n}\n\n.stzh-row {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n row-gap: var(--row-gap);\n margin-left: calc(#{$gridGutter} / -2);\n margin-right: calc(#{$gridGutter} / -2);\n\n /* Justify content variants */\n\n &--justify-end {\n justify-content: flex-end;\n }\n\n &--justify-center {\n justify-content: center;\n }\n\n &--justify-between {\n justify-content: space-between;\n }\n\n &--justify-around {\n justify-content: space-around;\n }\n\n &--justify-evenly {\n justify-content: space-evenly;\n }\n\n /* Align items variants */\n\n &--items-end {\n align-items: flex-end;\n }\n\n &--items-center {\n align-items: center;\n }\n\n &--items-baseline {\n align-items: baseline;\n }\n\n &--items-stretch {\n align-items: stretch;\n }\n\n /* Align content variants */\n\n &--content-end {\n align-content: flex-end;\n }\n\n &--content-center {\n align-content: center;\n }\n\n &--content-between {\n align-content: space-between;\n }\n\n &--content-around {\n align-content: space-around;\n }\n\n &--content-evenly {\n align-content: space-evenly;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-cell` elements\n */\n@Component({\n tag: \"stzh-row\",\n styleUrl: \"stzh-row.scss\",\n shadow: true\n})\nexport class StzhRow {\n /** Default span of each cell */\n @Prop({ reflect: true }) span: number = 12;\n /** Default span of each cell above small breakpoint */\n @Prop({ reflect: true }) spanSmall: number;\n /** Default span of each cell above medium breakpoint */\n @Prop({ reflect: true }) spanMedium: number;\n /** Default span of each cell above large breakpoint */\n @Prop({ reflect: true }) spanLarge: number;\n /** Default span of each cell above ultra breakpoint */\n @Prop({ reflect: true }) spanUltra: number;\n\n /** Controlling how cells are positioned along a container's main axis */\n @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n /** Control how cells items are positioned along a container's cross axis */\n @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n /** Utilities for controlling how rows are positioned in multi-row flex containers. */\n @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-row\": true,\n [`stzh-row--justify-${this.justify}`]: !!this.justify,\n [`stzh-row--items-${this.items}`]: !!this.items,\n [`stzh-row--content-${this.content}`]: !!this.content\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
"components/stzh-amount/stzh-amount.js",
|
|
8
8
|
"components/stzh-anchornav/stzh-anchornav.js",
|
|
9
9
|
"components/stzh-app-bar/stzh-app-bar.js",
|
|
10
|
+
"components/stzh-app-nav/stzh-app-nav.js",
|
|
10
11
|
"components/stzh-appointments/stzh-appointments.js",
|
|
11
12
|
"components/stzh-archivelist/stzh-archivelist.js",
|
|
12
13
|
"components/stzh-audio/stzh-audio.js",
|
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Colors
|
|
3
|
+
*/
|
|
4
|
+
/* Signal colors */
|
|
5
|
+
/* Old colors (TODO: cleanup when not needed anymore) */
|
|
6
|
+
/**
|
|
7
|
+
* Base
|
|
8
|
+
*/
|
|
9
|
+
/**
|
|
10
|
+
* Selection
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* Flyingfocus
|
|
14
|
+
*/
|
|
15
|
+
/**
|
|
16
|
+
* Icons
|
|
17
|
+
*/
|
|
18
|
+
/**
|
|
19
|
+
* Link
|
|
20
|
+
*/
|
|
21
|
+
/**
|
|
22
|
+
* Text
|
|
23
|
+
*/
|
|
24
|
+
/**
|
|
25
|
+
* Section
|
|
26
|
+
*/
|
|
27
|
+
/**
|
|
28
|
+
* Header
|
|
29
|
+
*/
|
|
30
|
+
/**
|
|
31
|
+
* Footer
|
|
32
|
+
*/
|
|
33
|
+
/**
|
|
34
|
+
* Fieldset
|
|
35
|
+
*/
|
|
36
|
+
/**
|
|
37
|
+
* Progressbar
|
|
38
|
+
*/
|
|
39
|
+
/**
|
|
40
|
+
* Loader
|
|
41
|
+
*/
|
|
42
|
+
/**
|
|
43
|
+
* Table
|
|
44
|
+
*/
|
|
45
|
+
/**
|
|
46
|
+
* Heading
|
|
47
|
+
*/
|
|
48
|
+
/**
|
|
49
|
+
* Text
|
|
50
|
+
*/
|
|
51
|
+
/**
|
|
52
|
+
* Menu (Item)
|
|
53
|
+
*/
|
|
54
|
+
/**
|
|
55
|
+
* Form Elements (Input / Checkbox / Radio / Select / Datepicker)
|
|
56
|
+
*/
|
|
57
|
+
/**
|
|
58
|
+
* Popover
|
|
59
|
+
*/
|
|
60
|
+
/**
|
|
61
|
+
* Tooltips
|
|
62
|
+
*/
|
|
63
|
+
/**
|
|
64
|
+
* Dialogs / Popover
|
|
65
|
+
*/
|
|
66
|
+
/**
|
|
67
|
+
* Overlays
|
|
68
|
+
*/
|
|
69
|
+
/**
|
|
70
|
+
* Accordions
|
|
71
|
+
*/
|
|
72
|
+
/**
|
|
73
|
+
* Timeline
|
|
74
|
+
*/
|
|
75
|
+
/**
|
|
76
|
+
* Buttons
|
|
77
|
+
*/
|
|
78
|
+
/**
|
|
79
|
+
* Ratios
|
|
80
|
+
*/
|
|
81
|
+
/**
|
|
82
|
+
* Pagetitle
|
|
83
|
+
*/
|
|
84
|
+
/**
|
|
85
|
+
* TopnewsMostsearched
|
|
86
|
+
*/
|
|
87
|
+
/**
|
|
88
|
+
* Calendar
|
|
89
|
+
*/
|
|
90
|
+
/**
|
|
91
|
+
* Cta
|
|
92
|
+
*/
|
|
93
|
+
/**
|
|
94
|
+
* Toasts
|
|
95
|
+
*/
|
|
96
|
+
/**
|
|
97
|
+
* Box Shadows
|
|
98
|
+
*/
|
|
99
|
+
/**
|
|
100
|
+
* Z-Indexes
|
|
101
|
+
* Inspired by https://www.duetds.com/tokens/#z-index
|
|
102
|
+
*/
|
|
103
|
+
/**
|
|
104
|
+
* Icon sizes
|
|
105
|
+
*/
|
|
106
|
+
/**
|
|
107
|
+
* Grid
|
|
108
|
+
*/
|
|
109
|
+
/**
|
|
110
|
+
* Container
|
|
111
|
+
*/
|
|
112
|
+
/**
|
|
113
|
+
* Breakpoints
|
|
114
|
+
*/
|
|
115
|
+
/**
|
|
116
|
+
* Ratios
|
|
117
|
+
*/
|
|
118
|
+
/**
|
|
119
|
+
* Spaces
|
|
120
|
+
*/
|
|
121
|
+
/**
|
|
122
|
+
* Fonts
|
|
123
|
+
*/
|
|
124
|
+
:host {
|
|
125
|
+
font-family: var(--stzh-font-family-medium);
|
|
126
|
+
font-weight: var(--stzh-font-weight-medium);
|
|
127
|
+
font-style: var(--stzh-font-style-medium);
|
|
128
|
+
color: var(--stzh-base-color);
|
|
129
|
+
box-sizing: border-box;
|
|
130
|
+
display: block;
|
|
131
|
+
/* default outline value, which will be applied to all elements receiving focus
|
|
132
|
+
the .has-focus class is used by the focus target */
|
|
133
|
+
}
|
|
134
|
+
:host[hidden] {
|
|
135
|
+
display: none;
|
|
136
|
+
}
|
|
137
|
+
:host::-moz-selection {
|
|
138
|
+
color: var(--stzh-selection-color);
|
|
139
|
+
background-color: var(--stzh-selection-background-color);
|
|
140
|
+
}
|
|
141
|
+
:host::selection {
|
|
142
|
+
color: var(--stzh-selection-color);
|
|
143
|
+
background-color: var(--stzh-selection-background-color);
|
|
144
|
+
}
|
|
145
|
+
:host *,
|
|
146
|
+
:host *::before,
|
|
147
|
+
:host *::after {
|
|
148
|
+
box-sizing: border-box;
|
|
149
|
+
text-underline-offset: var(--stzh-link-text-underline-offset);
|
|
150
|
+
text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
|
|
151
|
+
-webkit-text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
|
|
152
|
+
text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
|
|
153
|
+
}
|
|
154
|
+
:host .has-focus {
|
|
155
|
+
outline: var(--stzh-flyingfocus-color) solid 0.125rem;
|
|
156
|
+
outline-offset: 0.125rem;
|
|
157
|
+
}
|
|
158
|
+
:host .stzh-fylingfocus-focused {
|
|
159
|
+
outline-style: none !important;
|
|
160
|
+
}
|
|
161
|
+
:host .stzh-fylingfocus-focused::-moz-focus-inner {
|
|
162
|
+
border: 0 !important;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/**
|
|
166
|
+
* @prop --stzh-app-nav-background-color: Background color of app nav links.
|
|
167
|
+
* @prop --stzh-app-nav-color: Text and icon color of app nav links.
|
|
168
|
+
* @prop --stzh-app-nav-color-active: Text and icon color of active app nav links.
|
|
169
|
+
*/
|
|
170
|
+
:host {
|
|
171
|
+
--stzh-app-nav-background-color: var(--stzh-color-coolgrey10);
|
|
172
|
+
--stzh-app-nav-color: var(--stzh-color-coolgrey90);
|
|
173
|
+
--stzh-app-nav-color-active: var(--stzh-color-primary70);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.stzh-app-nav {
|
|
177
|
+
background-color: var(--stzh-app-nav-background-color);
|
|
178
|
+
}
|
|
179
|
+
.stzh-app-nav__links {
|
|
180
|
+
display: flex;
|
|
181
|
+
flex-direction: row;
|
|
182
|
+
justify-content: space-between;
|
|
183
|
+
padding: var(--stzh-space-medium) var(--stzh-space-large) var(--stzh-space-xlarge);
|
|
184
|
+
}
|
|
185
|
+
@media screen and (min-width: 900px) {
|
|
186
|
+
.stzh-app-nav__links {
|
|
187
|
+
padding: 0;
|
|
188
|
+
align-items: center;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
.stzh-app-nav__link {
|
|
192
|
+
--text-decoration-line: none;
|
|
193
|
+
--hover-text-decoration-line: none;
|
|
194
|
+
--color: var(--stzh-app-nav-color);
|
|
195
|
+
}
|
|
196
|
+
@media screen and (min-width: 900px) {
|
|
197
|
+
.stzh-app-nav__link {
|
|
198
|
+
margin-right: var(--stzh-space-xlarge);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
.stzh-app-nav__link::last-child {
|
|
202
|
+
margin-right: 0;
|
|
203
|
+
}
|
|
204
|
+
.stzh-app-nav .stzh-link--is-active {
|
|
205
|
+
text-decoration: none;
|
|
206
|
+
--color: var(--stzh-app-nav-color-active);
|
|
207
|
+
}
|
|
208
|
+
@media screen and (min-width: 900px) {
|
|
209
|
+
.stzh-app-nav .stzh-link--is-active {
|
|
210
|
+
font-family: var(--stzh-font-family-heavy);
|
|
211
|
+
font-weight: var(--stzh-font-weight-heavy);
|
|
212
|
+
font-style: var(--stzh-font-style-heavy);
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
.stzh-app-nav .stzh-link__inner {
|
|
216
|
+
flex-direction: column;
|
|
217
|
+
}
|
|
218
|
+
@media screen and (min-width: 900px) {
|
|
219
|
+
.stzh-app-nav .stzh-link__inner {
|
|
220
|
+
flex-direction: row;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
.stzh-app-nav .stzh-link__text {
|
|
224
|
+
font-family: var(--stzh-font-family-medium);
|
|
225
|
+
font-weight: var(--stzh-font-weight-medium);
|
|
226
|
+
font-style: var(--stzh-font-style-medium);
|
|
227
|
+
font-size: var(--stzh-font-pico-font-size);
|
|
228
|
+
line-height: var(--stzh-font-pico-text-line-height);
|
|
229
|
+
}
|
|
230
|
+
@media screen and (min-width: 900px) {
|
|
231
|
+
.stzh-app-nav .stzh-link__text {
|
|
232
|
+
font-size: var(--stzh-font-milli-font-size);
|
|
233
|
+
line-height: var(--stzh-font-milli-text-line-height);
|
|
234
|
+
letter-spacing: var(--stzh-font-curve---text-letter-spacing);
|
|
235
|
+
font-weight: var(--stzh-font-weight-medium);
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) + .stzh-link__text.sc-stzh-link:not(:empty), .stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty) + .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) {
|
|
239
|
+
margin-top: var(--stzh-space-xxsmall);
|
|
240
|
+
margin-left: 0;
|
|
241
|
+
}
|
|
242
|
+
@media screen and (min-width: 900px) {
|
|
243
|
+
.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) + .stzh-link__text.sc-stzh-link:not(:empty), .stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty) + .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) {
|
|
244
|
+
margin-left: var(--stzh-space-xsmall);
|
|
245
|
+
margin-top: 0;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { test } from "@playwright/test";
|
|
2
|
+
import { visualDiff } from "../../../.build/test/utils";
|
|
3
|
+
const URL = "components-app-nav";
|
|
4
|
+
const STORIES = ["default"];
|
|
5
|
+
test.describe("app-nav", () => {
|
|
6
|
+
STORIES.forEach((storyId) => {
|
|
7
|
+
test(`story ${storyId} visual diff`, async ({ page }) => {
|
|
8
|
+
await visualDiff({
|
|
9
|
+
storyId,
|
|
10
|
+
page,
|
|
11
|
+
url: URL,
|
|
12
|
+
});
|
|
13
|
+
});
|
|
14
|
+
});
|
|
15
|
+
});
|
|
16
|
+
//# sourceMappingURL=stzh-app-nav.e2e.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stzh-app-nav.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-app-nav/stzh-app-nav.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,oBAAoB,CAAC;AAEjC,MAAM,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC;AAE5B,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EAC5B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;OACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-app-nav\";\n\nconst STORIES = [\"default\"];\n\ntest.describe(\"app-nav\", () => {\n STORIES.forEach((storyId) => {\n test(`story ${storyId} visual diff`, async ({ page }) => {\n await visualDiff({\n storyId,\n page,\n url: URL,\n });\n });\n });\n});\n"]}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { h, Host } from "@stencil/core";
|
|
2
|
+
export class StzhAppNav {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.localization = undefined;
|
|
5
|
+
this.items = [];
|
|
6
|
+
}
|
|
7
|
+
async componentWillLoad() {
|
|
8
|
+
if (!this.localization) {
|
|
9
|
+
this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "appnav");
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
render() {
|
|
13
|
+
const classes = {
|
|
14
|
+
"stzh-app-nav": true,
|
|
15
|
+
};
|
|
16
|
+
return (h(Host, null, h("nav", { role: "navigation", class: classes, "aria-label": this.localization.title }, h("div", { class: "stzh-app-nav__links", role: "list" }, this.items.map((item) => (h("stzh-link", { class: "stzh-app-nav__link", active: item.active, role: "listitem", "a11y-current": item.a11yCurrent, href: item.href, badge: item.badge, badgeType: item.badgeType, icon: item.icon }, item.text)))))));
|
|
17
|
+
}
|
|
18
|
+
static get is() { return "stzh-app-nav"; }
|
|
19
|
+
static get encapsulation() { return "shadow"; }
|
|
20
|
+
static get originalStyleUrls() {
|
|
21
|
+
return {
|
|
22
|
+
"$": ["stzh-app-nav.scss"]
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
static get styleUrls() {
|
|
26
|
+
return {
|
|
27
|
+
"$": ["stzh-app-nav.css"]
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
static get properties() {
|
|
31
|
+
return {
|
|
32
|
+
"localization": {
|
|
33
|
+
"type": "unknown",
|
|
34
|
+
"mutable": false,
|
|
35
|
+
"complexType": {
|
|
36
|
+
"original": "StzhAppNavLocalizedText",
|
|
37
|
+
"resolved": "StzhLocaleComponent & { title: string; }",
|
|
38
|
+
"references": {
|
|
39
|
+
"StzhAppNavLocalizedText": {
|
|
40
|
+
"location": "import",
|
|
41
|
+
"path": "./stzh-app-nav.localization",
|
|
42
|
+
"id": "src/components/stzh-app-nav/stzh-app-nav.localization.ts::StzhAppNavLocalizedText"
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"required": false,
|
|
47
|
+
"optional": false,
|
|
48
|
+
"docs": {
|
|
49
|
+
"tags": [],
|
|
50
|
+
"text": "Translation strings"
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
"items": {
|
|
54
|
+
"type": "unknown",
|
|
55
|
+
"mutable": false,
|
|
56
|
+
"complexType": {
|
|
57
|
+
"original": "StzhAppNavItem[]",
|
|
58
|
+
"resolved": "StzhAppNavItem[]",
|
|
59
|
+
"references": {
|
|
60
|
+
"StzhAppNavItem": {
|
|
61
|
+
"location": "import",
|
|
62
|
+
"path": "../../index",
|
|
63
|
+
"id": "src/index.ts::StzhAppNavItem"
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
"required": false,
|
|
68
|
+
"optional": false,
|
|
69
|
+
"docs": {
|
|
70
|
+
"tags": [],
|
|
71
|
+
"text": "App-nav items"
|
|
72
|
+
},
|
|
73
|
+
"defaultValue": "[]"
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
static get elementRef() { return "element"; }
|
|
78
|
+
}
|
|
79
|
+
//# sourceMappingURL=stzh-app-nav.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stzh-app-nav.js","sourceRoot":"","sources":["../../../../src/components/stzh-app-nav/stzh-app-nav.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAYlE,MAAM,OAAO,UAAU;;;iBAKa,EAAE;;EAIpC,KAAK,CAAC,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;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,YAAY,CAAC,KAAK;QACxE,WAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,IAC3C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACxB,iBACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,IACb,IAAI,CAAC,IAAI,CACD,CACb,CAAC,CACI,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Element } from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport { StzhAppNavItem } from \"../../index\";\n\n@Component({\n tag: \"stzh-app-nav\",\n styleUrl: \"stzh-app-nav.scss\",\n shadow: true,\n})\n\nexport class StzhAppNav {\n /** Translation strings */\n @Prop() localization: StzhAppNavLocalizedText;\n\n /** App-nav items */\n @Prop() items: StzhAppNavItem[] = [];\n\n @Element() element: HTMLStzhAppNavElement;\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-app-nav\": true,\n };\n\n return (\n <Host>\n <nav role=\"navigation\" class={classes} aria-label={this.localization.title}>\n <div class=\"stzh-app-nav__links\" role=\"list\">\n {this.items.map((item) => (\n <stzh-link\n class=\"stzh-app-nav__link\"\n active={item.active}\n role=\"listitem\"\n a11y-current={item.a11yCurrent}\n href={item.href}\n badge={item.badge}\n badgeType={item.badgeType}\n icon={item.icon}\n >{item.text}\n </stzh-link>\n ))}\n </div>\n </nav>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stzh-app-nav.localization.js","sourceRoot":"","sources":["../../../../src/components/stzh-app-nav/stzh-app-nav.localization.ts"],"names":[],"mappings":"","sourcesContent":["import { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nexport type StzhAppNavLocalizedText = StzhLocaleComponent & {\n title: string\n}\n"]}
|