npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.0e2d96e → 0.0.0-insider.0f5a398 - Mend

@six-group/ui-library 0.0.0-insider.0e2d96e → 0.0.0-insider.0f5a398

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.

Files changed (838) hide show

package/dist/collection/components/six-file-upload/six-file-upload.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-file-upload.js","sourceRoot":"","sources":["../../../src/components/six-file-upload/six-file-upload.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAgBhG;;;;GAIG;AAOH,MAAM,OAAO,aAAa;;QA8DhB,gBAAW,GAAG,CAAC,KAAe,EAAE,EAAE;YACxC,IAAI,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;gBACvC,OAAO;aACR;YAED,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACtC,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,2BAA2B,EAAE,CAAC,CAAC;aACnE;YAED,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,IAAI,IAAI,IAAI,IAAI,EAAE;oBAChB,OAAO;iBACR;gBAED,IAAI,iBAAiB,GAAa,EAAE,CAAC;gBACrC,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;oBACvB,iBAAiB,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;iBAC/D;gBAED,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;oBAC/E,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,2CAA2C,CAAC,CAAC,CAAC,6BAA6B,CAAC;oBAC9G,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;iBACtC;gBAED,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE;oBAC5D,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,kBAAkB,CAAC;oBACvF,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;iBACtC;aACF;YAED,MAAM,YAAY,GAAgC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;YACjG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAClC,CAAC,CAAC;QAqBM,aAAQ,GAAG,GAAG,EAAE;;YACtB,IAAI,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,KAAI,IAAI,EAAE;gBACjC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;gBACnC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;gBACxB,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAC;aAC3B;QACH,CAAC,CAAC;sBApHgB,KAAK;uBAGa,KAAK;;wBAMb,KAAK;;wBAML,KAAK;;;IAYjC,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACpB;IACH,CAAC;IAGD,eAAe;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACpB;IACH,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACrB;IACH,CAAC;IAGD,WAAW,CAAC,EAAE,YAAY,EAAa;QACrC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,YAAY,IAAI,IAAI,EAAE;gBACxB,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;aACtC;SACF;IACH,CAAC;IAoCD,gBAAgB;QACd,CAAC,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;YACnE,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;YACnE,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;QACzE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,CAAC,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;YACnE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;YACtE,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;QAC5E,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,eAAe,CAAC,CAAQ;QAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC;IAUO,WAAW;;QACjB,OAAO,CACL,MAAA,IAAI,CAAC,KAAK,mCACV,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,QAAQ,CACT,CAAC,CAAC,CAAC,CACF;;YAC2B,YAAM,KAAK,EAAC,qCAAqC,aAAc,CACnF,CACR,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;QAE3D,OAAO,CACL,WACE,KAAK,EAAE;gBACL,iBAAiB,EAAE,IAAI;gBACvB,2BAA2B,EAAE,IAAI,CAAC,QAAQ;aAC3C;YAED,EAAC,SAAS,IACR,KAAK,EAAE;oBACL,qCAAqC,EAAE,IAAI,CAAC,OAAO;oBACnD,kCAAkC,EAAE,CAAC,IAAI,CAAC,OAAO;iBAClD;gBAEA,IAAI,CAAC,OAAO,IAAI,CACf,YAAM,IAAI,EAAC,QAAQ;oBACjB,gBAAU,KAAK,EAAC,6BAA6B,sBAA2B,CACnE,CACR;gBACD,WACE,KAAK,EAAE;wBACL,4BAA4B,EAAE,IAAI;wBAClC,mCAAmC,EAAE,IAAI,CAAC,MAAM;wBAChD,qCAAqC,EAAE,IAAI,CAAC,OAAO;qBACpD;oBAED,gBAAO,IAAI,CAAC,WAAW,EAAE,CAAQ;oBACjC,aACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,GAClC,CACE,CACI,CACR,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\n\ninterface ISingleFile {\n file: File;\n}\n\ninterface IMultipleFiles {\n files: FileList;\n}\n\nexport type SixFileUploadSuccessPayload = ISingleFile \| IMultipleFiles;\n\nexport interface SixFileUploadFailurePayload {\n reason: string;\n}\n\n/*\n @since 2.0.0\n * @status experimental\n \n /\n@Component({\n tag: 'six-file-upload',\n styleUrl: 'six-file-upload.scss',\n scoped: true,\n shadow: false,\n})\nexport class SixFileUpload {\n @Element() readonly host!: HTMLSixFileUploadElement;\n\n private fileInput?: HTMLInputElement;\n\n @State() isOver = false;\n\n /** Set to true if file control should be small. /\n @Prop() readonly compact: boolean = false;\n\n /* Label of the drop area. /\n @Prop() readonly label?: string;\n\n /* Set when button is disabled. /\n @Prop() readonly disabled = false;\n\n /* Accepted MIME-Types. /\n @Prop() readonly accept?: string;\n\n /* More than one file allowed. /\n @Prop() readonly multiple = false;\n\n /* Allowed max file size in bytes. /\n @Prop() readonly maxFileSize?: number;\n\n /* Triggers when a file is added. /\n @Event({ eventName: 'six-file-upload-success' }) success!: EventEmitter<SixFileUploadSuccessPayload>;\n\n /* Triggers when an uploaded file doesn't match MIME type or max file size. */\n @Event({ eventName: 'six-file-upload-failure' }) failure!: EventEmitter<SixFileUploadFailurePayload>;\n\n @Listen('dragenter', { capture: false })\n dragenterHandler() {\n if (!this.disabled) {\n this.isOver = true;\n }\n }\n\n @Listen('dragover', { capture: false })\n dragoverHandler() {\n if (!this.disabled) {\n this.isOver = true;\n }\n }\n\n @Listen('dragleave', { capture: false })\n dragleaveHandler() {\n if (!this.disabled) {\n this.isOver = false;\n }\n }\n\n @Listen('drop', { capture: false })\n dropHandler({ dataTransfer }: DragEvent) {\n if (!this.disabled) {\n this.isOver = false;\n if (dataTransfer != null) {\n this.handleFiles(dataTransfer.files);\n }\n }\n }\n\n private handleFiles = (files: FileList) => {\n if (this.disabled \|\| files.length === 0) {\n return;\n }\n\n if (!this.multiple && files.length > 1) {\n return this.failure.emit({ reason: 'Only one file is allowed.' });\n }\n\n for (const file of files) {\n if (file == null) {\n return;\n }\n\n let acceptedTypesList: string[] = [];\n if (this.accept != null) {\n acceptedTypesList = this.accept.replace(/\\s/g, '').split(',');\n }\n\n if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {\n const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';\n return this.failure.emit({ reason });\n }\n\n if (this.maxFileSize != null && file.size > this.maxFileSize) {\n const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n return this.failure.emit({ reason });\n }\n }\n\n const eventPayload: SixFileUploadSuccessPayload = this.multiple ? { files } : { file: files[0] };\n this.success.emit(eventPayload);\n };\n\n componentDidLoad() {\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.host.addEventListener(eventName, this.preventDefaults, false);\n document.body.addEventListener(eventName, this.preventDefaults, false);\n });\n }\n\n disconnectedCallback() {\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.host.removeEventListener(eventName, this.preventDefaults, false);\n document.body.removeEventListener(eventName, this.preventDefaults, false);\n });\n }\n\n private preventDefaults(e: Event) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n private onChange = () => {\n if (this.fileInput?.files != null) {\n const files = this.fileInput.files;\n this.handleFiles(files);\n this.fileInput.value = '';\n }\n };\n\n private renderLabel() {\n return (\n this.label ??\n (this.compact ? (\n 'Upload'\n ) : (\n <span>\n Drop files to upload, or <span class=\"six-file-upload__label--highlighted\">browse</span>\n </span>\n ))\n );\n }\n\n render() {\n const Container = this.compact ? 'six-button' : 'six-card';\n\n return (\n <div\n class={{\n 'six-file-upload': true,\n 'six-file-upload--disabled': this.disabled,\n }}\n >\n <Container\n class={{\n 'six-file-upload__container--compact': this.compact,\n 'six-file-upload__container--full': !this.compact,\n }}\n >\n {this.compact && (\n <span slot=\"prefix\">\n <six-icon class=\"six-file-upload__label-icon\">arrow_circle_up</six-icon>\n </span>\n )}\n <div\n class={{\n 'six-file-upload__drop-zone': true,\n 'six-file-upload__drop-zone--hover': this.isOver,\n 'six-file-upload__drop-zone--compact': this.compact,\n }}\n >\n <span>{this.renderLabel()}</span>\n <input\n class=\"six-file-upload__input\"\n type=\"file\"\n name=\"resume\"\n disabled={this.disabled}\n accept={this.accept}\n multiple={this.multiple}\n onChange={this.onChange}\n ref={(el) => (this.fileInput = el)}\n />\n </div>\n </Container>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-file-upload.js","sourceRoot":"","sources":["../../../src/components/six-file-upload/six-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\n\ninterface ISingleFile {\n file: File;\n}\n\ninterface IMultipleFiles {\n files: FileList;\n}\n\nexport type SixFileUploadSuccessPayload = ISingleFile \| IMultipleFiles;\n\nexport interface SixFileUploadFailurePayload {\n reason: string;\n}\n\n/*\n @since 2.0.0\n * @status experimental\n \n /\n@Component({\n tag: 'six-file-upload',\n styleUrl: 'six-file-upload.scss',\n scoped: true,\n shadow: false,\n})\nexport class SixFileUpload {\n @Element() readonly host!: HTMLSixFileUploadElement;\n\n private fileInput?: HTMLInputElement;\n\n @State() isOver = false;\n\n /** Set to true if file control should be small. /\n @Prop() readonly compact: boolean = false;\n\n /* Label of the drop area. /\n @Prop() readonly label?: string;\n\n /* Set when button is disabled. /\n @Prop() readonly disabled = false;\n\n /* Accepted MIME-Types. /\n @Prop() readonly accept?: string;\n\n /* More than one file allowed. /\n @Prop() readonly multiple = false;\n\n /* Allowed max file size in bytes. /\n @Prop() readonly maxFileSize?: number;\n\n /* Triggers when a file is added. /\n @Event({ eventName: 'six-file-upload-success' }) success!: EventEmitter<SixFileUploadSuccessPayload>;\n\n /* Triggers when an uploaded file doesn't match MIME type or max file size. */\n @Event({ eventName: 'six-file-upload-failure' }) failure!: EventEmitter<SixFileUploadFailurePayload>;\n\n @Listen('dragenter', { capture: false })\n dragenterHandler() {\n if (!this.disabled) {\n this.isOver = true;\n }\n }\n\n @Listen('dragover', { capture: false })\n dragoverHandler() {\n if (!this.disabled) {\n this.isOver = true;\n }\n }\n\n @Listen('dragleave', { capture: false })\n dragleaveHandler() {\n if (!this.disabled) {\n this.isOver = false;\n }\n }\n\n @Listen('drop', { capture: false })\n dropHandler({ dataTransfer }: DragEvent) {\n if (!this.disabled) {\n this.isOver = false;\n if (dataTransfer != null) {\n this.handleFiles(dataTransfer.files);\n }\n }\n }\n\n private handleFiles = (files: FileList) => {\n if (this.disabled \|\| files.length === 0) {\n return;\n }\n\n if (!this.multiple && files.length > 1) {\n return this.failure.emit({ reason: 'Only one file is allowed.' });\n }\n\n for (const file of files) {\n if (file == null) {\n return;\n }\n\n let acceptedTypesList: string[] = [];\n if (this.accept != null) {\n acceptedTypesList = this.accept.replace(/\\s/g, '').split(',');\n }\n\n if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {\n const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';\n return this.failure.emit({ reason });\n }\n\n if (this.maxFileSize != null && file.size > this.maxFileSize) {\n const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n return this.failure.emit({ reason });\n }\n }\n\n const eventPayload: SixFileUploadSuccessPayload = this.multiple ? { files } : { file: files[0] };\n this.success.emit(eventPayload);\n };\n\n componentDidLoad() {\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.host.addEventListener(eventName, this.preventDefaults, false);\n document.body.addEventListener(eventName, this.preventDefaults, false);\n });\n }\n\n disconnectedCallback() {\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.host.removeEventListener(eventName, this.preventDefaults, false);\n document.body.removeEventListener(eventName, this.preventDefaults, false);\n });\n }\n\n private preventDefaults(e: Event) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n private onChange = () => {\n if (this.fileInput?.files != null) {\n const files = this.fileInput.files;\n this.handleFiles(files);\n this.fileInput.value = '';\n }\n };\n\n private renderLabel() {\n return (\n this.label ??\n (this.compact ? (\n 'Upload'\n ) : (\n <span>\n Drop files to upload, or <span class=\"six-file-upload__label--highlighted\">browse</span>\n </span>\n ))\n );\n }\n\n render() {\n const Container = this.compact ? 'six-button' : 'six-card';\n\n return (\n <div\n class={{\n 'six-file-upload': true,\n 'six-file-upload--disabled': this.disabled,\n }}\n >\n <Container\n class={{\n 'six-file-upload__container--compact': this.compact,\n 'six-file-upload__container--full': !this.compact,\n }}\n >\n {this.compact && (\n <span slot=\"prefix\">\n <six-icon class=\"six-file-upload__label-icon\">arrow_circle_up</six-icon>\n </span>\n )}\n <div\n class={{\n 'six-file-upload__drop-zone': true,\n 'six-file-upload__drop-zone--hover': this.isOver,\n 'six-file-upload__drop-zone--compact': this.compact,\n }}\n >\n <span>{this.renderLabel()}</span>\n <input\n class=\"six-file-upload__input\"\n type=\"file\"\n name=\"resume\"\n disabled={this.disabled}\n accept={this.accept}\n multiple={this.multiple}\n onChange={this.onChange}\n ref={(el) => (this.fileInput = el)}\n />\n </div>\n </Container>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/six-footer/six-footer.css CHANGED Viewed

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 :host {
@@ -16,5 +16,5 @@
   text-align: center;
   width: 100%;
   background-color: var(--six-footer-background-color);
-  box-shadow: var(--six-shadow-x-large-top);
+  box-shadow: var(--six-shadow-medium-top);
 }

package/dist/collection/components/six-footer/six-footer.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { h } from "@stencil/core";
  */
 export class SixFooter {
     render() {
-        return (h("footer", { class: "six-footer" }, h("slot", null)));
+        return (h("footer", { key: '3208d35f8c2cec42795d713465cb1488ec2d4e57', class: "six-footer" }, h("slot", { key: '8f9854ed0e213425ea459947635993a1e6b29d54' })));
     }
     static get is() { return "six-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-footer/six-footer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-footer.js","sourceRoot":"","sources":["../../../src/components/six-footer/six-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;;GAKG;AAOH,MAAM,OAAO,SAAS;IACpB,MAAM;QACJ,OAAO,CACL,~~cAAQ,~~KAAK,EAAC,YAAY;YACxB,~~eAAQ~~,CACD,CACV,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the content of the footer.\n */\n\n@Component({\n tag: 'six-footer',\n styleUrl: 'six-footer.scss',\n shadow: true,\n})\nexport class SixFooter {\n render() {\n return (\n <footer class=\"six-footer\">\n <slot />\n </footer>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-footer.js","sourceRoot":"","sources":["../../../src/components/six-footer/six-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;;GAKG;AAOH,MAAM,OAAO,SAAS;IACpB,MAAM;QACJ,OAAO,CACL,+DAAQ,KAAK,EAAC,YAAY;YACxB,8DAAQ,CACD,CACV,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the content of the footer.\n */\n\n@Component({\n tag: 'six-footer',\n styleUrl: 'six-footer.scss',\n shadow: true,\n})\nexport class SixFooter {\n render() {\n return (\n <footer class=\"six-footer\">\n <slot />\n </footer>\n );\n }\n}\n"]}

package/dist/collection/components/six-group-label/six-group-label.css CHANGED Viewed

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 .form-control .form-control__label {

package/dist/collection/components/six-group-label/six-group-label.js CHANGED Viewed

@@ -47,7 +47,7 @@ export class SixGroupLabel {
         (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     }
     render() {
-        return (h(FormControl, { inputId: this.wrapperLabelId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: this.size, disabled: this.disabled, required: this.required }, h("slot", null)));
+        return (h(FormControl, { key: 'a518616f11a06ff39d4eef3654b43db9491749c2', inputId: this.wrapperLabelId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: this.size, disabled: this.disabled, required: this.required }, h("slot", { key: 'dc6946efe018060cd9c6c609b0e6f17d882ae7e0' })));
     }
     static get is() { return "six-group-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-group-label/six-group-label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-group-label.js","sourceRoot":"","sources":["../../../src/components/six-group-label/six-group-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,WAAW,MAAM,uDAAuD,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,aAAa;;QAChB,mBAAc,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC;QACjC,YAAO,GAAG,eAAe,EAAE,EAAE,CAAC;QAC9B,eAAU,GAAG,mBAAmB,EAAE,EAAE,CAAC;QAwCrC,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAChD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QACzD,CAAC,CAAC;+BAvCyB,KAAK;4BACR,KAAK;oBAGiC,QAAQ;qBAGtD,EAAE;wBAGC,EAAE;wBAGe,KAAK;wBAGtB,KAAK;;IAIxB,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,iBAAiB;;QACf,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC9E,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACjF,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,EAAC,WAAW,~~IACV~~,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,~~eAAa~~,CACD,CACf,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/*\n @since 1.1\n * @status stable\n \n @slot label - The wrapped component's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The label of wrapped component.\n * @part help-text - The help text of the wrapped component.\n /\n@Component({\n tag: 'six-group-label',\n styleUrl: 'six-group-label.scss',\n shadow: true,\n})\nexport class SixGroupLabel {\n private wrapperLabelId = `label-${++id}`;\n private labelId = `label-label-${id}`;\n private helpTextId = `label-help-text-${id}`;\n\n @Element() host!: HTMLSixGroupLabelElement;\n\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n\n /* The label's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* The wrapper label's label. Alternatively, you can use the label slot. /\n @Prop() label = '';\n\n /* The wrapper label's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* Set to true to disable the label. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set to true to show an asterisk beneath the label. */\n @Prop() required = false;\n\n @Watch('helpText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n }\n\n private handleSlotChange = () => {\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n };\n\n render() {\n return (\n <FormControl\n inputId={this.wrapperLabelId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n >\n <slot></slot>\n </FormControl>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-group-label.js","sourceRoot":"","sources":["../../../src/components/six-group-label/six-group-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,WAAW,MAAM,uDAAuD,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,aAAa;;QAChB,mBAAc,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC;QACjC,YAAO,GAAG,eAAe,EAAE,EAAE,CAAC;QAC9B,eAAU,GAAG,mBAAmB,EAAE,EAAE,CAAC;QAwCrC,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAChD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QACzD,CAAC,CAAC;+BAvCyB,KAAK;4BACR,KAAK;oBAGiC,QAAQ;qBAGtD,EAAE;wBAGC,EAAE;wBAGe,KAAK;wBAGtB,KAAK;;IAIxB,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,iBAAiB;;QACf,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC9E,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACjF,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,EAAC,WAAW,qDACV,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,8DAAa,CACD,CACf,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/*\n @since 1.1\n * @status stable\n \n @slot label - The wrapped component's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The label of wrapped component.\n * @part help-text - The help text of the wrapped component.\n /\n@Component({\n tag: 'six-group-label',\n styleUrl: 'six-group-label.scss',\n shadow: true,\n})\nexport class SixGroupLabel {\n private wrapperLabelId = `label-${++id}`;\n private labelId = `label-label-${id}`;\n private helpTextId = `label-help-text-${id}`;\n\n @Element() host!: HTMLSixGroupLabelElement;\n\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n\n /* The label's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* The wrapper label's label. Alternatively, you can use the label slot. /\n @Prop() label = '';\n\n /* The wrapper label's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* Set to true to disable the label. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set to true to show an asterisk beneath the label. */\n @Prop() required = false;\n\n @Watch('helpText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n }\n\n private handleSlotChange = () => {\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n };\n\n render() {\n return (\n <FormControl\n inputId={this.wrapperLabelId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n >\n <slot></slot>\n </FormControl>\n );\n }\n}\n"]}

package/dist/collection/components/six-header/six-header.css CHANGED Viewed

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 :host {
@@ -25,7 +25,7 @@
   background-color: var(--six-header-background-color);
   align-items: center;
   flex-wrap: wrap;
-  box-shadow: var(--six-shadow-x-large);
+  box-shadow: var(--six-shadow-medium);
   border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);
 }
 .six-header__logo {
@@ -48,6 +48,10 @@
 .six-header__menu--open, .six-header__logo--open, .six-header__custom--open, .six-header__search--open, .six-header__notification--open, .six-header__app-switcher--open, .six-header__profile--open {
   border-bottom: solid 0.25rem var(--six-header-border-color-open);
 }
+.six-header__app-switcher-dropdown {
+  display: flex;
+  align-items: center;
+}
 .six-header__selected-app {
   cursor: pointer;
   font-size: 0.9rem;

package/dist/collection/components/six-header/six-header.js CHANGED Viewed

@@ -66,6 +66,7 @@ export class SixHeader {
             this.selectedSection = this.openSearch ? Section.Search : Section.None;
         };
         this.shiftContent = false;
+        this.hideHamburgerMenu = false;
         this.openHamburgerMenu = false;
         this.openSearch = false;
         this.clickableLogo = false;
@@ -122,13 +123,24 @@ export class SixHeader {
             [Slot.Logo]: hasSlot(this.host, Slot.Logo),
         };
         if (this.hasSlot(Slot.AppSwitcher)) {
-            this.selectedApp = this.getSelectedApp();
+            this.updateSelectedApp();
         }
         if (this.hasSlot(Slot.Search)) {
             this.computeSearchOpenState();
         }
     }
-    getSelectedApp() {
+    connectedCallback() {
+        const appSwitcherSlot = getSlot(this.host, Slot.AppSwitcher);
+        if (appSwitcherSlot) {
+            this.mutationObserver = new MutationObserver((mutations) => {
+                if (mutations.some((mutation) => mutation.type === 'childList' || mutation.type === 'attributes')) {
+                    this.updateSelectedApp();
+                }
+            });
+            this.mutationObserver.observe(appSwitcherSlot, { attributes: true, childList: true, subtree: true });
+        }
+    }
+    updateSelectedApp() {
         var _a;
         // there are more concise ways to select the first checked menu item, but this is one that works for jest
         const element = getSlot(this.host, Slot.AppSwitcher);
@@ -136,35 +148,38 @@ export class SixHeader {
             return undefined;
         }
         const items = Array.from(element.querySelectorAll('six-menu-item'));
-        const firstCheckedMenuItem = items.find((item) => item.hasAttribute('checked'));
-        return (_a = firstCheckedMenuItem === null || firstCheckedMenuItem === void 0 ? void 0 : firstCheckedMenuItem.textContent) !== null && _a !== void 0 ? _a : undefined;
+        const firstCheckedMenuItem = items.find((item) => item.hasAttribute('checked') && item.getAttribute('checked') !== 'false');
+        this.selectedApp = (_a = firstCheckedMenuItem === null || firstCheckedMenuItem === void 0 ? void 0 : firstCheckedMenuItem.textContent) !== null && _a !== void 0 ? _a : undefined;
     }
     disconnectedCallback() {
+        var _a;
         this.eventListeners.removeAll();
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        const search = this.hasSlot(Slot.Search) && (h("section", { class: {
+        const hamburgerMenu = !this.hideHamburgerMenu && (h("section", { key: 'fb78ad479f72a484bd7f7d976106628ad2801f63', class: "six-header__menu" }, h("six-icon-button", { key: '80bf31342d363b5fe1cff6bede3796dda10110cf', name: this.openHamburgerMenu ? 'menu_open' : 'menu', ref: this.setupMenu })));
+        const search = this.hasSlot(Slot.Search) && (h("section", { key: '6c31756cf58b9804ef66af83ff96db81d480827b', class: {
                 'six-header__search': true,
                 'six-header__search--open': this.isSectionSelected(Section.Search),
-            } }, h("six-icon-button", { name: "search", onClick: () => this.toggleSearch(), "data-testid": "search-trigger" })));
-        const notifications = this.hasSlot(Slot.Notifications) && (h("section", { class: "six-header__notification" }, h("slot", { name: Slot.Notifications })));
-        const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (h("section", { class: {
+            } }, h("six-icon-button", { key: '3af9901f916fcdef235232075784a8e174516df5', name: "search", onClick: () => this.toggleSearch(), "data-testid": "search-trigger" })));
+        const notifications = this.hasSlot(Slot.Notifications) && (h("section", { key: 'f987048f9a787006209195e08e1410287173b1db', class: "six-header__notification" }, h("slot", { key: '6b868840d2c5da71d144fe70ee3d788a9058946e', name: Slot.Notifications })));
+        const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (h("section", { key: '319335bd8baedff666831f02b1e069e90594caff', class: {
                 'six-header__app-switcher': true,
                 'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),
-            } }, h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("six-icon-button", { name: "apps", slot: "trigger" }), h("slot", { name: Slot.AppSwitcher }))));
-        const profile = this.hasSlot(Slot.Profile) && (h("section", { class: {
+            } }, h("six-dropdown", { key: 'dbc3e051599e7f5c17e0c5fd21ecf0ec94d38ddc', distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("div", { key: '8f67ad4d5658a003177364f11188b26edc09b8b3', slot: "trigger", class: "six-header__app-switcher-dropdown" }, h("a", { key: '62748cf2060348ccc971ae61b0768a5771f6cd5c', onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-icon-button", { key: '2e8c73e6e9b72bf98985d3cd4d5ba92519edbeb2', name: "apps" })), h("slot", { key: '70056ce4c0154a5122854377ad16549fba8c7a1e', name: Slot.AppSwitcher }))));
+        const profile = this.hasSlot(Slot.Profile) && (h("section", { key: '98a2ec4173e732e113a904dd0e6eea123f0957f4', class: {
                 'six-header__profile': true,
                 'six-header__profile--open': this.isSectionSelected(Section.Profile),
-            } }, h("six-dropdown", { distance: 17, skidding: 20, placement: "bottom-end", ref: this.setupProfile }, h("slot", { name: "profile-avatar", slot: "trigger" }), h("slot", { name: "profile-menu" }))));
+            } }, h("six-dropdown", { key: '8b60c2141215c35e9115fb233eaa3e7884459bd9', distance: 17, skidding: 20, placement: "bottom-end", ref: this.setupProfile }, h("slot", { key: '745751f79e8580a192104b4a9893544a7d51fb9b', name: "profile-avatar", slot: "trigger" }), h("slot", { key: '51954bfd0865bf952797e7b29d777dcf2d262278', name: "profile-menu" }))));
         const logo = this.hasSlot(Slot.Logo) ? (h("section", null, h("slot", { name: "logo" }))) : (h("section", { class: {
                 'six-header__logo': true,
                 'six-header__logo--clickable': this.clickableLogo,
             }, ref: this.setupLogo }, h("svg", { height: "20", viewBox: "0 0 90 26", xmlns: "http://www.w3.org/2000/svg" }, h("title", null, "SIX"), h("g", { fill: "#DE3919", "fill-rule": "nonzero" }, h("path", { d: "m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525" }), h("path", { d: "m42.16.324h5.21v24.806h-5.21z" }), h("path", { d: "m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545" })))));
-        return (h(Host, null, h("header", { class: "six-header" }, h("section", { class: "six-header__menu" }, h("six-icon-button", { name: this.openHamburgerMenu ? 'menu_open' : 'menu', ref: this.setupMenu })), logo, h("section", { class: "six-header__placeholder" }), h("section", { class: "six-header__custom" }, h("slot", null)), search, notifications, appSwitcher, profile), h("div", { class: {
+        return (h(Host, { key: '0b346dcbc076e01148e9dfcfb357e4e2ee6afdae' }, h("header", { key: '9a9e22af30dc5b5f057a9e78aa505d4e221e0572', class: "six-header" }, hamburgerMenu, logo, h("section", { key: '2a8cefbeb528e2a658604aadc3c0e14ac3f2475d', class: "six-header__placeholder" }), h("section", { key: 'c581467ed29411e73495453aa221e6778beb785f', class: "six-header__custom" }, h("slot", { key: 'a7852b67ff9c6364df2b05c4865f5776a83e412b' })), search, notifications, appSwitcher, profile), h("div", { key: 'a1c39c872a97b466805a5edf86f918513772f440', class: {
                 'six-header__search-field': true,
                 'six-header__search-field--visible': this.isSectionSelected(Section.Search),
                 'six-header__search-field--shift-content': this.shiftContent,
-            } }, h("slot", { name: Slot.Search }))));
+            } }, h("slot", { key: 'df9347b8759b1793909cf1de124872f4444928b6', name: Slot.Search }))));
     }
     static get is() { return "six-header"; }
     static get encapsulation() { return "shadow"; }
@@ -199,6 +214,24 @@ export class SixHeader {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "hideHamburgerMenu": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set whether the hamburger menu should be visible or not"
+                },
+                "attribute": "hide-hamburger-menu",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "openHamburgerMenu": {
                 "type": "boolean",
                 "mutable": false,
@@ -396,8 +429,9 @@ export class SixHeader {
                 "complexType": {
                     "signature": "(openState: boolean) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "openState",
+                            "type": "boolean",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/six-header/six-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-header.js","sourceRoot":"","sources":["../../../src/components/six-header/six-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot, hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\n\nexport interface SixHeaderAppSwitcherSelectPayload {\n selectedLabel: string;\n name: string;\n item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderProfileSelectPayload {\n selectedLabel: string;\n name: string;\n item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderSearchFieldToggle {\n visible: boolean;\n}\n\nenum Section {\n None,\n Search,\n AppSwitcher,\n Profile,\n}\n\nenum Slot {\n Search = 'search-field',\n Notifications = 'notifications',\n AppSwitcher = 'app-switcher-menu',\n Profile = 'profile-menu',\n Logo = 'logo',\n}\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define a custom component that is included in the header.\n * @slot search-field - Used to define the search field component in the header.\n * @slot notifications - Used to define the notification component in the header.\n * @slot app-switcher-menu - Used to define the application switcher menu in the header.\n * @slot profile-menu - Used to define the profile menu in the header.\n * @slot profile-avatar - Used to define the avator in the header.\n /\n\n@Component({\n tag: 'six-header',\n styleUrl: 'six-header.scss',\n shadow: true,\n assetsDirs: ['assets'],\n})\nexport class SixHeader {\n /* Indicates if content should be shifted down when search field is visible. /\n @Prop() shiftContent = false;\n\n /* Set the hamburger menu icon to open or closed state /\n @Prop() openHamburgerMenu = false;\n\n /* Set the header search to be in an open or closed state /\n @Prop() openSearch = false;\n\n /* Set whether the logo should be clickable /\n @Prop() clickableLogo = false;\n\n @Watch('openSearch')\n handleOpenSearchChange() {\n this.computeSearchOpenState();\n }\n\n /* Sets open state for search /\n @Method()\n async setSearchOpenState(openState: boolean) {\n if (this.selectedSection === Section.Search && !openState) {\n this.selectedSection = Section.None;\n } else if (openState && this.selectedSection !== Section.Search) {\n this.selectedSection = Section.Search;\n }\n }\n\n /* Get open state for search /\n @Method()\n async getIsSearchOpen() {\n return this.selectedSection === Section.Search;\n }\n\n /* Emitted when the name of the selected app is clicked. /\n @Event({ eventName: 'six-header-app-name-clicked' }) sixAppNameClicked!: EventEmitter<EmptyPayload>;\n\n /* Emitted when a menu item is in the app switcher menu is selected. /\n @Event({ eventName: 'six-header-app-switcher-select' })\n sixAppSwitcherSelect!: EventEmitter<SixHeaderAppSwitcherSelectPayload>;\n\n /* Emitted when a menu item is in the profile menu is selected. /\n @Event({ eventName: 'six-header-profile-select' }) sixProfileSelect!: EventEmitter<SixHeaderProfileSelectPayload>;\n\n /* Emitted when the hamburger menu is clicked. /\n @Event({ eventName: 'six-header-hamburger-menu-clicked' }) sixHamburgerClick!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the header logo is clicked. /\n @Event({ eventName: 'six-header-logo-clicked' }) sixLogoClick!: EventEmitter<EmptyPayload>;\n\n /* Emitted when search field is toggled. */\n @Event({ eventName: 'six-header-search-field-toggle' })\n sixSearchFieldToggle!: EventEmitter<SixHeaderSearchFieldToggle>;\n\n @Element() host!: HTMLSixHeaderElement;\n\n private eventListeners = new EventListeners();\n\n private slots?: Record<Slot, boolean>;\n\n @State() selectedApp?: string;\n @State() selectedSection?: Section;\n\n private hasSlot(slot: Slot): boolean {\n if (this.slots == null) {\n return false;\n }\n return this.slots[slot];\n }\n\n private isSectionSelected(value: Section) {\n return value === this.selectedSection;\n }\n\n private selectSection(section: Section) {\n return () => (this.selectedSection = section);\n }\n\n private toggleSearch() {\n const visible = this.selectedSection !== Section.Search;\n this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;\n this.sixSearchFieldToggle.emit({ visible });\n if (this.selectedSection === Section.Search) {\n // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772\n setTimeout(async () => {\n const slot = getSlot(this.host, Slot.Search);\n slot?.shadowRoot?.querySelector('six-input')?.setFocus();\n }, 50);\n }\n }\n\n private setupMenu = (el?: HTMLSixIconButtonElement) => {\n if (el == null) return;\n\n this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());\n };\n\n private setupLogo = (el?: HTMLElement) => {\n if (!this.clickableLogo \|\| el == null) return;\n\n this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());\n };\n\n private setupProfile = (el?: HTMLSixDropdownElement) => {\n if (el == null) return;\n\n this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));\n this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n const { name, item } = (event as CustomEvent).detail;\n this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });\n });\n };\n\n private setupAppSwitcher = (el?: HTMLSixDropdownElement) => {\n if (el == null) return;\n\n this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));\n this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n const { name, item } = (event as CustomEvent).detail;\n this.selectedApp = item.innerText;\n this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });\n });\n };\n\n private appNameClicked = () => this.sixAppNameClicked.emit();\n\n private computeSearchOpenState = () => {\n this.selectedSection = this.openSearch ? Section.Search : Section.None;\n };\n\n componentWillLoad() {\n this.slots = {\n [Slot.Search]: hasSlot(this.host, Slot.Search),\n [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),\n [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),\n [Slot.Profile]: hasSlot(this.host, Slot.Profile),\n [Slot.Logo]: hasSlot(this.host, Slot.Logo),\n };\n\n if (this.hasSlot(Slot.AppSwitcher)) {\n this.selectedApp = this.getSelectedApp();\n }\n\n if (this.hasSlot(Slot.Search)) {\n this.computeSearchOpenState();\n }\n }\n\n private getSelectedApp(): string \| undefined {\n // there are more concise ways to select the first checked menu item, but this is one that works for jest\n const element = getSlot(this.host, Slot.AppSwitcher);\n if (element == null) {\n return undefined;\n }\n const items = Array.from(element.querySelectorAll('six-menu-item'));\n const firstCheckedMenuItem = items.find((item: HTMLElement) => item.hasAttribute('checked'));\n return firstCheckedMenuItem?.textContent ?? undefined;\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n render() {\n const search = this.hasSlot(Slot.Search) && (\n <section\n class={{\n 'six-header__search': true,\n 'six-header__search--open': this.isSectionSelected(Section.Search),\n }}\n >\n <six-icon-button name=\"search\" onClick={() => this.toggleSearch()} data-testid=\"search-trigger\" />\n </section>\n );\n\n const notifications = this.hasSlot(Slot.Notifications) && (\n <section class=\"six-header__notification\">\n <slot name={Slot.Notifications} />\n </section>\n );\n\n const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (\n <section\n class={{\n 'six-header__app-switcher': true,\n 'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),\n }}\n >\n <a onClick={this.appNameClicked} class=\"six-header__selected-app\">\n {this.selectedApp}\n </a>\n <six-dropdown distance={13} skidding={20} placement=\"bottom-end\" ref={this.setupAppSwitcher}>\n <six-icon-button name=\"apps\" slot=\"trigger\" />\n <slot name={Slot.AppSwitcher} />\n </six-dropdown>\n </section>\n );\n\n const profile = this.hasSlot(Slot.Profile) && (\n <section\n class={{\n 'six-header__profile': true,\n 'six-header__profile--open': this.isSectionSelected(Section.Profile),\n }}\n >\n <six-dropdown distance={17} skidding={20} placement=\"bottom-end\" ref={this.setupProfile}>\n <slot name=\"profile-avatar\" slot=\"trigger\" />\n <slot name=\"profile-menu\" />\n </six-dropdown>\n </section>\n );\n\n const logo = this.hasSlot(Slot.Logo) ? (\n <section>\n <slot name=\"logo\" />\n </section>\n ) : (\n <section\n class={{\n 'six-header__logo': true,\n 'six-header__logo--clickable': this.clickableLogo,\n }}\n ref={this.setupLogo}\n >\n <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <title>SIX</title>\n <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\" />\n <path d=\"m42.16.324h5.21v24.806h-5.21z\" />\n <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\" />\n </g>\n </svg>\n </section>\n );\n\n return (\n <Host>\n <header class=\"six-header\">\n <section class=\"six-header__menu\">\n <six-icon-button name={this.openHamburgerMenu ? 'menu_open' : 'menu'} ref={this.setupMenu} />\n </section>\n\n {logo}\n\n <section class=\"six-header__placeholder\" />\n\n <section class=\"six-header__custom\">\n <slot />\n </section>\n\n {search}\n\n {notifications}\n\n {appSwitcher}\n\n {profile}\n </header>\n\n <div\n class={{\n 'six-header__search-field': true,\n 'six-header__search-field--visible': this.isSectionSelected(Section.Search),\n 'six-header__search-field--shift-content': this.shiftContent,\n }}\n >\n <slot name={Slot.Search} />\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-header.js","sourceRoot":"","sources":["../../../src/components/six-header/six-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot, hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\n\nexport interface SixHeaderAppSwitcherSelectPayload {\n selectedLabel: string;\n name: string;\n item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderProfileSelectPayload {\n selectedLabel: string;\n name: string;\n item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderSearchFieldToggle {\n visible: boolean;\n}\n\nenum Section {\n None,\n Search,\n AppSwitcher,\n Profile,\n}\n\nenum Slot {\n Search = 'search-field',\n Notifications = 'notifications',\n AppSwitcher = 'app-switcher-menu',\n Profile = 'profile-menu',\n Logo = 'logo',\n}\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define a custom component that is included in the header.\n * @slot search-field - Used to define the search field component in the header.\n * @slot notifications - Used to define the notification component in the header.\n * @slot app-switcher-menu - Used to define the application switcher menu in the header.\n * @slot profile-menu - Used to define the profile menu in the header.\n * @slot profile-avatar - Used to define the avator in the header.\n /\n\n@Component({\n tag: 'six-header',\n styleUrl: 'six-header.scss',\n shadow: true,\n assetsDirs: ['assets'],\n})\nexport class SixHeader {\n /* Indicates if content should be shifted down when search field is visible. /\n @Prop() shiftContent = false;\n\n /* Set whether the hamburger menu should be visible or not /\n @Prop() hideHamburgerMenu = false;\n\n /* Set the hamburger menu icon to open or closed state /\n @Prop() openHamburgerMenu = false;\n\n /* Set the header search to be in an open or closed state /\n @Prop() openSearch = false;\n\n /* Set whether the logo should be clickable /\n @Prop() clickableLogo = false;\n\n @Watch('openSearch')\n handleOpenSearchChange() {\n this.computeSearchOpenState();\n }\n\n /* Sets open state for search /\n @Method()\n async setSearchOpenState(openState: boolean) {\n if (this.selectedSection === Section.Search && !openState) {\n this.selectedSection = Section.None;\n } else if (openState && this.selectedSection !== Section.Search) {\n this.selectedSection = Section.Search;\n }\n }\n\n /* Get open state for search /\n @Method()\n async getIsSearchOpen() {\n return this.selectedSection === Section.Search;\n }\n\n /* Emitted when the name of the selected app is clicked. /\n @Event({ eventName: 'six-header-app-name-clicked' }) sixAppNameClicked!: EventEmitter<EmptyPayload>;\n\n /* Emitted when a menu item is in the app switcher menu is selected. /\n @Event({ eventName: 'six-header-app-switcher-select' })\n sixAppSwitcherSelect!: EventEmitter<SixHeaderAppSwitcherSelectPayload>;\n\n /* Emitted when a menu item is in the profile menu is selected. /\n @Event({ eventName: 'six-header-profile-select' }) sixProfileSelect!: EventEmitter<SixHeaderProfileSelectPayload>;\n\n /* Emitted when the hamburger menu is clicked. /\n @Event({ eventName: 'six-header-hamburger-menu-clicked' }) sixHamburgerClick!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the header logo is clicked. /\n @Event({ eventName: 'six-header-logo-clicked' }) sixLogoClick!: EventEmitter<EmptyPayload>;\n\n /* Emitted when search field is toggled. */\n @Event({ eventName: 'six-header-search-field-toggle' })\n sixSearchFieldToggle!: EventEmitter<SixHeaderSearchFieldToggle>;\n\n @Element() host!: HTMLSixHeaderElement;\n\n private eventListeners = new EventListeners();\n\n private slots?: Record<Slot, boolean>;\n\n private mutationObserver?: MutationObserver;\n\n @State() selectedApp?: string;\n @State() selectedSection?: Section;\n\n private hasSlot(slot: Slot): boolean {\n if (this.slots == null) {\n return false;\n }\n return this.slots[slot];\n }\n\n private isSectionSelected(value: Section) {\n return value === this.selectedSection;\n }\n\n private selectSection(section: Section) {\n return () => (this.selectedSection = section);\n }\n\n private toggleSearch() {\n const visible = this.selectedSection !== Section.Search;\n this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;\n this.sixSearchFieldToggle.emit({ visible });\n if (this.selectedSection === Section.Search) {\n // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772\n setTimeout(async () => {\n const slot = getSlot(this.host, Slot.Search);\n slot?.shadowRoot?.querySelector('six-input')?.setFocus();\n }, 50);\n }\n }\n\n private setupMenu = (el?: HTMLSixIconButtonElement) => {\n if (el == null) return;\n\n this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());\n };\n\n private setupLogo = (el?: HTMLElement) => {\n if (!this.clickableLogo \|\| el == null) return;\n\n this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());\n };\n\n private setupProfile = (el?: HTMLSixDropdownElement) => {\n if (el == null) return;\n\n this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));\n this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n const { name, item } = (event as CustomEvent).detail;\n this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });\n });\n };\n\n private setupAppSwitcher = (el?: HTMLSixDropdownElement) => {\n if (el == null) return;\n\n this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));\n this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n const { name, item } = (event as CustomEvent).detail;\n this.selectedApp = item.innerText;\n this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });\n });\n };\n\n private appNameClicked = () => this.sixAppNameClicked.emit();\n\n private computeSearchOpenState = () => {\n this.selectedSection = this.openSearch ? Section.Search : Section.None;\n };\n\n componentWillLoad() {\n this.slots = {\n [Slot.Search]: hasSlot(this.host, Slot.Search),\n [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),\n [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),\n [Slot.Profile]: hasSlot(this.host, Slot.Profile),\n [Slot.Logo]: hasSlot(this.host, Slot.Logo),\n };\n\n if (this.hasSlot(Slot.AppSwitcher)) {\n this.updateSelectedApp();\n }\n\n if (this.hasSlot(Slot.Search)) {\n this.computeSearchOpenState();\n }\n }\n\n connectedCallback() {\n const appSwitcherSlot = getSlot(this.host, Slot.AppSwitcher);\n if (appSwitcherSlot) {\n this.mutationObserver = new MutationObserver((mutations) => {\n if (mutations.some((mutation) => mutation.type === 'childList' \|\| mutation.type === 'attributes')) {\n this.updateSelectedApp();\n }\n });\n this.mutationObserver.observe(appSwitcherSlot, { attributes: true, childList: true, subtree: true });\n }\n }\n\n private updateSelectedApp() {\n // there are more concise ways to select the first checked menu item, but this is one that works for jest\n const element = getSlot(this.host, Slot.AppSwitcher);\n if (element == null) {\n return undefined;\n }\n const items = Array.from(element.querySelectorAll('six-menu-item'));\n const firstCheckedMenuItem = items.find(\n (item) => item.hasAttribute('checked') && item.getAttribute('checked') !== 'false'\n );\n this.selectedApp = firstCheckedMenuItem?.textContent ?? undefined;\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n this.mutationObserver?.disconnect();\n }\n\n render() {\n const hamburgerMenu = !this.hideHamburgerMenu && (\n <section class=\"six-header__menu\">\n <six-icon-button name={this.openHamburgerMenu ? 'menu_open' : 'menu'} ref={this.setupMenu} />\n </section>\n );\n\n const search = this.hasSlot(Slot.Search) && (\n <section\n class={{\n 'six-header__search': true,\n 'six-header__search--open': this.isSectionSelected(Section.Search),\n }}\n >\n <six-icon-button name=\"search\" onClick={() => this.toggleSearch()} data-testid=\"search-trigger\" />\n </section>\n );\n\n const notifications = this.hasSlot(Slot.Notifications) && (\n <section class=\"six-header__notification\">\n <slot name={Slot.Notifications} />\n </section>\n );\n\n const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (\n <section\n class={{\n 'six-header__app-switcher': true,\n 'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),\n }}\n >\n <six-dropdown distance={13} skidding={20} placement=\"bottom-end\" ref={this.setupAppSwitcher}>\n <div slot=\"trigger\" class=\"six-header__app-switcher-dropdown\">\n <a onClick={this.appNameClicked} class=\"six-header__selected-app\">\n {this.selectedApp}\n </a>\n <six-icon-button name=\"apps\" />\n </div>\n <slot name={Slot.AppSwitcher} />\n </six-dropdown>\n </section>\n );\n\n const profile = this.hasSlot(Slot.Profile) && (\n <section\n class={{\n 'six-header__profile': true,\n 'six-header__profile--open': this.isSectionSelected(Section.Profile),\n }}\n >\n <six-dropdown distance={17} skidding={20} placement=\"bottom-end\" ref={this.setupProfile}>\n <slot name=\"profile-avatar\" slot=\"trigger\" />\n <slot name=\"profile-menu\" />\n </six-dropdown>\n </section>\n );\n\n const logo = this.hasSlot(Slot.Logo) ? (\n <section>\n <slot name=\"logo\" />\n </section>\n ) : (\n <section\n class={{\n 'six-header__logo': true,\n 'six-header__logo--clickable': this.clickableLogo,\n }}\n ref={this.setupLogo}\n >\n <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <title>SIX</title>\n <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\" />\n <path d=\"m42.16.324h5.21v24.806h-5.21z\" />\n <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\" />\n </g>\n </svg>\n </section>\n );\n\n return (\n <Host>\n <header class=\"six-header\">\n {hamburgerMenu}\n\n {logo}\n\n <section class=\"six-header__placeholder\" />\n\n <section class=\"six-header__custom\">\n <slot />\n </section>\n\n {search}\n\n {notifications}\n\n {appSwitcher}\n\n {profile}\n </header>\n\n <div\n class={{\n 'six-header__search-field': true,\n 'six-header__search-field--visible': this.isSectionSelected(Section.Search),\n 'six-header__search-field--shift-content': this.shiftContent,\n }}\n >\n <slot name={Slot.Search} />\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/six-header/test/six-header.spec.js CHANGED Viewed

@@ -1,6 +1,14 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SixHeader } from "../six-header";
 describe('six-header', () => {
+    beforeEach(() => {
+        const mutationObserverMock = jest.fn(function MutationObserver() {
+            this.observe = jest.fn();
+            this.disconnect = jest.fn();
+            return this;
+        });
+        global.MutationObserver = mutationObserverMock;
+    });
     it('renders', async () => {
         const page = await newSpecPage({
             components: [SixHeader],
@@ -76,8 +84,8 @@ describe('six-header', () => {
         // given
         const html = `<six-header>
                     <six-menu slot="app-switcher-menu">
-                      <six-menu-item checked="checked">Custody</six-menu-item>
-                      <six-menu-item>Swiss Interbank Clearing</six-menu-item>
+                      <six-menu-item checked="false">Custody</six-menu-item>
+                      <six-menu-item checked="true">Swiss Interbank Clearing</six-menu-item>
                     </six-menu>
                   </six-header>`;
         // when
@@ -111,9 +119,11 @@ describe('six-header', () => {
               <slot></slot>
             </section>
             <section class="six-header__app-switcher">
-                <a class="six-header__selected-app">Custody</a>
                 <six-dropdown distance="13" placement="bottom-end" skidding="20">
-                  <six-icon-button name="apps" slot="trigger"></six-icon-button>
+                  <div class="six-header__app-switcher-dropdown" slot="trigger">
+                    <a class="six-header__selected-app">Swiss Interbank Clearing</a>
+                    <six-icon-button name="apps"></six-icon-button>
+                  </div>
                   <slot name="app-switcher-menu"></slot>
                </six-dropdown>
            </section>
@@ -123,11 +133,45 @@ describe('six-header', () => {
           </div>
         </mock:shadow-root>
         <six-menu slot="app-switcher-menu">
-            <six-menu-item checked="checked">Custody</six-menu-item>
-            <six-menu-item>Swiss Interbank Clearing</six-menu-item>
+            <six-menu-item checked="false">Custody</six-menu-item>
+            <six-menu-item checked="true">Swiss Interbank Clearing</six-menu-item>
         </six-menu>
       </six-header>
     `);
     });
+    it('renders without hamburger menu', async () => {
+        const page = await newSpecPage({
+            components: [SixHeader],
+            html: `<six-header hide-hamburger-menu="true"></six-header>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-header hide-hamburger-menu="true">
+        <mock:shadow-root>
+          <header class="six-header">
+            <section class="six-header__logo">
+            <svg height="20" viewBox="0 0 90 26" xmlns="http://www.w3.org/2000/svg">
+              <title>
+                SIX
+              </title>
+              <g fill="#DE3919" fill-rule="nonzero">
+                <path d="m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525"></path>
+                <path d="m42.16.324h5.21v24.806h-5.21z"></path>
+                <path d="m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545"></path>
+              </g>
+            </svg>
+            </section>
+            <section class="six-header__placeholder"></section>
+            <section class="six-header__custom">
+              <slot></slot>
+            </section>
+          </header>
+          <div class="six-header__search-field">
+            <slot name="search-field"></slot>
+          </div>
+        </mock:shadow-root>
+      </six-header>
+  `);
+    });
 });
 //# sourceMappingURL=six-header.spec.js.map

package/dist/collection/components/six-header/test/six-header.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-header.spec.js","sourceRoot":"","sources":["../../../../src/components/six-header/test/six-header.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,2BAA2B;SAClC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,QAAQ;QACR,MAAM,IAAI,GAAG,6DAA6D,CAAC;QAE3E,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;QAEH,OAAO;QACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,QAAQ;QACR,MAAM,IAAI,GAAG;;;;;gCAKe,CAAC;QAE7B,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;QAEH,OAAO;QACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyC7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixHeader } from '../six-header';\n\ndescribe('six-header', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [SixHeader],\n html: `<six-header></six-header>`,\n });\n expect(page.root).toEqualHtml(`\n <six-header>\n <mock:shadow-root>\n <header class=\"six-header\">\n <section class=\"six-header__menu\">\n <six-icon-button name=\"menu\"></six-icon-button>\n </section>\n <section class=\"six-header__logo\">\n <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <title>\n SIX\n </title>\n <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\"></path>\n <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\n <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\"></path>\n </g>\n </svg>\n\n </section>\n <section class=\"six-header__placeholder\"></section>\n <section class=\"six-header__custom\">\n <slot></slot>\n </section>\n </header>\n <div class=\"six-header__search-field\">\n <slot name=\"search-field\"></slot>\n </div>\n </mock:shadow-root>\n </six-header>\n `);\n });\n\n it('should render custom logo ', async () => {\n // given\n const html = `<six-header><div slot=\"logo\">custom logo</div></six-header>`;\n\n // when\n const page = await newSpecPage({\n components: [SixHeader],\n html: html,\n });\n\n // then\n expect(page.root).toEqualHtml(`\n <six-header>\n <mock:shadow-root>\n <header class=\"six-header\">\n <section class=\"six-header__menu\">\n <six-icon-button name=\"menu\"></six-icon-button>\n </section>\n <section>\n <slot name=\"logo\"></slot>\n </section>\n <section class=\"six-header__placeholder\"></section>\n <section class=\"six-header__custom\">\n <slot></slot>\n </section>\n </header>\n <div class=\"six-header__search-field\">\n <slot name=\"search-field\"></slot>\n </div>\n </mock:shadow-root>\n <div slot=\"logo\">\n custom logo\n </div>\n </six-header>\n `);\n });\n\n it('should render app switcher', async () => {\n // given\n const html = `<six-header>\n <six-menu slot=\"app-switcher-menu\">\n <six-menu-item checked=\"checked\">Custody</six-menu-item>\n <six-menu-item>Swiss Interbank Clearing</six-menu-item>\n </six-menu>\n </six-header>`;\n\n // when\n const page = await newSpecPage({\n components: [SixHeader],\n html: html,\n });\n\n // then\n expect(page.root).toEqualHtml(`\n <six-header>\n <mock:shadow-root>\n <header class=\"six-header\">\n <section class=\"six-header__menu\">\n <six-icon-button name=\"menu\"></six-icon-button>\n </section>\n <section class=\"six-header__logo\">\n <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <title>\n SIX\n </title>\n <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\"></path>\n <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\n <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\"></path>\n </g>\n </svg>\n\n </section>\n <section class=\"six-header__placeholder\"></section>\n <section class=\"six-header__custom\">\n <slot></slot>\n </section>\n <section class=\"six-header__app-switcher\">\n <a class=\"six-header__selected-app\">Custody</a>\n <six-dropdown distance=\"13\" placement=\"bottom-end\" skidding=\"20\">\n <six-icon-button name=\"apps\" slot=\"trigger\"></six-icon-button>\n <slot name=\"app-switcher-menu\"></slot>\n </six-dropdown>\n </section>\n </header>\n <div class=\"six-header__search-field\">\n <slot name=\"search-field\"></slot>\n </div>\n </mock:shadow-root>\n <six-menu slot=\"app-switcher-menu\">\n <six-menu-item checked=\"checked\">Custody</six-menu-item>\n <six-menu-item>Swiss Interbank Clearing</six-menu-item>\n </six-menu>\n </six-header>\n `);\n });\n});\n"]}
1	+ {"version":3,"file":"six-header.spec.js","sourceRoot":"","sources":["../../../../src/components/six-header/test/six-header.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,oBAAoB,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,gBAAgB;YAC5D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;YACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;YAC5B,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,gBAAgB,GAAG,oBAAoB,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,2BAA2B;SAClC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,QAAQ;QACR,MAAM,IAAI,GAAG,6DAA6D,CAAC;QAE3E,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;QAEH,OAAO;QACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,QAAQ;QACR,MAAM,IAAI,GAAG;;;;;gCAKe,CAAC;QAE7B,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;QAEH,OAAO;QACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2C7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,sDAAsD;SAC7D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2B/B,CAAC,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixHeader } from '../six-header';\n\ndescribe('six-header', () => {\n beforeEach(() => {\n const mutationObserverMock = jest.fn(function MutationObserver(this: MutationObserver): MutationObserver {\n this.observe = jest.fn();\n this.disconnect = jest.fn();\n return this;\n });\n global.MutationObserver = mutationObserverMock;\n });\n\n it('renders', async () => {\n const page = await newSpecPage({\n components: [SixHeader],\n html: `<six-header></six-header>`,\n });\n expect(page.root).toEqualHtml(`\n <six-header>\n <mock:shadow-root>\n <header class=\"six-header\">\n <section class=\"six-header__menu\">\n <six-icon-button name=\"menu\"></six-icon-button>\n </section>\n <section class=\"six-header__logo\">\n <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <title>\n SIX\n </title>\n <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\"></path>\n <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\n <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\"></path>\n </g>\n </svg>\n\n </section>\n <section class=\"six-header__placeholder\"></section>\n <section class=\"six-header__custom\">\n <slot></slot>\n </section>\n </header>\n <div class=\"six-header__search-field\">\n <slot name=\"search-field\"></slot>\n </div>\n </mock:shadow-root>\n </six-header>\n `);\n });\n\n it('should render custom logo ', async () => {\n // given\n const html = `<six-header><div slot=\"logo\">custom logo</div></six-header>`;\n\n // when\n const page = await newSpecPage({\n components: [SixHeader],\n html: html,\n });\n\n // then\n expect(page.root).toEqualHtml(`\n <six-header>\n <mock:shadow-root>\n <header class=\"six-header\">\n <section class=\"six-header__menu\">\n <six-icon-button name=\"menu\"></six-icon-button>\n </section>\n <section>\n <slot name=\"logo\"></slot>\n </section>\n <section class=\"six-header__placeholder\"></section>\n <section class=\"six-header__custom\">\n <slot></slot>\n </section>\n </header>\n <div class=\"six-header__search-field\">\n <slot name=\"search-field\"></slot>\n </div>\n </mock:shadow-root>\n <div slot=\"logo\">\n custom logo\n </div>\n </six-header>\n `);\n });\n\n it('should render app switcher', async () => {\n // given\n const html = `<six-header>\n <six-menu slot=\"app-switcher-menu\">\n <six-menu-item checked=\"false\">Custody</six-menu-item>\n <six-menu-item checked=\"true\">Swiss Interbank Clearing</six-menu-item>\n </six-menu>\n </six-header>`;\n\n // when\n const page = await newSpecPage({\n components: [SixHeader],\n html: html,\n });\n\n // then\n expect(page.root).toEqualHtml(`\n <six-header>\n <mock:shadow-root>\n <header class=\"six-header\">\n <section class=\"six-header__menu\">\n <six-icon-button name=\"menu\"></six-icon-button>\n </section>\n <section class=\"six-header__logo\">\n <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <title>\n SIX\n </title>\n <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\"></path>\n <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\n <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\"></path>\n </g>\n </svg>\n\n </section>\n <section class=\"six-header__placeholder\"></section>\n <section class=\"six-header__custom\">\n <slot></slot>\n </section>\n <section class=\"six-header__app-switcher\">\n <six-dropdown distance=\"13\" placement=\"bottom-end\" skidding=\"20\">\n <div class=\"six-header__app-switcher-dropdown\" slot=\"trigger\">\n <a class=\"six-header__selected-app\">Swiss Interbank Clearing</a>\n <six-icon-button name=\"apps\"></six-icon-button>\n </div>\n <slot name=\"app-switcher-menu\"></slot>\n </six-dropdown>\n </section>\n </header>\n <div class=\"six-header__search-field\">\n <slot name=\"search-field\"></slot>\n </div>\n </mock:shadow-root>\n <six-menu slot=\"app-switcher-menu\">\n <six-menu-item checked=\"false\">Custody</six-menu-item>\n <six-menu-item checked=\"true\">Swiss Interbank Clearing</six-menu-item>\n </six-menu>\n </six-header>\n `);\n });\n\n it('renders without hamburger menu', async () => {\n const page = await newSpecPage({\n components: [SixHeader],\n html: `<six-header hide-hamburger-menu=\"true\"></six-header>`,\n });\n\n expect(page.root).toEqualHtml(`\n <six-header hide-hamburger-menu=\"true\">\n <mock:shadow-root>\n <header class=\"six-header\">\n <section class=\"six-header__logo\">\n <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <title>\n SIX\n </title>\n <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\"></path>\n <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\n <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\"></path>\n </g>\n </svg>\n\n </section>\n <section class=\"six-header__placeholder\"></section>\n <section class=\"six-header__custom\">\n <slot></slot>\n </section>\n </header>\n <div class=\"six-header__search-field\">\n <slot name=\"search-field\"></slot>\n </div>\n </mock:shadow-root>\n </six-header>\n `);\n });\n});\n"]}

package/dist/collection/components/six-icon/six-icon.css CHANGED Viewed

@@ -3,11 +3,12 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 :host {
-  display: inline;
+  display: inline-flex;
+  vertical-align: middle;
 }
 .material-icons {
@@ -27,6 +28,8 @@
   -moz-osx-font-smoothing: grayscale;
   /* Support for IE. */
   font-feature-settings: "liga";
+  /* Icon name should not be selectable. */
+  user-select: none;
 }
 .material-icons-filled {

package/dist/collection/components/six-icon/six-icon.js CHANGED Viewed

@@ -11,7 +11,7 @@ export class SixIcon {
         this.filled = false;
     }
     render() {
-        return (h("i", { class: {
+        return (h("i", { key: '1829823d7fafabd422951e21baf28f0925f670d9', class: {
                 'material-icons': true,
                 'material-icons-outlined': !this.filled,
                 'material-icons-filled': this.filled,
@@ -23,7 +23,7 @@ export class SixIcon {
                 'icon--xxlarge': this.size === 'xxLarge',
                 'icon--xxxlarge': this.size === 'xxxLarge',
                 'icon--inherit': this.size === 'inherit',
-            } }, h("slot", null)));
+            } }, h("slot", { key: '0f11af1384b316708bfe8b3989ea74cc3f2c37f9' })));
     }
     static get is() { return "six-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-icon/six-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-icon.js","sourceRoot":"","sources":["../../../src/components/six-icon/six-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAOH,MAAM,OAAO,OAAO;;oBAUD,SAAS;sBAGT,KAAK;;IAEtB,MAAM;QACJ,OAAO,CACL,~~SACE~~,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,yBAAyB,EAAE,CAAC,IAAI,CAAC,MAAM;gBACvC,uBAAuB,EAAE,IAAI,CAAC,MAAM;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACxC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;gBAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;aACzC;YAED,~~eAAa~~,CACX,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the material icon name.\n /\n\n@Component({\n tag: 'six-icon',\n styleUrls: ['six-icon.scss'],\n shadow: true,\n})\nexport class SixIcon {\n /* The icon's size. /\n @Prop({ reflect: true }) size:\n \| 'inherit'\n \| 'xSmall'\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'xLarge'\n \| 'xxLarge'\n \| 'xxxLarge' = 'inherit';\n\n /* If set to true the default material outlined icons are not used. */\n @Prop() filled = false;\n\n render() {\n return (\n <i\n class={{\n 'material-icons': true,\n 'material-icons-outlined': !this.filled,\n 'material-icons-filled': this.filled,\n 'icon--xsmall': this.size === 'xSmall',\n 'icon--small': this.size === 'small',\n 'icon--medium': this.size === 'medium',\n 'icon--large': this.size === 'large',\n 'icon--xlarge': this.size === 'xLarge',\n 'icon--xxlarge': this.size === 'xxLarge',\n 'icon--xxxlarge': this.size === 'xxxLarge',\n 'icon--inherit': this.size === 'inherit',\n }}\n >\n <slot></slot>\n </i>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-icon.js","sourceRoot":"","sources":["../../../src/components/six-icon/six-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAOH,MAAM,OAAO,OAAO;;oBAUD,SAAS;sBAGT,KAAK;;IAEtB,MAAM;QACJ,OAAO,CACL,0DACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,yBAAyB,EAAE,CAAC,IAAI,CAAC,MAAM;gBACvC,uBAAuB,EAAE,IAAI,CAAC,MAAM;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACxC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;gBAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;aACzC;YAED,8DAAa,CACX,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the material icon name.\n /\n\n@Component({\n tag: 'six-icon',\n styleUrls: ['six-icon.scss'],\n shadow: true,\n})\nexport class SixIcon {\n /* The icon's size. /\n @Prop({ reflect: true }) size:\n \| 'inherit'\n \| 'xSmall'\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'xLarge'\n \| 'xxLarge'\n \| 'xxxLarge' = 'inherit';\n\n /* If set to true the default material outlined icons are not used. */\n @Prop() filled = false;\n\n render() {\n return (\n <i\n class={{\n 'material-icons': true,\n 'material-icons-outlined': !this.filled,\n 'material-icons-filled': this.filled,\n 'icon--xsmall': this.size === 'xSmall',\n 'icon--small': this.size === 'small',\n 'icon--medium': this.size === 'medium',\n 'icon--large': this.size === 'large',\n 'icon--xlarge': this.size === 'xLarge',\n 'icon--xxlarge': this.size === 'xxLarge',\n 'icon--xxxlarge': this.size === 'xxxLarge',\n 'icon--inherit': this.size === 'inherit',\n }}\n >\n <slot></slot>\n </i>\n );\n }\n}\n"]}

package/dist/collection/components/six-icon-button/six-icon-button.css CHANGED Viewed

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 :host {