@oiz/stzh-components 3.1.0 → 3.2.0-beta1

package/dist/esm/stzh-section.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-section.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,2wPAA2wP;;MCWrxP,WAAW;;;mBAEqD,SAAS;sBAGrB,SAAS;qBAGf,SAAS;wBAGN,SAAS;sBAGX,SAAS;yBAGN,SAAS;oBAGzB,KAAK;;EAElD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eACE,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,CAAC,2BAA2B,GAAG,IAAI,CAAC,QAAQ;QAC5C,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACjD,CAAC,+BAA+B,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY;OAC1E,IAED,WAAK,KAAK,EAAC,qBAAqB,IAC9B,WAAK,KAAK,EAAC,uBAAuB,IAChC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EACN,WAAK,KAAK,EAAC,uBAAuB,IAChC,eAAa,CACT,CACF,CACE,CACL,EACP;GACH;;;;;;","names":[],"sources":["src/components/stzh-section/stzh-section.scss?tag=stzh-section&encapsulation=shadow","src/components/stzh-section/stzh-section.tsx"],"sourcesContent":["/**\n * @prop --color: Color of section\n * @prop --background-color: Background color of section\n * @prop --padding-left: Left padding of section\n * @prop --padding-right: Right padding of section\n * @prop --padding-top: Top padding of section\n * @prop --padding-bottom: Bottom padding section\n *\n * @prop --stzh-section-highlight-color: **Global**: Color of section when highlight variant is used\n * @prop --stzh-section-highlight-background-color: **Global**: Background color of section when highlight variant is used\n */\n\n:host {\n  --color: #{$colorBlack};\n  --background-color: transparent;\n  --heading-background-color: transparent;\n\n  --padding-left: var(--stzh-section-padding-left, 0px);\n  --padding-right: var(--stzh-section-padding-right, 0px);\n  --padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner')});\n  --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner')});\n\n  --margin-top: var(--stzh-section-margin-top, 0px);\n  --margin-bottom: var(--stzh-section-margin-bottom, 0px);\n\n  @include mq($from: small) {\n    //--padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner', 'small')});\n    --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner', 'small')});\n  }\n\n  @include mq($from: large) {\n    //--padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner', 'large')});\n    --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner', 'large')});\n  }\n\n  margin-top: var(--margin-top);\n  margin-bottom: var(--margin-bottom);\n\n  ::slotted(stzh-heading) {\n    @include spaceCurve('margin-top', 'tiny');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n}\n\n/* Breakout */\n\n:host(:where([breakout]:not([breakout=\"default\"]))) {\n  position: relative;\n  left: 50%;\n  right: 50%;\n  margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n  margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n  width: calc(100vw - var(--stzh-scrollbar-width));\n  max-width: calc(100vw - var(--stzh-scrollbar-width));\n}\n\n/* Background variants */\n\n:host(:where([background]:not([background=\"default\"]))) {\n  //--padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner')});\n  --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner')});\n\n  --margin-top: var(--stzh-section-background-margin-top, #{spaceCurveValue('background-section-outer')});\n  --margin-bottom: var(--stzh-section-background-margin-bottom, #{spaceCurveValue('background-section-outer')});\n\n  @include mq($from: small) {\n    //--padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner', 'small')});\n    --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner', 'small')});\n  }\n\n  @include mq($from: large) {\n    //--padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner', 'large')});\n    --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner', 'large')});\n\n    --margin-top: var(--stzh-section-background-margin-top, #{spaceCurveValue('background-section-outer', 'large')});\n    --margin-bottom: var(--stzh-section-background-margin-bottom, #{spaceCurveValue('background-section-outer', 'large')});\n  }\n}\n\n:host([background=\"secondary\"]) {\n  --background-color: #{$colorSecondary20};\n}\n\n:host([background=\"primary\"]) {\n  --background-color: #{$colorPrimary70};\n}\n\n/* Highlight variant */\n\n:host([variant=\"highlight\"]) {\n  @include spaceCurve('--padding-left', 'small');\n  @include spaceCurve('--padding-right', 'small');\n  @include spaceCurve('--padding-top', 'medium');\n  @include spaceCurve('--padding-bottom', 'medium');\n\n  --color: #{$sectionHighlightColor};\n  --background-color: #{$sectionHighlightBackgroundColor};\n  --heading-background-color: #{$colorSecondary40};\n\n  // disable nested section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n}\n\n/* Highlight variant */\n\n:host([variant=\"contextbox\"]) {\n  @include spaceCurve('--padding-left', 'regular');\n  @include spaceCurve('--padding-right', 'regular');\n  @include spaceCurve('--padding-top', 'regular');\n  @include spaceCurve('--padding-bottom', 'regular');\n\n  --color: #{$sectionHighlightColor};\n  --background-color: #{$sectionHighlightBackgroundColor};\n  --heading-background-color: #{$colorSecondary40};\n\n  // disable nested section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Margin variants */\n\n:host([margin-top=\"none\"]) {\n  --margin-top: 0px;\n}\n\n:host([margin-bottom=\"none\"]) {\n  --margin-bottom: 0px;\n}\n\n/* Padding variants */\n\n:host([padding-top=\"none\"]) {\n  //--padding-top: 0px;\n}\n\n:host([padding-bottom=\"none\"]) {\n  --padding-bottom: 0px;\n}\n\n.stzh-section {\n  background-color: var(--background-color);\n\n  &__heading {\n    display: flex;\n    flex-direction: column;\n    background-color: var(--heading-background-color);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n  }\n\n  &__wrapper {\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n\n    --stzh-base-color: var(--color);\n  }\n\n  &--is-breakout &__outer {\n    @include container;\n  }\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n * @slot heading - Slot for `stzh-heading` element\n */\n@Component({\n  tag: \"stzh-section\",\n  styleUrl: \"stzh-section.scss\",\n  shadow: true,\n})\nexport class StzhSection {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"highlight\" | \"contextbox\" = \"default\";\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"secondary\" = \"default\";\n\n  /** Margin top spacing */\n  @Prop({ reflect: true }) marginTop: \"default\" | \"none\" = \"default\";\n\n  /** Margin bottom spacing */\n  @Prop({ reflect: true }) marginBottom: \"default\" | \"none\" = \"default\";\n\n  /** Padding top spacing */\n  @Prop({ reflect: true }) paddingTop: \"default\" | \"none\" = \"default\";\n\n  /** Padding bottom spacing */\n  @Prop({ reflect: true }) paddingBottom: \"default\" | \"none\" = \"default\";\n\n  /** Whether to breakout container */\n  @Prop({ reflect: true }) breakout: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <section\n          class={{\n            \"stzh-section\": true,\n            [`stzh-section--is-breakout`]: this.breakout,\n            [`stzh-section--${this.variant}`]: !!this.variant,\n            [`stzh-section--margin-bottom-${this.marginBottom}`]: !!this.marginBottom,\n          }}\n        >\n          <div class=\"stzh-section__outer\">\n            <div class=\"stzh-section__heading\">\n              <slot name=\"heading\"></slot>\n            </div>\n            <div class=\"stzh-section__wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-section.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,4iVAA4iV;;MCWtjV,WAAW;;;mBAE4E,SAAS;sBAG5C,SAAS;qBAGf,SAAS;wBAGN,SAAS;sBAGX,SAAS;yBAGN,SAAS;oBAGzB,KAAK;;EAElD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eACE,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,CAAC,2BAA2B,GAAG,IAAI,CAAC,QAAQ;QAC5C,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACjD,CAAC,+BAA+B,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY;OAC1E,IAED,WAAK,KAAK,EAAC,qBAAqB,IAC9B,WAAK,KAAK,EAAC,uBAAuB,IAChC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EACN,WAAK,KAAK,EAAC,uBAAuB,IAChC,eAAa,CACT,CACF,CACE,CACL,EACP;GACH;;;;;;","names":[],"sources":["src/components/stzh-section/stzh-section.scss?tag=stzh-section&encapsulation=shadow","src/components/stzh-section/stzh-section.tsx"],"sourcesContent":["/**\n * @prop --color: Color of section\n * @prop --background-color: Background color of section\n * @prop --padding-left: Left padding of section\n * @prop --padding-right: Right padding of section\n * @prop --padding-top: Top padding of section\n * @prop --padding-bottom: Bottom padding section\n *\n * @prop --stzh-section-highlight-color: **Global**: Color of section when highlight variant is used\n * @prop --stzh-section-highlight-background-color: **Global**: Background color of section when highlight variant is used\n */\n\n:host {\n  --color: #{$colorBlack};\n  --background-color: transparent;\n  --heading-background-color: transparent;\n\n  --padding-left: var(--stzh-section-padding-left, 0px);\n  --padding-right: var(--stzh-section-padding-right, 0px);\n  --padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner')});\n  --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner')});\n\n  --margin-top: var(--stzh-section-margin-top, 0px);\n  --margin-bottom: var(--stzh-section-margin-bottom, 0px);\n\n  @include mq($from: small) {\n    //--padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner', 'small')});\n    --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner', 'small')});\n  }\n\n  @include mq($from: large) {\n    //--padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner', 'large')});\n    --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner', 'large')});\n  }\n\n  margin-top: var(--margin-top);\n  margin-bottom: var(--margin-bottom);\n\n  ::slotted(stzh-heading) {\n    @include spaceCurve('margin-top', 'tiny');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n}\n\n/* Breakout */\n\n:host(:where([breakout]:not([breakout=\"default\"]))) {\n  position: relative;\n  left: 50%;\n  right: 50%;\n  margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n  margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n  width: calc(100vw - var(--stzh-scrollbar-width));\n  max-width: calc(100vw - var(--stzh-scrollbar-width));\n}\n\n/* Background variants */\n\n:host(:where([background]:not([background=\"default\"]))) {\n  //--padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner')});\n  --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner')});\n\n  --margin-top: var(--stzh-section-background-margin-top, #{spaceCurveValue('background-section-outer')});\n  --margin-bottom: var(--stzh-section-background-margin-bottom, #{spaceCurveValue('background-section-outer')});\n\n  @include mq($from: small) {\n    //--padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner', 'small')});\n    --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner', 'small')});\n  }\n\n  @include mq($from: large) {\n    //--padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner', 'large')});\n    --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner', 'large')});\n\n    --margin-top: var(--stzh-section-background-margin-top, #{spaceCurveValue('background-section-outer', 'large')});\n    --margin-bottom: var(--stzh-section-background-margin-bottom, #{spaceCurveValue('background-section-outer', 'large')});\n  }\n}\n\n:host([background=\"secondary\"]) {\n  --background-color: #{$colorSecondary20};\n}\n\n:host([background=\"primary\"]) {\n  --background-color: #{$colorPrimary70};\n}\n\n/* Highlight variant */\n\n:host([variant=\"highlight\"]) {\n  @include spaceCurve('--padding-left', 'small');\n  @include spaceCurve('--padding-right', 'small');\n  @include spaceCurve('--padding-top', 'medium');\n  @include spaceCurve('--padding-bottom', 'medium');\n\n  --color: #{$sectionHighlightColor};\n  --background-color: #{$sectionHighlightBackgroundColor};\n  --heading-background-color: #{$colorSecondary40};\n\n  // disable nested section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n}\n\n/* Contextbox variant */\n\n:host([variant=\"contextbox\"]) {\n  @include spaceCurve('--padding-left', 'regular');\n  @include spaceCurve('--padding-right', 'regular');\n  @include spaceCurve('--padding-top', 'regular');\n  @include spaceCurve('--padding-bottom', 'regular');\n\n  --color: #{$sectionHighlightColor};\n  --background-color: #{$sectionHighlightBackgroundColor};\n  --heading-background-color: #{$colorSecondary40};\n\n  // disable nested section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Greybox variant */\n\n:host([variant=\"greybox\"]) {\n  --background-color: #{$colorGrey10};\n  @include spaceCurve('--padding-left', 'large');\n  @include spaceCurve('--padding-right', 'large');\n  @include spaceCurve('--padding-top', 'regular');\n  @include spaceCurve('--padding-bottom', 'regular');\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n:host([variant=\"poimax\"]) {\n  --background-color: #{$colorGrey10};\n  @include spaceCurve('--padding-left', 'regular');\n  @include spaceCurve('--padding-right', 'regular');\n  @include spaceCurve('--padding-top', 'regular');\n  @include spaceCurve('--padding-bottom', 'regular');\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Margin variants */\n\n:host([margin-top=\"none\"]) {\n  --margin-top: 0px;\n}\n\n:host([margin-bottom=\"none\"]) {\n  --margin-bottom: 0px;\n}\n\n/* Padding variants */\n\n:host([padding-top=\"none\"]) {\n  //--padding-top: 0px;\n}\n\n:host([padding-bottom=\"none\"]) {\n  --padding-bottom: 0px;\n}\n\n.stzh-section {\n  background-color: var(--background-color);\n\n  &__heading {\n    display: flex;\n    flex-direction: column;\n    background-color: var(--heading-background-color);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n  }\n\n  &__wrapper {\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n\n    --stzh-base-color: var(--color);\n  }\n\n  &--is-breakout &__outer {\n    @include container;\n  }\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n * @slot heading - Slot for `stzh-heading` element\n */\n@Component({\n  tag: \"stzh-section\",\n  styleUrl: \"stzh-section.scss\",\n  shadow: true,\n})\nexport class StzhSection {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"highlight\" | \"contextbox\" | \"greybox\" | \"poimax\" = \"default\";\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"secondary\" = \"default\";\n\n  /** Margin top spacing */\n  @Prop({ reflect: true }) marginTop: \"default\" | \"none\" = \"default\";\n\n  /** Margin bottom spacing */\n  @Prop({ reflect: true }) marginBottom: \"default\" | \"none\" = \"default\";\n\n  /** Padding top spacing */\n  @Prop({ reflect: true }) paddingTop: \"default\" | \"none\" = \"default\";\n\n  /** Padding bottom spacing */\n  @Prop({ reflect: true }) paddingBottom: \"default\" | \"none\" = \"default\";\n\n  /** Whether to breakout container */\n  @Prop({ reflect: true }) breakout: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <section\n          class={{\n            \"stzh-section\": true,\n            [`stzh-section--is-breakout`]: this.breakout,\n            [`stzh-section--${this.variant}`]: !!this.variant,\n            [`stzh-section--margin-bottom-${this.marginBottom}`]: !!this.marginBottom,\n          }}\n        >\n          <div class=\"stzh-section__outer\">\n            <div class=\"stzh-section__heading\">\n              <slot name=\"heading\"></slot>\n            </div>\n            <div class=\"stzh-section__wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}