@six-group/ui-library 4.0.0-beta.0 → 4.0.0-beta.2

package/dist/collection/components/six-item-picker/test/six-item-picker.spec.js

@@ -0,0 +1,90 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixItemPicker } from "../six-item-picker";
+describe('six-item-picker', () => {
+  it('should render default', async () => {
+    // given
+    const page = await newSpecPage({
+      components: [SixItemPicker],
+      html: `<six-item-picker></six-item-picker>`,
+    });
+    // then
+    expect(page.root).toEqualHtml(`
+<six-item-picker roundtrip="" step="1" value="0">
+  <mock:shadow-root>
+    <div class="item_picker__container" part="container">
+      <div class="item_picker__btn" part="up">
+        <six-icon size="large">
+          expand_less
+        </six-icon>
+      </div>
+      <div class="item_picker__content" part="content">
+        0
+      </div>
+      <div class="item_picker__btn" part="down">
+        <six-icon size="large">
+          expand_more
+        </six-icon>
+      </div>
+    </div>
+  </mock:shadow-root>
+</six-item-picker>`);
+  });
+  it('should render number picker with correct attributes', async () => {
+    // given
+    const page = await newSpecPage({
+      components: [SixItemPicker],
+      html: `<six-item-picker value="5" step="5" min="3" max="13" roundtrip="false"></six-item-picker>`,
+    });
+    // then
+    expect(page.root).toEqualHtml(`
+<six-item-picker max="13" min="3" roundtrip="false" step="5" value="5">
+  <mock:shadow-root>
+    <div class="item_picker__container" part="container">
+      <div class="item_picker__btn" part="up">
+        <six-icon size="large">
+          expand_less
+        </six-icon>
+      </div>
+      <div class="item_picker__content" part="content">
+        5
+      </div>
+      <div class="item_picker__btn item_picker__btn--disabled" part="down">
+        <six-icon size="large">
+          expand_more
+        </six-icon>
+      </div>
+    </div>
+  </mock:shadow-root>
+</six-item-picker>
+    `);
+  });
+  it('should render letter picker with correct attributes', async () => {
+    // given
+    const page = await newSpecPage({
+      components: [SixItemPicker],
+      html: `<six-item-picker type="letter" roundtrip="false" min="c" max="k" value="d"></six-item-picker>`,
+    });
+    // then
+    expect(page.root).toEqualHtml(`
+<six-item-picker max="k" min="c" roundtrip="false" step="1" type="letter" value="d">
+  <mock:shadow-root>
+    <div class="item_picker__container" part="container">
+      <div class="item_picker__btn" part="up">
+        <six-icon size="large">
+          expand_less
+        </six-icon>
+      </div>
+      <div class="item_picker__content" part="content">
+        d
+      </div>
+      <div class="item_picker__btn" part="down">
+        <six-icon size="large">
+          expand_more
+        </six-icon>
+      </div>
+    </div>
+  </mock:shadow-root>
+</six-item-picker>`);
+  });
+});
+//# sourceMappingURL=six-item-picker.spec.js.map

package/dist/collection/components/six-item-picker/test/six-item-picker.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-item-picker.spec.js","sourceRoot":"","sources":["../../../../src/components/six-item-picker/test/six-item-picker.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;EAC/B,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;IACrC,QAAQ;IACR,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;MAC3B,IAAI,EAAE,qCAAqC;KAC5C,CAAC,CAAC;IAEH,OAAO;IACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;mBAmBf,CAAC,CAAC;EACnB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;IACnE,QAAQ;IACR,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;MAC3B,IAAI,EAAE,2FAA2F;KAClG,CAAC,CAAC;IAEH,OAAO;IACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;KAoB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;IACnE,QAAQ;IACR,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;MAC3B,IAAI,EAAE,+FAA+F;KACtG,CAAC,CAAC;IAEH,OAAO;IACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;mBAmBf,CAAC,CAAC;EACnB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixItemPicker } from '../six-item-picker';\n\ndescribe('six-item-picker', () => {\n  it('should render default', async () => {\n    // given\n    const page = await newSpecPage({\n      components: [SixItemPicker],\n      html: `<six-item-picker></six-item-picker>`,\n    });\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-item-picker roundtrip=\"\" step=\"1\" value=\"0\">\n  <mock:shadow-root>\n    <div class=\"item_picker__container\" part=\"container\">\n      <div class=\"item_picker__btn\" part=\"up\">\n        <six-icon size=\"large\">\n          expand_less\n        </six-icon>\n      </div>\n      <div class=\"item_picker__content\" part=\"content\">\n        0\n      </div>\n      <div class=\"item_picker__btn\" part=\"down\">\n        <six-icon size=\"large\">\n          expand_more\n        </six-icon>\n      </div>\n    </div>\n  </mock:shadow-root>\n</six-item-picker>`);\n  });\n\n  it('should render number picker with correct attributes', async () => {\n    // given\n    const page = await newSpecPage({\n      components: [SixItemPicker],\n      html: `<six-item-picker value=\"5\" step=\"5\" min=\"3\" max=\"13\" roundtrip=\"false\"></six-item-picker>`,\n    });\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-item-picker max=\"13\" min=\"3\" roundtrip=\"false\" step=\"5\" value=\"5\">\n  <mock:shadow-root>\n    <div class=\"item_picker__container\" part=\"container\">\n      <div class=\"item_picker__btn\" part=\"up\">\n        <six-icon size=\"large\">\n          expand_less\n        </six-icon>\n      </div>\n      <div class=\"item_picker__content\" part=\"content\">\n        5\n      </div>\n      <div class=\"item_picker__btn item_picker__btn--disabled\" part=\"down\">\n        <six-icon size=\"large\">\n          expand_more\n        </six-icon>\n      </div>\n    </div>\n  </mock:shadow-root>\n</six-item-picker>\n    `);\n  });\n\n  it('should render letter picker with correct attributes', async () => {\n    // given\n    const page = await newSpecPage({\n      components: [SixItemPicker],\n      html: `<six-item-picker type=\"letter\" roundtrip=\"false\" min=\"c\" max=\"k\" value=\"d\"></six-item-picker>`,\n    });\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-item-picker max=\"k\" min=\"c\" roundtrip=\"false\" step=\"1\" type=\"letter\" value=\"d\">\n  <mock:shadow-root>\n    <div class=\"item_picker__container\" part=\"container\">\n      <div class=\"item_picker__btn\" part=\"up\">\n        <six-icon size=\"large\">\n          expand_less\n        </six-icon>\n      </div>\n      <div class=\"item_picker__content\" part=\"content\">\n        d\n      </div>\n      <div class=\"item_picker__btn\" part=\"down\">\n        <six-icon size=\"large\">\n          expand_more\n        </six-icon>\n      </div>\n    </div>\n  </mock:shadow-root>\n</six-item-picker>`);\n  });\n});\n"]}

package/dist/collection/components/six-language-switcher/six-language-switcher.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 const DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];
 /*
  * @since 2.2.0
@@ -46,7 +46,7 @@ export class SixLanguageSwitcher {
   render() {
     return (h("div", { part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
       const language = typeof lang === 'string' ? lang : lang.key;
-      return (h("div", { onClick: this.handleLanguageSwitching(language, lang.value) }, h("span", { part: "label", class: {
+      return (h("div", { onClick: this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value) }, h("span", { part: "label", class: {
           'language-switcher__label': true,
           'language-switcher__label--selected': this.selected === language,
         } }, language), index < this.languages.length - 1 && (h("span", { part: "separator", class: "language-switcher__separator" }, "/"))));
@@ -71,7 +71,7 @@ export class SixLanguageSwitcher {
         "mutable": true,
         "complexType": {
           "original": "string",
-          "resolved": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
@@ -92,7 +92,8 @@ export class SixLanguageSwitcher {
           "references": {
             "SixLanguageSwitcherInput": {
               "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/packages/ui-library/src/components/six-language-switcher/six-language-switcher.tsx"
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-language-switcher/six-language-switcher.tsx",
+              "id": "src/components/six-language-switcher/six-language-switcher.tsx::SixLanguageSwitcherInput"
             }
           }
         },
@@ -123,7 +124,8 @@ export class SixLanguageSwitcher {
           "references": {
             "SixLanguageSwitcherChangePayload": {
               "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/packages/ui-library/src/components/six-language-switcher/six-language-switcher.tsx"
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-language-switcher/six-language-switcher.tsx",
+              "id": "src/components/six-language-switcher/six-language-switcher.tsx::SixLanguageSwitcherChangePayload"
             }
           }
         }

package/dist/collection/components/six-language-switcher/six-language-switcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-language-switcher.js","sourceRoot":"","sources":["../../../src/components/six-language-switcher/six-language-switcher.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAa/E,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AAE7C;;;;;;GAMG;AAMH,MAAM,OAAO,mBAAmB;;IAqCtB,4BAAuB,GAAG,CAAC,WAAmB,EAAE,aAAsB,EAAE,EAAE,CAAC,GAAG,EAAE;MACtF,IAAI,aAAa,KAAK,SAAS,EAAE;QAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;OACpC;WAAM;QACL,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;OAClC;MACD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;IAC9B,CAAC,CAAC;;qBAvCyD,iBAAiB;;EAG5E,sBAAsB,CAAC,QAAkB;IACvC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;MAC5B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;KACzD;IAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;EAChC,CAAC;EAMD,iBAAiB;IACf,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;MAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;EACH,CAAC;EAEO,sBAAsB;IAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC3C,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;MACxC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;MACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;SAAM;MACL,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC;MACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KAC7C;EACH,CAAC;EAWD,MAAM;IACJ,OAAO,CACL,WAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,IACvD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MAClC,MAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;MAC5D,OAAO,CACL,WAAK,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QAC9D,YACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;YACL,0BAA0B,EAAE,IAAI;YAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;WACjE,IAEA,QAAQ,CACJ;QACN,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CACpC,YAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,QAEpD,CACR,CACG,CACP,CAAC;IACJ,CAAC,CAAC,CACE,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n  key: string;\n  value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n  tag: 'six-language-switcher',\n  styleUrl: 'six-language-switcher.scss',\n  shadow: true,\n})\nexport class SixLanguageSwitcher {\n  /** The language which should be shown as selected */\n  @Prop({ mutable: true, reflect: true }) selected?: string;\n\n  /** The languages which should be selectable options. */\n  @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n  @Watch('languages')\n  handleChangesLanguages(newValue: string[]) {\n    if (!Array.isArray(newValue)) {\n      throw new Error('languages is expected to be an array');\n    }\n\n    this.updateSelectedLanguage();\n  }\n  /**\n   * Emitted when the language switchers value changes\n   */\n  @Event({ eventName: 'six-language-switcher-change' }) sixChange: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n  componentWillLoad() {\n    if (this.selected === undefined) {\n      this.updateSelectedLanguage();\n    }\n  }\n\n  private updateSelectedLanguage() {\n    const selectedLanguage = this.languages[0];\n    if (typeof selectedLanguage === 'string') {\n      this.selected = selectedLanguage;\n      this.sixChange.emit(this.selected);\n    } else {\n      this.selected = selectedLanguage.key;\n      this.sixChange.emit(selectedLanguage.value);\n    }\n  }\n\n  private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n    if (languageValue !== undefined) {\n      this.sixChange.emit(languageValue);\n    } else {\n      this.sixChange.emit(newLanguage);\n    }\n    this.selected = newLanguage;\n  };\n\n  render() {\n    return (\n      <div part=\"container\" class=\"language-switcher__container\">\n        {this.languages.map((lang, index) => {\n          const language = typeof lang === 'string' ? lang : lang.key;\n          return (\n            <div onClick={this.handleLanguageSwitching(language, lang.value)}>\n              <span\n                part=\"label\"\n                class={{\n                  'language-switcher__label': true,\n                  'language-switcher__label--selected': this.selected === language,\n                }}\n              >\n                {language}\n              </span>\n              {index < this.languages.length - 1 && (\n                <span part=\"separator\" class=\"language-switcher__separator\">\n                  /\n                </span>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-language-switcher.js","sourceRoot":"","sources":["../../../src/components/six-language-switcher/six-language-switcher.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAa/E,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AAE7C;;;;;;GAMG;AAMH,MAAM,OAAO,mBAAmB;;IAqCtB,4BAAuB,GAAG,CAAC,WAAmB,EAAE,aAAsB,EAAE,EAAE,CAAC,GAAG,EAAE;MACtF,IAAI,aAAa,KAAK,SAAS,EAAE;QAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;OACpC;WAAM;QACL,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;OAClC;MACD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;IAC9B,CAAC,CAAC;;qBAvCyD,iBAAiB;;EAG5E,sBAAsB,CAAC,QAAkB;IACvC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;MAC5B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;KACzD;IAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;EAChC,CAAC;EAMD,iBAAiB;IACf,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;MAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;EACH,CAAC;EAEO,sBAAsB;IAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC3C,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;MACxC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;MACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;SAAM;MACL,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC;MACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KAC7C;EACH,CAAC;EAWD,MAAM;IACJ,OAAO,CACL,WAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,IACvD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MAClC,MAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;MAC5D,OAAO,CACL,WAAK,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAChG,YACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;YACL,0BAA0B,EAAE,IAAI;YAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;WACjE,IAEA,QAAQ,CACJ;QACN,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CACpC,YAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,QAEpD,CACR,CACG,CACP,CAAC;IACJ,CAAC,CAAC,CACE,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n  key: string;\n  value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n  tag: 'six-language-switcher',\n  styleUrl: 'six-language-switcher.scss',\n  shadow: true,\n})\nexport class SixLanguageSwitcher {\n  /** The language which should be shown as selected */\n  @Prop({ mutable: true, reflect: true }) selected?: string;\n\n  /** The languages which should be selectable options. */\n  @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n  @Watch('languages')\n  handleChangesLanguages(newValue: string[]) {\n    if (!Array.isArray(newValue)) {\n      throw new Error('languages is expected to be an array');\n    }\n\n    this.updateSelectedLanguage();\n  }\n  /**\n   * Emitted when the language switchers value changes\n   */\n  @Event({ eventName: 'six-language-switcher-change' }) sixChange!: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n  componentWillLoad() {\n    if (this.selected === undefined) {\n      this.updateSelectedLanguage();\n    }\n  }\n\n  private updateSelectedLanguage() {\n    const selectedLanguage = this.languages[0];\n    if (typeof selectedLanguage === 'string') {\n      this.selected = selectedLanguage;\n      this.sixChange.emit(this.selected);\n    } else {\n      this.selected = selectedLanguage.key;\n      this.sixChange.emit(selectedLanguage.value);\n    }\n  }\n\n  private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n    if (languageValue !== undefined) {\n      this.sixChange.emit(languageValue);\n    } else {\n      this.sixChange.emit(newLanguage);\n    }\n    this.selected = newLanguage;\n  };\n\n  render() {\n    return (\n      <div part=\"container\" class=\"language-switcher__container\">\n        {this.languages.map((lang, index) => {\n          const language = typeof lang === 'string' ? lang : lang.key;\n          return (\n            <div onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}>\n              <span\n                part=\"label\"\n                class={{\n                  'language-switcher__label': true,\n                  'language-switcher__label--selected': this.selected === language,\n                }}\n              >\n                {language}\n              </span>\n              {index < this.languages.length - 1 && (\n                <span part=\"separator\" class=\"language-switcher__separator\">\n                  /\n                </span>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-language-switcher/test/six-language-switcher.spec.js

@@ -0,0 +1,196 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixLanguageSwitcher } from "../six-language-switcher";
+describe('SIX Language Switcher', () => {
+  it('should properly render with default settings', async () => {
+    var _a;
+    // given
+    const config = {
+      components: [SixLanguageSwitcher],
+      html: `<six-language-switcher></six-language-switcher>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect((_a = page === null || page === void 0 ? void 0 : page.root) === null || _a === void 0 ? void 0 : _a.selected).toEqual('EN');
+    expect(page.root).toEqualHtml(`
+    <six-language-switcher selected="EN">
+      <mock:shadow-root>
+        <div class="language-switcher__container" part="container">
+          <div>
+            <span class="language-switcher__label language-switcher__label--selected" part="label">
+              EN
+            </span>
+            <span class="language-switcher__separator" part="separator">
+              /
+            </span>
+          </div>
+          <div>
+            <span class="language-switcher__label" part="label">
+              DE
+            </span>
+            <span class="language-switcher__separator" part="separator">
+              /
+            </span>
+          </div>
+          <div>
+            <span class="language-switcher__label" part="label">
+              ES
+            </span>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-language-switcher>
+    `);
+  });
+  it('should allow to set custom languages', async () => {
+    var _a;
+    // given
+    const config = {
+      components: [SixLanguageSwitcher],
+      html: `<six-language-switcher></six-language-switcher>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    if ((page === null || page === void 0 ? void 0 : page.root) != null) {
+      page.root.languages = ['IT', 'AR', 'BG'];
+    }
+    await page.waitForChanges();
+    // then
+    expect((_a = page === null || page === void 0 ? void 0 : page.root) === null || _a === void 0 ? void 0 : _a.selected).toEqual('IT');
+    expect(page.root).toEqualHtml(`
+    <six-language-switcher selected="IT">
+      <mock:shadow-root>
+        <div class="language-switcher__container" part="container">
+          <div>
+            <span class="language-switcher__label language-switcher__label--selected" part="label">
+              IT
+            </span>
+            <span class="language-switcher__separator" part="separator">
+              /
+            </span>
+          </div>
+          <div>
+            <span class="language-switcher__label" part="label">
+              AR
+            </span>
+            <span class="language-switcher__separator" part="separator">
+              /
+            </span>
+          </div>
+          <div>
+            <span class="language-switcher__label" part="label">
+              BG
+            </span>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-language-switcher>
+    `);
+  });
+  it('should properly set selected language', async () => {
+    var _a;
+    // given
+    const config = {
+      components: [SixLanguageSwitcher],
+      html: `<six-language-switcher selected="DE"></six-language-switcher>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect((_a = page === null || page === void 0 ? void 0 : page.root) === null || _a === void 0 ? void 0 : _a.selected).toEqual('DE');
+    expect(page.root).toEqualHtml(`
+    <six-language-switcher selected="DE">
+      <mock:shadow-root>
+        <div class="language-switcher__container" part="container">
+          <div>
+            <span class="language-switcher__label" part="label">
+              EN
+            </span>
+            <span class="language-switcher__separator" part="separator">
+              /
+            </span>
+          </div>
+          <div>
+            <span class="language-switcher__label language-switcher__label--selected" part="label">
+              DE
+            </span>
+            <span class="language-switcher__separator" part="separator">
+              /
+            </span>
+          </div>
+          <div>
+            <span class="language-switcher__label" part="label">
+              ES
+            </span>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-language-switcher>
+    `);
+  });
+  it('should properly set language after having been rendered', async () => {
+    var _a;
+    // given
+    const config = {
+      components: [SixLanguageSwitcher],
+      html: `<six-language-switcher></six-language-switcher>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    if (page.root != null) {
+      page.root.selected = 'DE';
+    }
+    await page.waitForChanges();
+    // then
+    expect((_a = page === null || page === void 0 ? void 0 : page.root) === null || _a === void 0 ? void 0 : _a.selected).toEqual('DE');
+    expect(page.root).toEqualHtml(`
+    <six-language-switcher selected="DE">
+      <mock:shadow-root>
+        <div class="language-switcher__container" part="container">
+          <div>
+            <span class="language-switcher__label" part="label">
+              EN
+            </span>
+            <span class="language-switcher__separator" part="separator">
+              /
+            </span>
+          </div>
+          <div>
+            <span class="language-switcher__label language-switcher__label--selected" part="label">
+              DE
+            </span>
+            <span class="language-switcher__separator" part="separator">
+              /
+            </span>
+          </div>
+          <div>
+            <span class="language-switcher__label" part="label">
+              ES
+            </span>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-language-switcher>
+    `);
+  });
+  it('should properly update selected language after languages have been changed', async () => {
+    var _a;
+    // given
+    const config = {
+      components: [SixLanguageSwitcher],
+      html: `<six-language-switcher></six-language-switcher>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    if (page.root != null) {
+      page.root.languages = ['IT', 'AR', 'BG'];
+    }
+    await page.waitForChanges();
+    if (page.root != null) {
+      page.root.selected = 'BG';
+    }
+    // then
+    expect((_a = page === null || page === void 0 ? void 0 : page.root) === null || _a === void 0 ? void 0 : _a.selected).toEqual('BG');
+  });
+});
+//# sourceMappingURL=six-language-switcher.spec.js.map

package/dist/collection/components/six-language-switcher/test/six-language-switcher.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-language-switcher.spec.js","sourceRoot":"","sources":["../../../../src/components/six-language-switcher/test/six-language-switcher.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixLanguageSwitcher } from '../six-language-switcher';\n\ndescribe('SIX Language Switcher', () => {\n  it('should properly render with default settings', async () => {\n    // given\n    const config = {\n      components: [SixLanguageSwitcher],\n      html: `<six-language-switcher></six-language-switcher>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page?.root?.selected).toEqual('EN');\n    expect(page.root).toEqualHtml(`\n    <six-language-switcher selected=\"EN\">\n      <mock:shadow-root>\n        <div class=\"language-switcher__container\" part=\"container\">\n          <div>\n            <span class=\"language-switcher__label language-switcher__label--selected\" part=\"label\">\n              EN\n            </span>\n            <span class=\"language-switcher__separator\" part=\"separator\">\n              /\n            </span>\n          </div>\n          <div>\n            <span class=\"language-switcher__label\" part=\"label\">\n              DE\n            </span>\n            <span class=\"language-switcher__separator\" part=\"separator\">\n              /\n            </span>\n          </div>\n          <div>\n            <span class=\"language-switcher__label\" part=\"label\">\n              ES\n            </span>\n          </div>\n        </div>\n      </mock:shadow-root>\n    </six-language-switcher>\n    `);\n  });\n\n  it('should allow to set custom languages', async () => {\n    // given\n    const config = {\n      components: [SixLanguageSwitcher],\n      html: `<six-language-switcher></six-language-switcher>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n    if (page?.root != null) {\n      page.root.languages = ['IT', 'AR', 'BG'];\n    }\n    await page.waitForChanges();\n\n    // then\n    expect(page?.root?.selected).toEqual('IT');\n    expect(page.root).toEqualHtml(`\n    <six-language-switcher selected=\"IT\">\n      <mock:shadow-root>\n        <div class=\"language-switcher__container\" part=\"container\">\n          <div>\n            <span class=\"language-switcher__label language-switcher__label--selected\" part=\"label\">\n              IT\n            </span>\n            <span class=\"language-switcher__separator\" part=\"separator\">\n              /\n            </span>\n          </div>\n          <div>\n            <span class=\"language-switcher__label\" part=\"label\">\n              AR\n            </span>\n            <span class=\"language-switcher__separator\" part=\"separator\">\n              /\n            </span>\n          </div>\n          <div>\n            <span class=\"language-switcher__label\" part=\"label\">\n              BG\n            </span>\n          </div>\n        </div>\n      </mock:shadow-root>\n    </six-language-switcher>\n    `);\n  });\n\n  it('should properly set selected language', async () => {\n    // given\n    const config = {\n      components: [SixLanguageSwitcher],\n      html: `<six-language-switcher selected=\"DE\"></six-language-switcher>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page?.root?.selected).toEqual('DE');\n    expect(page.root).toEqualHtml(`\n    <six-language-switcher selected=\"DE\">\n      <mock:shadow-root>\n        <div class=\"language-switcher__container\" part=\"container\">\n          <div>\n            <span class=\"language-switcher__label\" part=\"label\">\n              EN\n            </span>\n            <span class=\"language-switcher__separator\" part=\"separator\">\n              /\n            </span>\n          </div>\n          <div>\n            <span class=\"language-switcher__label language-switcher__label--selected\" part=\"label\">\n              DE\n            </span>\n            <span class=\"language-switcher__separator\" part=\"separator\">\n              /\n            </span>\n          </div>\n          <div>\n            <span class=\"language-switcher__label\" part=\"label\">\n              ES\n            </span>\n          </div>\n        </div>\n      </mock:shadow-root>\n    </six-language-switcher>\n    `);\n  });\n\n  it('should properly set language after having been rendered', async () => {\n    // given\n    const config = {\n      components: [SixLanguageSwitcher],\n      html: `<six-language-switcher></six-language-switcher>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n    if (page.root != null) {\n      page.root.selected = 'DE';\n    }\n    await page.waitForChanges();\n\n    // then\n    expect(page?.root?.selected).toEqual('DE');\n    expect(page.root).toEqualHtml(`\n    <six-language-switcher selected=\"DE\">\n      <mock:shadow-root>\n        <div class=\"language-switcher__container\" part=\"container\">\n          <div>\n            <span class=\"language-switcher__label\" part=\"label\">\n              EN\n            </span>\n            <span class=\"language-switcher__separator\" part=\"separator\">\n              /\n            </span>\n          </div>\n          <div>\n            <span class=\"language-switcher__label language-switcher__label--selected\" part=\"label\">\n              DE\n            </span>\n            <span class=\"language-switcher__separator\" part=\"separator\">\n              /\n            </span>\n          </div>\n          <div>\n            <span class=\"language-switcher__label\" part=\"label\">\n              ES\n            </span>\n          </div>\n        </div>\n      </mock:shadow-root>\n    </six-language-switcher>\n    `);\n  });\n\n  it('should properly update selected language after languages have been changed', async () => {\n    // given\n    const config = {\n      components: [SixLanguageSwitcher],\n      html: `<six-language-switcher></six-language-switcher>`,\n    };\n    // when\n    const page = await newSpecPage(config);\n    if (page.root != null) {\n      page.root.languages = ['IT', 'AR', 'BG'];\n    }\n    await page.waitForChanges();\n    if (page.root != null) {\n      page.root.selected = 'BG';\n    }\n\n    // then\n    expect(page?.root?.selected).toEqual('BG');\n  });\n});\n"]}

package/dist/collection/components/six-layout-grid/six-layout-grid.js

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 /**
  * @since 1.01
  * @status stable
@@ -10,8 +10,10 @@ export class SixLayoutGrid {
     this.columns = undefined;
   }
   handleColumnsChange() {
-    const columns = this.columns ? this.columns : 12;
-    this.host.style.setProperty('--no-of-columns', String(columns));
+    if (typeof this.columns !== 'number' || this.columns === 0) {
+      this.columns = 12;
+    }
+    this.host.style.setProperty('--no-of-columns', String(this.columns));
   }
   componentWillLoad() {
     this.handleColumnsChange();
@@ -34,15 +36,15 @@ export class SixLayoutGrid {
   static get properties() {
     return {
       "columns": {
-        "type": "any",
-        "mutable": false,
+        "type": "number",
+        "mutable": true,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "number",
+          "resolved": "number | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Set the number of grid columns"

package/dist/collection/components/six-layout-grid/six-layout-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-layout-grid.js","sourceRoot":"","sources":["../../../src/components/six-layout-grid/six-layout-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE;;;;;GAKG;AAOH,MAAM,OAAO,aAAa;;;;EAOxB,mBAAmB;IACjB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACjD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;EAClE,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;EAC7B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAQ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 1.01\n * @status stable\n *\n * @slot - The grid's content\n */\n\n@Component({\n  tag: 'six-layout-grid',\n  styleUrl: 'six-layout-grid.scss',\n  shadow: true,\n})\nexport class SixLayoutGrid {\n  @Element() host: HTMLSixLayoutGridElement;\n\n  /** Set the number of grid columns */\n  @Prop() columns;\n\n  @Watch('columns')\n  handleColumnsChange() {\n    const columns = this.columns ? this.columns : 12;\n    this.host.style.setProperty('--no-of-columns', String(columns));\n  }\n\n  componentWillLoad() {\n    this.handleColumnsChange();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-layout-grid.js","sourceRoot":"","sources":["../../../src/components/six-layout-grid/six-layout-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE;;;;;GAKG;AAOH,MAAM,OAAO,aAAa;;;;EAOxB,mBAAmB;IACjB,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,CAAC,EAAE;MAC1D,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;KACnB;IACD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;EACvE,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;EAC7B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAQ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 1.01\n * @status stable\n *\n * @slot - The grid's content\n */\n\n@Component({\n  tag: 'six-layout-grid',\n  styleUrl: 'six-layout-grid.scss',\n  shadow: true,\n})\nexport class SixLayoutGrid {\n  @Element() host!: HTMLSixLayoutGridElement;\n\n  /** Set the number of grid columns */\n  @Prop({ mutable: true }) columns?: number;\n\n  @Watch('columns')\n  handleColumnsChange() {\n    if (typeof this.columns !== 'number' || this.columns === 0) {\n      this.columns = 12;\n    }\n    this.host.style.setProperty('--no-of-columns', String(this.columns));\n  }\n\n  componentWillLoad() {\n    this.handleColumnsChange();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-layout-grid/test/six-layout-grid.spec.js

@@ -0,0 +1,18 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixLayoutGrid } from "../six-layout-grid";
+describe('six-layout-grid', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixLayoutGrid],
+      html: `<six-layout-grid></six-layout-grid>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-layout-grid style="--no-of-columns: 12;">
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </six-layout-grid>
+    `);
+  });
+});
+//# sourceMappingURL=six-layout-grid.spec.js.map

package/dist/collection/components/six-layout-grid/test/six-layout-grid.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-layout-grid.spec.js","sourceRoot":"","sources":["../../../../src/components/six-layout-grid/test/six-layout-grid.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;EAC/B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;MAC3B,IAAI,EAAE,qCAAqC;KAC5C,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixLayoutGrid } from '../six-layout-grid';\n\ndescribe('six-layout-grid', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixLayoutGrid],\n      html: `<six-layout-grid></six-layout-grid>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <six-layout-grid style=\"--no-of-columns: 12;\">\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </six-layout-grid>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-main-container/six-main-container.js

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 /**
  * @since 1.01
  * @status stable

package/dist/collection/components/six-main-container/six-main-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-main-container.js","sourceRoot":"","sources":["../../../src/components/six-main-container/six-main-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE;;;;;;;;;GASG;AAOH,MAAM,OAAO,gBAAgB;;kBAIV,IAAI;;EAErB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,aAAa,GAAG;MAC9C,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,MAAM,EAAE;QAC1E,eAAQ,CACJ;MACN,WAAK,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,cAAc,GAAG,CAC3C,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.01\n * @status stable\n *\n * @slot - The main container's content.\n *\n * @part left-margin  - The component's left margin area.\n * @part content      - The component's content area.\n * @part right-margin - The component's right margin area.\n */\n\n@Component({\n  tag: 'six-main-container',\n  styleUrl: 'six-main-container.scss',\n  shadow: true,\n})\nexport class SixMainContainer {\n  @Element() host: HTMLSixMainContainerElement;\n\n  /** Set to false to remove top and bottom padding.  */\n  @Prop() padded = true;\n\n  render() {\n    return (\n      <Host>\n        <div part=\"left-margin\" class=\"left-margin\" />\n        <div part=\"content\" class={{ content: true, 'content--padded': this.padded }}>\n          <slot />\n        </div>\n        <div part=\"right-margin\" class=\"right-margin\" />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-main-container.js","sourceRoot":"","sources":["../../../src/components/six-main-container/six-main-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE;;;;;;;;;GASG;AAOH,MAAM,OAAO,gBAAgB;;kBAIV,IAAI;;EAErB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,aAAa,GAAG;MAC9C,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,MAAM,EAAE;QAC1E,eAAQ,CACJ;MACN,WAAK,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,cAAc,GAAG,CAC3C,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 1.01\n * @status stable\n *\n * @slot - The main container's content.\n *\n * @part left-margin  - The component's left margin area.\n * @part content      - The component's content area.\n * @part right-margin - The component's right margin area.\n */\n\n@Component({\n  tag: 'six-main-container',\n  styleUrl: 'six-main-container.scss',\n  shadow: true,\n})\nexport class SixMainContainer {\n  @Element() host!: HTMLSixMainContainerElement;\n\n  /** Set to false to remove top and bottom padding.  */\n  @Prop() padded = true;\n\n  render() {\n    return (\n      <Host>\n        <div part=\"left-margin\" class=\"left-margin\" />\n        <div part=\"content\" class={{ content: true, 'content--padded': this.padded }}>\n          <slot />\n        </div>\n        <div part=\"right-margin\" class=\"right-margin\" />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-main-container/test/six-main-container.spec.js

@@ -0,0 +1,22 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixMainContainer } from "../six-main-container";
+describe('six-main-container', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixMainContainer],
+      html: `<six-main-container></six-main-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-main-container>
+        <mock:shadow-root>
+          <div class="left-margin" part="left-margin"></div>
+          <div class="content content--padded" part="content">
+            <slot></slot>
+          </div>
+          <div class="right-margin" part="right-margin"></div>
+        </mock:shadow-root>
+      </six-main-container>
+    `);
+  });
+});
+//# sourceMappingURL=six-main-container.spec.js.map

package/dist/collection/components/six-main-container/test/six-main-container.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-main-container.spec.js","sourceRoot":"","sources":["../../../../src/components/six-main-container/test/six-main-container.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;MAC9B,IAAI,EAAE,2CAA2C;KAClD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixMainContainer } from '../six-main-container';\n\ndescribe('six-main-container', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixMainContainer],\n      html: `<six-main-container></six-main-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <six-main-container>\n        <mock:shadow-root>\n          <div class=\"left-margin\" part=\"left-margin\"></div>\n          <div class=\"content content--padded\" part=\"content\">\n            <slot></slot>\n          </div>\n          <div class=\"right-margin\" part=\"right-margin\"></div>\n        </mock:shadow-root>\n      </six-main-container>\n    `);\n  });\n});\n"]}