npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.9277796 → 0.0.0-insider.d16ec8e - Mend

@six-group/ui-library 0.0.0-insider.9277796 → 0.0.0-insider.d16ec8e

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 (754) 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;;IAgExB,gBAAW,GAAG,CAAC,KAAe,EAAE,EAAE;MAChC,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,OAAO;OACR;MAED,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAO;OACR;MAED,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QACtC,OAAO,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,2BAA2B,EAAE,CAAC,CAAC;OAClF;MAED,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACxB,IAAI,CAAC,IAAI,EAAE;UACT,OAAO;SACR;QAED,MAAM,iBAAiB,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAEnF,IAAI,IAAI,CAAC,MAAM,IAAI,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;UAC9D,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,2CAA2C,CAAC,CAAC,CAAC,6BAA6B,CAAC;UAC9G,OAAO,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;SACrD;QAED,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE;UACpD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,kBAAkB,CAAC;UACvF,OAAO,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;SACrD;OACF;MAED,MAAM,YAAY,GAAgC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;MAEtG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACjD,CAAC,CAAC;IAqBF,aAAQ,GAAG,GAAG,EAAE;;MACd,IAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;QACnC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAC;OAC3B;IACH,CAAC,CAAC;kBAxHgB,KAAK;mBAGa,KAAK;;oBAMJ,KAAK;;;uBASS,SAAS;;EAW5D,gBAAgB;IACd,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;EACH,CAAC;EAGD,eAAe;IACb,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;EACH,CAAC;EAGD,gBAAgB;IACd,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACrB;EACH,CAAC;EAGD,WAAW,CAAC,EAAE,YAAY,EAAa;IACrC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;MACpB,IAAI,YAAY,EAAE;QAChB,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;OACtC;KACF;EACH,CAAC;EAsCD,gBAAgB;IACd,CAAC,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;MACnE,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;MACnE,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;IACzE,CAAC,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,CAAC,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;MACnE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;MACtE,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;IAC5E,CAAC,CAAC,CAAC;EACL,CAAC;EAED,eAAe,CAAC,CAAQ;IACtB,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,CAAC,CAAC,eAAe,EAAE,CAAC;EACtB,CAAC;EAUO,WAAW;IACjB,OAAO,CACL,IAAI,CAAC,KAAK;MACV,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,QAAQ,CACT,CAAC,CAAC,CAAC,CACF;;QAC2B,YAAM,KAAK,EAAC,qCAAqC,aAAc,CACnF,CACR,CAAC,CACH,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;IAE3D,OAAO,CACL,WACE,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI;QACvB,2BAA2B,EAAE,IAAI,CAAC,QAAQ;OAC3C;MAED,EAAC,SAAS,IACR,KAAK,EAAE;UACL,qCAAqC,EAAE,IAAI,CAAC,OAAO;UACnD,kCAAkC,EAAE,CAAC,IAAI,CAAC,OAAO;SAClD;QAEA,IAAI,CAAC,OAAO,IAAI,CACf,YAAM,IAAI,EAAC,QAAQ;UACjB,gBAAU,KAAK,EAAC,6BAA6B,sBAA2B,CACnE,CACR;QACD,WACE,KAAK,EAAE;YACL,4BAA4B,EAAE,IAAI;YAClC,mCAAmC,EAAE,IAAI,CAAC,MAAM;YAChD,qCAAqC,EAAE,IAAI,CAAC,OAAO;WACpD;UAED,gBAAO,IAAI,CAAC,WAAW,EAAE,CAAQ;UACjC,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;EACJ,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 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: boolean = false;\n\n /* Accepted MIME-Types. /\n @Prop() readonly accept: string;\n\n /* More than one file allowed. /\n @Prop() readonly multiple: boolean;\n\n /* Allowed max file size in bytes. /\n @Prop() readonly maxFileSize: number \| undefined = undefined;\n\n /* Triggers when a file is added. /\n @Event({ eventName: 'six-file-upload-success' })\n readonly fileUploadSuccessEvent: 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' })\n readonly fileUploadFailureEvent: 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) {\n this.handleFiles(dataTransfer.files);\n }\n }\n }\n\n handleFiles = (files: FileList) => {\n if (this.disabled) {\n return;\n }\n\n if (files.length === 0) {\n return;\n }\n\n if (!this.multiple && files.length > 1) {\n return this.fileUploadFailureEvent.emit({ reason: 'Only one file is allowed.' });\n }\n\n for (const file of files) {\n if (!file) {\n return;\n }\n\n const acceptedTypesList = this.accept && this.accept.replace(/\\s/g, '').split(',');\n\n if (this.accept && 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.fileUploadFailureEvent.emit({ reason });\n }\n\n if (this.maxFileSize && file.size > this.maxFileSize) {\n const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n return this.fileUploadFailureEvent.emit({ reason });\n }\n }\n\n const objectToEmit: SixFileUploadSuccessPayload = this.multiple ? { files } : { file: files.item(0) };\n\n this.fileUploadSuccessEvent.emit(objectToEmit);\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 preventDefaults(e: Event) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n onChange = () => {\n if (this.fileInput?.files) {\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-form/six-form.js CHANGED Viewed

@@ -12,14 +12,33 @@ import { EventListeners } from '../../utils/event-listeners';
  */
 export class SixForm {
   constructor() {
+    this.formControls = [];
     this.eventListeners = new EventListeners();
+    this.handleClick = (event) => {
+      const target = event.target;
+      const tag = target.tagName.toLowerCase();
+      for (const formControl of this.formControls) {
+        if (formControl.tag === tag && formControl.click != null) {
+          formControl.click(event);
+        }
+      }
+    };
+    this.handleKeyDown = (event) => {
+      const target = event.target;
+      const tag = target.tagName.toLowerCase();
+      for (const formControl of this.formControls) {
+        if (formControl.tag === tag && formControl.keyDown != null) {
+          formControl.keyDown(event);
+        }
+      }
+    };
     this.novalidate = false;
   }
   connectedCallback() {
     this.formControls = [
       {
         tag: 'six-button',
-        serialize: (el, formData) => el.name && !el.disabled ? formData.append(el.name, el.value) : null,
+        serialize: (el, formData) => el.name !== '' && !el.disabled ? formData.append(el.name, el.value) : null,
         click: (event) => {
           const target = event.target;
           if (target.submit) {
@@ -32,16 +51,16 @@ export class SixForm {
       },
       {
         tag: 'six-checkbox',
-        serialize: (el, formData) => el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,
+        serialize: (el, formData) => el.name !== '' && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,
         changeEventName: 'six-checkbox-change',
       },
       {
         tag: 'six-color-picker',
-        serialize: (el, formData) => el.name && !el.disabled ? formData.append(el.name, el.value) : null,
+        serialize: (el, formData) => el.name !== '' && !el.disabled ? formData.append(el.name, el.value) : null,
       },
       {
         tag: 'six-input',
-        serialize: (el, formData) => el.name && !el.disabled ? formData.append(el.name, el.value) : null,
+        serialize: (el, formData) => el.name !== '' && !el.disabled ? formData.append(el.name, el.value) : null,
         keyDown: (event) => {
           if (event.key === 'Enter' && !event.defaultPrevented) {
             this.submit();
@@ -51,7 +70,7 @@ export class SixForm {
       },
       {
         tag: 'six-datepicker',
-        serialize: (el, formData) => { var _a; return el.name && !el.disabled ? formData.append(el.name, (_a = el.value) === null || _a === void 0 ? void 0 : _a.toISOString()) : null; },
+        serialize: (el, formData) => { var _a; return el.name !== '' && !el.disabled && el.value != null ? formData.append(el.name, (_a = el.value) === null || _a === void 0 ? void 0 : _a.toISOString()) : null; },
         keyDown: (event) => {
           if (event.key === 'Enter' && !event.defaultPrevented) {
             this.submit();
@@ -61,13 +80,13 @@ export class SixForm {
       },
       {
         tag: 'six-radio',
-        serialize: (el, formData) => el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,
+        serialize: (el, formData) => el.name !== '' && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,
         changeEventName: 'six-radio-change',
       },
       {
         tag: 'six-range',
         serialize: (el, formData) => {
-          if (el.name && !el.disabled) {
+          if (el.name !== '' && !el.disabled) {
             formData.append(el.name, el.value + '');
           }
         },
@@ -76,10 +95,10 @@ export class SixForm {
       {
         tag: 'six-select',
         serialize: (el, formData) => {
-          if (el.name && !el.disabled) {
+          if (el.name !== '' && !el.disabled) {
             if (el.multiple) {
               const selectedOptions = [...el.value];
-              if (selectedOptions.length) {
+              if (selectedOptions.length > 0) {
                 selectedOptions.map((value) => formData.append(el.name, value));
               }
               else {
@@ -95,17 +114,17 @@ export class SixForm {
       },
       {
         tag: 'six-switch',
-        serialize: (el, formData) => el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,
+        serialize: (el, formData) => el.name !== '' && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,
         changeEventName: 'six-switch-change',
       },
       {
         tag: 'six-textarea',
-        serialize: (el, formData) => el.name && !el.disabled ? formData.append(el.name, el.value) : null,
+        serialize: (el, formData) => el.name !== '' && !el.disabled ? formData.append(el.name, el.value) : null,
         changeEventName: 'six-textarea-change',
       },
       {
         tag: 'six-timepicker',
-        serialize: (el, formData) => el.name && !el.disabled ? formData.append(el.name, el.value) : null,
+        serialize: (el, formData) => el.name !== '' && !el.disabled ? formData.append(el.name, el.value) : null,
         keyDown: (event) => {
           if (event.key === 'Enter' && !event.defaultPrevented) {
             this.submit();
@@ -114,8 +133,6 @@ export class SixForm {
         changeEventName: 'six-timepicker-change',
       },
     ];
-    this.handleClick = this.handleClick.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
   }
   disconnectedCallback() {
     this.eventListeners.removeAll();
@@ -126,7 +143,7 @@ export class SixForm {
   appendChangeListener(el) {
     const tag = el.tagName.toLowerCase();
     for (const formControl of this.formControls) {
-      if (formControl.tag === tag && formControl.changeEventName) {
+      if (formControl.tag === tag && formControl.changeEventName != null) {
         this.eventListeners.add(el, formControl.changeEventName, () => this.handleChange(el));
       }
     }
@@ -140,7 +157,13 @@ export class SixForm {
   }
   /** Gets all form control elements (native and custom). */
   async getFormControls() {
+    if (this.form == null) {
+      return [];
+    }
     const slot = this.form.querySelector('slot');
+    if (slot == null) {
+      return [];
+    }
     const tags = this.formControls.map((control) => control.tag);
     return slot
       .assignedElements({ flatten: true })
@@ -186,24 +209,6 @@ export class SixForm {
       .forEach((formControl) => formControl.reset());
     this.sixReset.emit();
   }
-  handleClick(event) {
-    const target = event.target;
-    const tag = target.tagName.toLowerCase();
-    for (const formControl of this.formControls) {
-      if (formControl.tag === tag && formControl.click) {
-        formControl.click(event);
-      }
-    }
-  }
-  handleKeyDown(event) {
-    const target = event.target;
-    const tag = target.tagName.toLowerCase();
-    for (const formControl of this.formControls) {
-      if (formControl.tag === tag && formControl.keyDown) {
-        formControl.keyDown(event);
-      }
-    }
-  }
   handleChange(el) {
     this.checkValidity().then((isValid) => this.sixChange.emit({
       valid: isValid,
@@ -350,6 +355,9 @@ export class SixForm {
             },
             "HTMLFormElement": {
               "location": "global"
+            },
+            "Element": {
+              "location": "global"
             }
           },
           "return": "Promise<HTMLFormElement[]>"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"six-form.js","sourceRoot":"","sources":["../../../src/components/six-form/six-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Method, Prop } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { EmptyPayload } from '../../utils/types';\n\nexport interface SixFormSubmitPayload {\n formData: FormData;\n formControls: HTMLFormElement[];\n}\n\nexport interface SixFormChangePayload {\n formControl: HTMLFormElement;\n valid: boolean;\n}\n\ninterface FormControl {\n tag: string;\n\n serialize(el: HTMLFormElement \| HTMLElement, formData: FormData): void;\n\n click?(event: MouseEvent): any;\n\n keyDown?(event: KeyboardEvent): any;\n\n changeEventName?: string;\n}\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The form's content.\n \n @part base - The component's base wrapper.\n /\n@Component({\n tag: 'six-form',\n styleUrl: 'six-form.scss',\n shadow: true,\n})\nexport class SixForm {\n form: HTMLElement;\n formControls: FormControl[];\n\n readonly eventListeners = new EventListeners();\n\n /* Prevent the form from validating inputs before submitting. /\n @Prop() novalidate = false;\n\n /\n Emitted when the form is submitted. This event will not be emitted if any form control inside of it is in an\n * invalid state, unless the form has the `novalidate` attribute. Note that there is never a need to prevent this\n * event, since it doen't send a GET or POST request like native forms. To \"prevent\" submission, use a conditional\n * around the XHR request you use to submit the form's data with.\n /\n @Event({ eventName: 'six-form-submit' }) sixSubmit: EventEmitter<SixFormSubmitPayload>;\n\n /* Emitted when the control's value changes. /\n @Event({ eventName: 'six-form-change' }) sixChange: EventEmitter<SixFormChangePayload>;\n\n /* Emitted when the forms values are reset. /\n @Event({ eventName: 'six-form-reset' }) sixReset: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.formControls = [\n {\n tag: 'six-button',\n serialize: (el: HTMLSixButtonElement, formData) =>\n el.name && !el.disabled ? formData.append(el.name, el.value) : null,\n click: (event) => {\n const target = event.target as HTMLSixButtonElement;\n if (target.submit) {\n this.submit();\n }\n\n if (target.reset) {\n this.reset();\n }\n },\n },\n {\n tag: 'six-checkbox',\n serialize: (el: HTMLSixCheckboxElement, formData) =>\n el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,\n changeEventName: 'six-checkbox-change',\n },\n {\n tag: 'six-color-picker',\n serialize: (el: HTMLSixCheckboxElement, formData) =>\n el.name && !el.disabled ? formData.append(el.name, el.value) : null,\n },\n {\n tag: 'six-input',\n serialize: (el: HTMLSixInputElement, formData) =>\n el.name && !el.disabled ? formData.append(el.name, el.value) : null,\n keyDown: (event) => {\n if (event.key === 'Enter' && !event.defaultPrevented) {\n this.submit();\n }\n },\n changeEventName: 'six-input-change',\n },\n {\n tag: 'six-datepicker',\n serialize: (el: HTMLSixDatepickerElement, formData) =>\n el.name && !el.disabled ? formData.append(el.name, el.value?.toISOString()) : null,\n keyDown: (event) => {\n if (event.key === 'Enter' && !event.defaultPrevented) {\n this.submit();\n }\n },\n changeEventName: 'six-datepicker-select',\n },\n {\n tag: 'six-radio',\n serialize: (el: HTMLSixRadioElement, formData) =>\n el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,\n changeEventName: 'six-radio-change',\n },\n {\n tag: 'six-range',\n serialize: (el: HTMLSixRangeElement, formData) => {\n if (el.name && !el.disabled) {\n formData.append(el.name, el.value + '');\n }\n },\n changeEventName: 'six-range-change',\n },\n {\n tag: 'six-select',\n serialize: (el: HTMLSixSelectElement, formData) => {\n if (el.name && !el.disabled) {\n if (el.multiple) {\n const selectedOptions = [...el.value];\n if (selectedOptions.length) {\n selectedOptions.map((value) => formData.append(el.name, value));\n } else {\n formData.append(el.name, '');\n }\n } else {\n formData.append(el.name, el.value + '');\n }\n }\n },\n changeEventName: 'six-select-change',\n },\n {\n tag: 'six-switch',\n serialize: (el: HTMLSixSwitchElement, formData) =>\n el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,\n changeEventName: 'six-switch-change',\n },\n {\n tag: 'six-textarea',\n serialize: (el: HTMLSixTextareaElement, formData) =>\n el.name && !el.disabled ? formData.append(el.name, el.value) : null,\n changeEventName: 'six-textarea-change',\n },\n {\n tag: 'six-timepicker',\n serialize: (el: HTMLSixTimepickerElement, formData) =>\n el.name && !el.disabled ? formData.append(el.name, el.value) : null,\n keyDown: (event) => {\n if (event.key === 'Enter' && !event.defaultPrevented) {\n this.submit();\n }\n },\n changeEventName: 'six-timepicker-change',\n },\n ];\n\n this.handleClick = this.handleClick.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n componentDidLoad() {\n this.getFormControls().then((controls) => controls.forEach((control) => this.appendChangeListener(control)));\n }\n\n private appendChangeListener(el: HTMLFormElement) {\n const tag = el.tagName.toLowerCase();\n for (const formControl of this.formControls) {\n if (formControl.tag === tag && formControl.changeEventName) {\n this.eventListeners.add(el as HTMLElement, formControl.changeEventName, () => this.handleChange(el));\n }\n }\n }\n\n /* Serializes all form controls elements and returns a `FormData` object. /\n @Method()\n async getFormData() {\n const formData = new FormData();\n const formControls = await this.getFormControls();\n\n formControls.map((el) => this.serializeElement(el, formData));\n\n return formData;\n }\n\n /* Gets all form control elements (native and custom). /\n @Method()\n async getFormControls() {\n const slot = this.form.querySelector('slot');\n const tags = this.formControls.map((control) => control.tag);\n return slot\n .assignedElements({ flatten: true })\n .reduce((all, el) => all.concat(el, [...el.querySelectorAll('')]), [])\n .filter((el) => tags.includes(el.tagName.toLowerCase())) as HTMLFormElement[];\n }\n\n /*\n Submits the form. If all controls are valid, the `six-form-submit` event will be emitted and the promise will resolve\n * with `true`. If any form control is invalid, the promise will resolve with `false` and no event will be emitted.\n /\n @Method()\n async submit() {\n const formData = await this.getFormData();\n const formControls = await this.getFormControls();\n const formControlsThatReport = formControls.filter(\n (el: HTMLFormElement) => typeof el.reportValidity === 'function'\n ) as any;\n\n if (!this.novalidate) {\n let isValid = true;\n for (const el of formControlsThatReport) {\n if (!(await el.reportValidity())) {\n isValid = false;\n }\n }\n if (!isValid) {\n return false;\n }\n }\n\n this.sixSubmit.emit({ formData, formControls });\n\n return true;\n }\n\n /* Checks for validity. /\n @Method()\n async checkValidity() {\n const formControls = await this.getFormControls();\n const validationTasks = formControls\n .filter((el: HTMLFormElement) => typeof el.checkValidity === 'function')\n .map((el: HTMLFormElement) => el.checkValidity());\n const invalidControls = await Promise.all(validationTasks).then((results) =>\n results.filter((valid) => valid === false)\n );\n return invalidControls.length == 0;\n }\n\n /* Resets the form and resets the value of all descendants*/\n @Method()\n async reset() {\n const formControls = await this.getFormControls();\n\n formControls\n .filter((control) => control?.reset && typeof control?.reset === 'function')\n .forEach((formControl) => formControl.reset());\n\n this.sixReset.emit();\n }\n\n handleClick(event: MouseEvent) {\n const target = event.target as HTMLFormElement;\n const tag = target.tagName.toLowerCase();\n\n for (const formControl of this.formControls) {\n if (formControl.tag === tag && formControl.click) {\n formControl.click(event);\n }\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n const target = event.target as HTMLFormElement;\n const tag = target.tagName.toLowerCase();\n\n for (const formControl of this.formControls) {\n if (formControl.tag === tag && formControl.keyDown) {\n formControl.keyDown(event);\n }\n }\n }\n\n handleChange(el: HTMLFormElement) {\n this.checkValidity().then((isValid) =>\n this.sixChange.emit({\n valid: isValid,\n formControl: el,\n })\n );\n }\n\n serializeElement(el: HTMLFormElement, formData: FormData) {\n const tag = el.tagName.toLowerCase();\n\n for (const formControl of this.formControls) {\n if (formControl.tag === tag) {\n return formControl.serialize(el, formData);\n }\n }\n\n return null;\n }\n\n render() {\n return (\n <div\n ref={(el) => (this.form = el)}\n part=\"base\"\n class=\"form\"\n role=\"form\"\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <slot />\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-form.js","sourceRoot":"","sources":["../../../src/components/six-form/six-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Method, Prop } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { EmptyPayload } from '../../utils/types';\n\nexport interface SixFormSubmitPayload {\n formData: FormData;\n formControls: HTMLFormElement[];\n}\n\nexport interface SixFormChangePayload {\n formControl: HTMLFormElement;\n valid: boolean;\n}\n\ninterface FormControl {\n tag: string;\n\n serialize(el: HTMLFormElement \| HTMLElement, formData: FormData): void;\n\n click?(event: MouseEvent): void;\n\n keyDown?(event: KeyboardEvent): void;\n\n changeEventName?: string;\n}\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The form's content.\n \n @part base - The component's base wrapper.\n /\n@Component({\n tag: 'six-form',\n styleUrl: 'six-form.scss',\n shadow: true,\n})\nexport class SixForm {\n private form?: HTMLElement;\n private formControls: FormControl[] = [];\n private eventListeners = new EventListeners();\n\n /* Prevent the form from validating inputs before submitting. /\n @Prop() novalidate = false;\n\n /\n Emitted when the form is submitted. This event will not be emitted if any form control inside of it is in an\n * invalid state, unless the form has the `novalidate` attribute. Note that there is never a need to prevent this\n * event, since it doen't send a GET or POST request like native forms. To \"prevent\" submission, use a conditional\n * around the XHR request you use to submit the form's data with.\n /\n @Event({ eventName: 'six-form-submit' }) sixSubmit!: EventEmitter<SixFormSubmitPayload>;\n\n /* Emitted when the control's value changes. /\n @Event({ eventName: 'six-form-change' }) sixChange!: EventEmitter<SixFormChangePayload>;\n\n /* Emitted when the forms values are reset. /\n @Event({ eventName: 'six-form-reset' }) sixReset!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.formControls = [\n {\n tag: 'six-button',\n serialize: (el: HTMLSixButtonElement, formData) =>\n el.name !== '' && !el.disabled ? formData.append(el.name, el.value) : null,\n click: (event) => {\n const target = event.target as HTMLSixButtonElement;\n if (target.submit) {\n this.submit();\n }\n\n if (target.reset) {\n this.reset();\n }\n },\n },\n {\n tag: 'six-checkbox',\n serialize: (el: HTMLSixCheckboxElement, formData) =>\n el.name !== '' && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,\n changeEventName: 'six-checkbox-change',\n },\n {\n tag: 'six-color-picker',\n serialize: (el: HTMLSixCheckboxElement, formData) =>\n el.name !== '' && !el.disabled ? formData.append(el.name, el.value) : null,\n },\n {\n tag: 'six-input',\n serialize: (el: HTMLSixInputElement, formData) =>\n el.name !== '' && !el.disabled ? formData.append(el.name, el.value) : null,\n keyDown: (event) => {\n if (event.key === 'Enter' && !event.defaultPrevented) {\n this.submit();\n }\n },\n changeEventName: 'six-input-change',\n },\n {\n tag: 'six-datepicker',\n serialize: (el: HTMLSixDatepickerElement, formData) =>\n el.name !== '' && !el.disabled && el.value != null ? formData.append(el.name, el.value?.toISOString()) : null,\n keyDown: (event) => {\n if (event.key === 'Enter' && !event.defaultPrevented) {\n this.submit();\n }\n },\n changeEventName: 'six-datepicker-select',\n },\n {\n tag: 'six-radio',\n serialize: (el: HTMLSixRadioElement, formData) =>\n el.name !== '' && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,\n changeEventName: 'six-radio-change',\n },\n {\n tag: 'six-range',\n serialize: (el: HTMLSixRangeElement, formData) => {\n if (el.name !== '' && !el.disabled) {\n formData.append(el.name, el.value + '');\n }\n },\n changeEventName: 'six-range-change',\n },\n {\n tag: 'six-select',\n serialize: (el: HTMLSixSelectElement, formData) => {\n if (el.name !== '' && !el.disabled) {\n if (el.multiple) {\n const selectedOptions = [...el.value];\n if (selectedOptions.length > 0) {\n selectedOptions.map((value) => formData.append(el.name, value));\n } else {\n formData.append(el.name, '');\n }\n } else {\n formData.append(el.name, el.value + '');\n }\n }\n },\n changeEventName: 'six-select-change',\n },\n {\n tag: 'six-switch',\n serialize: (el: HTMLSixSwitchElement, formData) =>\n el.name !== '' && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,\n changeEventName: 'six-switch-change',\n },\n {\n tag: 'six-textarea',\n serialize: (el: HTMLSixTextareaElement, formData) =>\n el.name !== '' && !el.disabled ? formData.append(el.name, el.value) : null,\n changeEventName: 'six-textarea-change',\n },\n {\n tag: 'six-timepicker',\n serialize: (el: HTMLSixTimepickerElement, formData) =>\n el.name !== '' && !el.disabled ? formData.append(el.name, el.value) : null,\n keyDown: (event) => {\n if (event.key === 'Enter' && !event.defaultPrevented) {\n this.submit();\n }\n },\n changeEventName: 'six-timepicker-change',\n },\n ];\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n componentDidLoad() {\n this.getFormControls().then((controls) => controls.forEach((control) => this.appendChangeListener(control)));\n }\n\n private appendChangeListener(el: HTMLFormElement) {\n const tag = el.tagName.toLowerCase();\n for (const formControl of this.formControls) {\n if (formControl.tag === tag && formControl.changeEventName != null) {\n this.eventListeners.add(el as HTMLElement, formControl.changeEventName, () => this.handleChange(el));\n }\n }\n }\n\n /* Serializes all form controls elements and returns a `FormData` object. /\n @Method()\n async getFormData() {\n const formData = new FormData();\n const formControls = await this.getFormControls();\n\n formControls.map((el) => this.serializeElement(el, formData));\n\n return formData;\n }\n\n /* Gets all form control elements (native and custom). /\n @Method()\n async getFormControls(): Promise<HTMLFormElement[]> {\n if (this.form == null) {\n return [];\n }\n const slot = this.form.querySelector('slot');\n if (slot == null) {\n return [];\n }\n const tags = this.formControls.map((control) => control.tag);\n return slot\n .assignedElements({ flatten: true })\n .reduce((all, el) => all.concat(el, [...el.querySelectorAll('')]), [] as Element[])\n .filter((el) => tags.includes(el.tagName.toLowerCase())) as HTMLFormElement[];\n }\n\n /*\n Submits the form. If all controls are valid, the `six-form-submit` event will be emitted and the promise will resolve\n * with `true`. If any form control is invalid, the promise will resolve with `false` and no event will be emitted.\n /\n @Method()\n async submit() {\n const formData = await this.getFormData();\n const formControls = await this.getFormControls();\n const formControlsThatReport = formControls.filter(\n (el: HTMLFormElement) => typeof el.reportValidity === 'function'\n );\n\n if (!this.novalidate) {\n let isValid = true;\n for (const el of formControlsThatReport) {\n if (!(await el.reportValidity())) {\n isValid = false;\n }\n }\n if (!isValid) {\n return false;\n }\n }\n\n this.sixSubmit.emit({ formData, formControls });\n\n return true;\n }\n\n /* Checks for validity. /\n @Method()\n async checkValidity() {\n const formControls = await this.getFormControls();\n const validationTasks = formControls\n .filter((el: HTMLFormElement) => typeof el.checkValidity === 'function')\n .map((el: HTMLFormElement) => el.checkValidity());\n const invalidControls = await Promise.all(validationTasks).then((results) =>\n results.filter((valid) => valid === false)\n );\n return invalidControls.length == 0;\n }\n\n /* Resets the form and resets the value of all descendants*/\n @Method()\n async reset() {\n const formControls = await this.getFormControls();\n\n formControls\n .filter((control) => control?.reset && typeof control?.reset === 'function')\n .forEach((formControl) => formControl.reset());\n\n this.sixReset.emit();\n }\n\n private handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLFormElement;\n const tag = target.tagName.toLowerCase();\n\n for (const formControl of this.formControls) {\n if (formControl.tag === tag && formControl.click != null) {\n formControl.click(event);\n }\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const target = event.target as HTMLFormElement;\n const tag = target.tagName.toLowerCase();\n\n for (const formControl of this.formControls) {\n if (formControl.tag === tag && formControl.keyDown != null) {\n formControl.keyDown(event);\n }\n }\n };\n\n private handleChange(el: HTMLFormElement) {\n this.checkValidity().then((isValid) =>\n this.sixChange.emit({\n valid: isValid,\n formControl: el,\n })\n );\n }\n\n private serializeElement(el: HTMLFormElement, formData: FormData) {\n const tag = el.tagName.toLowerCase();\n\n for (const formControl of this.formControls) {\n if (formControl.tag === tag) {\n return formControl.serialize(el, formData);\n }\n }\n\n return null;\n }\n\n render() {\n return (\n <div\n ref={(el) => (this.form = el)}\n part=\"base\"\n class=\"form\"\n role=\"form\"\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <slot />\n </div>\n );\n }\n}\n"]}

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

@@ -20,30 +20,31 @@ export class SixGroupLabel {
     this.wrapperLabelId = `label-${++id}`;
     this.labelId = `label-label-${id}`;
     this.helpTextId = `label-help-text-${id}`;
+    this.handleSlotChange = () => {
+      this.hasLabelSlot = hasSlot(this.host, 'label');
+      this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+    };
     this.hasHelpTextSlot = false;
     this.hasLabelSlot = false;
     this.size = 'medium';
     this.label = '';
     this.helpText = '';
     this.disabled = false;
-    this.required = undefined;
+    this.required = false;
   }
   handleLabelChange() {
     this.handleSlotChange();
   }
   connectedCallback() {
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+    var _a;
+    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
   }
   componentWillLoad() {
     this.handleSlotChange();
   }
   disconnectedCallback() {
-    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
-  }
-  handleSlotChange() {
-    this.hasLabelSlot = hasSlot(this.host, 'label');
-    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+    var _a;
+    (_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)));
@@ -149,7 +150,8 @@ export class SixGroupLabel {
           "text": "The label's required attribute."
         },
         "attribute": "required",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }

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;;~~IACxB~~,mBAAc,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC;IACjC,YAAO,GAAG,eAAe,EAAE,EAAE,CAAC;IAC9B,eAAU,GAAG,mBAAmB,EAAE,EAAE,CAAC;~~2BAIV~~,~~KAAK;wBACR~~,~~KAAK;gBAGiC~~,~~QAAQ;iBAGtD~~,EAAE;~~oBAGC~~,~~EAAE;oBAGe~~,~~KAAK;;;EAOzC~~,~~iBAAiB;IACf~~,IAAI,CAAC,~~gBAAgB~~,EAAE,CAAC~~;EAC1B~~,CAAC;~~EAED~~,~~iBAAiB;IACf,~~IAAI,CAAC,~~gBAAgB~~,GAAG,~~IAAI~~,CAAC,~~gBAAgB~~,CAAC,IAAI,~~CAAC~~,~~IAAI~~,CAAC,CAAC;IACzD,~~IAAI,~~CAAC,~~IAAI,~~CAAC,~~UAAU~~,~~CAAC~~,~~gBAAgB~~,~~CAAC~~,~~YAAY,~~EAAE~~,IAAI,CAAC,gBAAgB,CAAC,CAAC~~;~~EAC7E~~,~~CAAC~~;~~EAED~~,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAED,~~oBAAoB;IAClB~~,IAAI,CAAC,IAAI,CAAC,UAAU,~~CAAC~~,~~mBAAmB~~,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;~~EAChF~~,CAAC;EAED,~~gBAAgB~~;~~IACd~~,IAAI,CAAC,~~YAAY~~,~~GAAG~~,~~OAAO~~,CAAC,~~IAAI~~,~~CAAC~~,IAAI,~~EAAE,OAAO,~~CAAC,~~CAAC;IAChD,~~IAAI,CAAC,~~eAAe~~,~~GAAG~~,~~OAAO~~,CAAC,~~IAAI~~,~~CAAC~~,IAAI,~~EAAE~~,~~WAAW~~,CAAC,CAAC;~~EACzD~~,CAAC;~~EAED~~,MAAM;IACJ,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;MAEvB,eAAa,CACD,CACf,CAAC;EACJ,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 wrapperLabelId = `label-${++id}`;\n labelId = `label-label-${id}`;\n 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 /* The label's required attribute. */\n @Prop({ reflect: true }) required: ~~boolean~~;\n\n @Watch('helpText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n connectedCallback() {\n this.~~handleSlotChange = this.handleSlotChange.bind(this);\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 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;;IAChB,mBAAc,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC;IACjC,YAAO,GAAG,eAAe,EAAE,EAAE,CAAC;IAC9B,eAAU,GAAG,mBAAmB,EAAE,EAAE,CAAC;IAwCrC,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;MAChD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACzD,CAAC,CAAC;2BAvCyB,KAAK;wBACR,KAAK;gBAGiC,QAAQ;iBAGtD,EAAE;oBAGC,EAAE;oBAGe,KAAK;oBAGL,KAAK;;EAIzC,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAED,iBAAiB;;IACf,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;EAC9E,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;EACjF,CAAC;EAOD,MAAM;IACJ,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;MAEvB,eAAa,CACD,CACf,CAAC;EACJ,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 /* The label's required attribute. */\n @Prop({ reflect: true }) 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.js CHANGED Viewed

@@ -1,13 +1,12 @@
 import { h, Host } from '@stencil/core';
 import { EventListeners } from '../../utils/event-listeners';
-import { getAvailableSlots } from '../../utils/slot';
+import { getSlot, hasSlot } from '../../utils/slot';
 var Section;
 (function (Section) {
   Section[Section["None"] = 0] = "None";
   Section[Section["Search"] = 1] = "Search";
-  Section[Section["Notifications"] = 2] = "Notifications";
-  Section[Section["AppSwitcher"] = 3] = "AppSwitcher";
-  Section[Section["Profile"] = 4] = "Profile";
+  Section[Section["AppSwitcher"] = 2] = "AppSwitcher";
+  Section[Section["Profile"] = 3] = "Profile";
 })(Section || (Section = {}));
 var Slot;
 (function (Slot) {
@@ -17,7 +16,6 @@ var Slot;
   Slot["Profile"] = "profile-menu";
   Slot["Logo"] = "logo";
 })(Slot || (Slot = {}));
-const getSlots = getAvailableSlots(Slot);
 /**
  * @since 1.0
  * @status stable
@@ -32,42 +30,31 @@ const getSlots = getAvailableSlots(Slot);
 export class SixHeader {
   constructor() {
     this.eventListeners = new EventListeners();
-    this.has = (slot) => this.slots[slot];
-    this.selected = (value) => value === this.selectedSection;
-    this.select = (value) => () => {
-      this.selectedSection = value;
-    };
-    this.toggleSearch = (value) => () => {
-      var _a;
-      if (value === Section.Search) {
-        const visible = this.selectedSection !== value;
-        if (visible) {
-          (_a = this.host.querySelector(`[slot="${Slot.Search}"]`).shadowRoot.querySelector('six-input')) === null || _a === void 0 ? void 0 : _a.setFocus();
-        }
-        this.sixSearchFieldToggle.emit({ visible });
-      }
-      this.selectedSection = this.selectedSection === value ? Section.None : value;
-    };
     this.setupMenu = (el) => {
+      if (el == null)
+        return;
       this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());
     };
     this.setupLogo = (el) => {
-      if (!this.clickableLogo) {
+      if (!this.clickableLogo || el == null)
         return;
-      }
       this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());
     };
     this.setupProfile = (el) => {
-      this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.Profile));
-      this.eventListeners.add(el, 'six-dropdown-hide', this.select(Section.None));
+      if (el == null)
+        return;
+      this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));
+      this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));
       this.eventListeners.add(el, 'six-menu-item-selected', (event) => {
         const { name, item } = event.detail;
         this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });
       });
     };
     this.setupAppSwitcher = (el) => {
-      this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.AppSwitcher));
-      this.eventListeners.add(el, 'six-dropdown-hide', this.select(Section.None));
+      if (el == null)
+        return;
+      this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));
+      this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));
       this.eventListeners.add(el, 'six-menu-item-selected', (event) => {
         const { name, item } = event.detail;
         this.selectedApp = item.innerText;
@@ -101,46 +88,81 @@ export class SixHeader {
   async getIsSearchOpen() {
     return this.selectedSection === Section.Search;
   }
+  hasSlot(slot) {
+    if (this.slots == null) {
+      return false;
+    }
+    return this.slots[slot];
+  }
+  isSectionSelected(value) {
+    return value === this.selectedSection;
+  }
+  selectSection(section) {
+    return () => (this.selectedSection = section);
+  }
+  toggleSearch() {
+    const visible = this.selectedSection !== Section.Search;
+    this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;
+    this.sixSearchFieldToggle.emit({ visible });
+    if (this.selectedSection === Section.Search) {
+      // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772
+      setTimeout(async () => {
+        var _a, _b;
+        const slot = getSlot(this.host, Slot.Search);
+        (_b = (_a = slot === null || slot === void 0 ? void 0 : slot.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('six-input')) === null || _b === void 0 ? void 0 : _b.setFocus();
+      }, 50);
+    }
+  }
   componentWillLoad() {
-    this.slots = getSlots(this.host);
-    if (this.has(Slot.AppSwitcher)) {
+    this.slots = {
+      [Slot.Search]: hasSlot(this.host, Slot.Search),
+      [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),
+      [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),
+      [Slot.Profile]: hasSlot(this.host, Slot.Profile),
+      [Slot.Logo]: hasSlot(this.host, Slot.Logo),
+    };
+    if (this.hasSlot(Slot.AppSwitcher)) {
       this.selectedApp = this.getSelectedApp();
     }
-    if (this.has(Slot.Search)) {
+    if (this.hasSlot(Slot.Search)) {
       this.computeSearchOpenState();
     }
   }
   getSelectedApp() {
+    var _a;
     // there are more concise ways to select the first checked menu item, but this is one that works for jest
-    const element = this.host.querySelector(`[slot="${Slot.AppSwitcher}"]`);
+    const element = getSlot(this.host, Slot.AppSwitcher);
+    if (element == null) {
+      return undefined;
+    }
     const items = Array.from(element.querySelectorAll('six-menu-item'));
     const firstCheckedMenuItem = items.find((item) => item.hasAttribute('checked'));
-    return firstCheckedMenuItem === null || firstCheckedMenuItem === void 0 ? void 0 : firstCheckedMenuItem.textContent;
+    return (_a = firstCheckedMenuItem === null || firstCheckedMenuItem === void 0 ? void 0 : firstCheckedMenuItem.textContent) !== null && _a !== void 0 ? _a : undefined;
   }
   disconnectedCallback() {
     this.eventListeners.removeAll();
   }
   render() {
-    const search = this.has(Slot.Search) && (h("section", { class: {
+    const search = this.hasSlot(Slot.Search) && (h("section", { class: {
         'six-header__search': true,
-        'six-header__search--open': this.selected(Section.Search),
-      } }, h("six-icon-button", { name: "search", onClick: this.toggleSearch(Section.Search), "data-testid": "search-trigger" })));
-    const notifications = this.has(Slot.Notifications) && (h("section", { class: "six-header__notification" }, h("slot", { name: Slot.Notifications })));
-    const appSwitcher = this.has(Slot.AppSwitcher) && (h("section", { class: {
+        '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: {
         'six-header__app-switcher': true,
-        'six-header__app-switcher--open': this.selected(Section.AppSwitcher),
+        '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.has(Slot.Profile) && (h("section", { class: {
+    const profile = this.hasSlot(Slot.Profile) && (h("section", { class: {
         'six-header__profile': true,
-        'six-header__profile--open': this.selected(Section.Profile),
+        '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" }))));
-    const logo = this.has(Slot.Logo) ? (h("section", null, h("slot", { name: "logo" }))) : (h("section", { class: {
+    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: {
         'six-header__search-field': true,
-        'six-header__search-field--visible': this.selected(Section.Search),
+        'six-header__search-field--visible': this.isSectionSelected(Section.Search),
         'six-header__search-field--shift-content': this.shiftContent,
       } }, h("slot", { name: Slot.Search }))));
   }