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

@six-group/ui-library 0.0.0-insider.a358260 → 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 (729) hide show

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

@@ -11,14 +11,33 @@ const SixForm$1 = /*@__PURE__*/ proxyCustomElement(class SixForm extends HTMLEle
     this.sixSubmit = createEvent(this, "six-form-submit", 7);
     this.sixChange = createEvent(this, "six-form-change", 7);
     this.sixReset = createEvent(this, "six-form-reset", 7);
+    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) {
@@ -31,16 +50,16 @@ const SixForm$1 = /*@__PURE__*/ proxyCustomElement(class SixForm extends HTMLEle
       },
       {
         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();
@@ -50,7 +69,7 @@ const SixForm$1 = /*@__PURE__*/ proxyCustomElement(class SixForm extends HTMLEle
       },
       {
         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();
@@ -60,13 +79,13 @@ const SixForm$1 = /*@__PURE__*/ proxyCustomElement(class SixForm extends HTMLEle
       },
       {
         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 + '');
           }
         },
@@ -75,10 +94,10 @@ const SixForm$1 = /*@__PURE__*/ proxyCustomElement(class SixForm extends HTMLEle
       {
         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 {
@@ -94,17 +113,17 @@ const SixForm$1 = /*@__PURE__*/ proxyCustomElement(class SixForm extends HTMLEle
       },
       {
         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();
@@ -113,8 +132,6 @@ const SixForm$1 = /*@__PURE__*/ proxyCustomElement(class SixForm extends HTMLEle
         changeEventName: 'six-timepicker-change',
       },
     ];
-    this.handleClick = this.handleClick.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
   }
   disconnectedCallback() {
     this.eventListeners.removeAll();
@@ -125,7 +142,7 @@ const SixForm$1 = /*@__PURE__*/ proxyCustomElement(class SixForm extends HTMLEle
   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));
       }
     }
@@ -139,7 +156,13 @@ const SixForm$1 = /*@__PURE__*/ proxyCustomElement(class SixForm extends HTMLEle
   }
   /** 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 })
@@ -185,24 +208,6 @@ const SixForm$1 = /*@__PURE__*/ proxyCustomElement(class SixForm extends HTMLEle
       .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,

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

	@@ -1 +1 @@
1	- {"file":"six-form.js","mappings":"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","names":["SixForm"],"sources":["./src/components/six-form/six-form.scss?tag=six-form&encapsulation=shadow","./src/components/six-form/six-form.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n}\n","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"],"version":3}
1	+ {"file":"six-form.js","mappings":"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","names":["SixForm"],"sources":["./src/components/six-form/six-form.scss?tag=six-form&encapsulation=shadow","./src/components/six-form/six-form.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n}\n","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"],"version":3}

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

@@ -13,30 +13,31 @@ const SixGroupLabel$1 = /*@__PURE__*/ proxyCustomElement(class SixGroupLabel ext
     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)));

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

	@@ -1 +1 @@
1	- {"file":"six-group-label.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,w7EAAw7E;;ACIj9E,IAAI,EAAE,GAAG,CAAC,CAAC;MAoBEA,eAAa;;;;;~~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~~;GACzB;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;GAC5E;EAED,~~iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAED,~~oBAAoB;IAClB~~,IAAI,CAAC,IAAI,CAAC,UAAU,~~CAAC~~,~~mBAAmB~~,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;~~GAC/E~~;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;~~GACxD~~;~~EAED~~,MAAM;IACJ,QACE,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,IAEvB,eAAa,CACD,EACd;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixGroupLabel"],"sources":["./src/components/six-group-label/six-group-label.scss?tag=six-group-label&encapsulation=shadow","./src/components/six-group-label/six-group-label.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n display: block;\n}\n","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"],"version":3}
1	+ {"file":"six-group-label.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,w7EAAw7E;;ACIj9E,IAAI,EAAE,GAAG,CAAC,CAAC;MAoBEA,eAAa;;;;;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;MACzB,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;KACxD,CAAC;2BAvCyB,KAAK;wBACR,KAAK;gBAGiC,QAAQ;iBAGtD,EAAE;oBAGC,EAAE;oBAGe,KAAK;oBAGL,KAAK;;EAIzC,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAED,iBAAiB;;IACf,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;GAC7E;EAED,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;GAChF;EAOD,MAAM;IACJ,QACE,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,IAEvB,eAAa,CACD,EACd;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixGroupLabel"],"sources":["./src/components/six-group-label/six-group-label.scss?tag=six-group-label&encapsulation=shadow","./src/components/six-group-label/six-group-label.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n display: block;\n}\n","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"],"version":3}

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { E as EventListeners } from './event-listeners.js';
-import { g as getAvailableSlots } from './slot.js';
+import { g as getSlot, h as hasSlot } from './slot.js';
 import { d as defineCustomElement$7 } from './six-dropdown2.js';
 import { d as defineCustomElement$6 } from './six-icon2.js';
 import { d as defineCustomElement$5 } from './six-icon-button2.js';
@@ -14,9 +14,8 @@ 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) {
@@ -26,7 +25,6 @@ var Slot;
   Slot["Profile"] = "profile-menu";
   Slot["Logo"] = "logo";
 })(Slot || (Slot = {}));
-const getSlots = getAvailableSlots(Slot);
 const SixHeader$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader extends HTMLElement {
   constructor() {
     super();
@@ -39,42 +37,31 @@ const SixHeader$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader extends HTM
     this.sixLogoClick = createEvent(this, "six-header-logo-clicked", 7);
     this.sixSearchFieldToggle = createEvent(this, "six-header-search-field-toggle", 7);
     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;
@@ -108,46 +95,81 @@ const SixHeader$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader extends HTM
   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 }))));
   }

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

	@@ -1 +1 @@
1	- {"file":"six-header.js","mappings":"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","names":["SixHeader"],"sources":["./src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","./src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$header-height: 3.75rem;\n$border-height: 0.25rem;\n\n:host {\n display: block;\n user-select: none;\n --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n position: absolute;\n margin-left: var(--search-border-width);\n width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n display: flex;\n width: 100%;\n height: $header-height;\n background-color: var(--six-header-background-color);\n align-items: center;\n flex-wrap: wrap;\n box-shadow: var(--six-shadow-x-large);\n border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n &__logo {\n width: 6rem;\n margin-top: 0.15rem;\n\n &--clickable {\n cursor: pointer;\n }\n }\n\n &__placeholder {\n flex: 1;\n }\n\n &__menu,\n &__logo,\n &__custom,\n &__search,\n &__notification,\n &__app-switcher,\n &__profile {\n height: calc(100% - #{$border-height} - 1px);\n padding: 0 1.25rem;\n display: flex;\n align-items: center;\n border-bottom: solid $border-height transparent;\n\n &--open {\n border-bottom: solid $border-height var(--six-header-border-color-open);\n }\n }\n\n &__selected-app {\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 600;\n padding-right: 0;\n padding-left: 0.3rem;\n &:hover {\n color: var(--six-header-selected-app-color-hover);\n }\n }\n\n &__search-field {\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n display: none;\n\n &--visible {\n opacity: 1;\n transform: none;\n display: block;\n }\n\n &--shift-content.six-header__search-field--visible {\n height: 2.65rem;\n transition: var(--six-transition-fast) height;\n }\n\n &--shift-content:not(.six-header__search-field--visible) {\n height: 0;\n transition: var(--six-transition-fast) height;\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getAvailableSlots } 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 Notifications,\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\nconst getSlots = getAvailableSlots(Slot);\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' })\n 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' })\n sixProfileSelect: EventEmitter<SixHeaderProfileSelectPayload>;\n\n /* Emitted when the hamburger menu is clicked. /\n @Event({ eventName: 'six-header-hamburger-menu-clicked' })\n sixHamburgerClick: EventEmitter<EmptyPayload>;\n\n /* Emitted when the header logo is clicked. /\n @Event({ eventName: 'six-header-logo-clicked' })\n 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 readonly eventListeners = new EventListeners();\n\n slots: { readonly [K: string]: boolean };\n\n @State() selectedApp: string;\n @State() selectedSection: Section;\n\n has = (slot: Slot) => this.slots[slot];\n\n selected = (value: Section) => value === this.selectedSection;\n\n select = (value: Section) => () => {\n this.selectedSection = value;\n };\n\n toggleSearch = (value: Section) => () => {\n if (value === Section.Search) {\n const visible = this.selectedSection !== value;\n if (visible) {\n this.host.querySelector(`[slot=\"${Slot.Search}\"]`).shadowRoot.querySelector('six-input')?.setFocus();\n }\n this.sixSearchFieldToggle.emit({ visible });\n }\n this.selectedSection = this.selectedSection === value ? Section.None : value;\n };\n\n setupMenu = (el: HTMLSixIconButtonElement) => {\n this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());\n };\n\n setupLogo = (el: HTMLSixIconButtonElement) => {\n if (!this.clickableLogo) {\n return;\n }\n\n this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());\n };\n\n setupProfile = (el: HTMLSixDropdownElement) => {\n this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.Profile));\n this.eventListeners.add(el, 'six-dropdown-hide', this.select(Section.None));\n this.eventListeners.add(el, 'six-menu-item-selected', (event: CustomEvent) => {\n const { name, item } = event.detail;\n this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });\n });\n };\n\n setupAppSwitcher = (el: HTMLSixDropdownElement) => {\n this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.AppSwitcher));\n this.eventListeners.add(el, 'six-dropdown-hide', this.select(Section.None));\n this.eventListeners.add(el, 'six-menu-item-selected', (event: CustomEvent) => {\n const { name, item } = event.detail;\n this.selectedApp = item.innerText;\n this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });\n });\n };\n\n appNameClicked = () => this.sixAppNameClicked.emit();\n\n computeSearchOpenState = () => {\n this.selectedSection = this.openSearch ? Section.Search : Section.None;\n };\n\n componentWillLoad() {\n this.slots = getSlots(this.host);\n\n if (this.has(Slot.AppSwitcher)) {\n this.selectedApp = this.getSelectedApp();\n }\n\n if (this.has(Slot.Search)) {\n this.computeSearchOpenState();\n }\n }\n\n private getSelectedApp() {\n // there are more concise ways to select the first checked menu item, but this is one that works for jest\n const element = this.host.querySelector(`[slot=\"${Slot.AppSwitcher}\"]`);\n const items = Array.from(element.querySelectorAll('six-menu-item'));\n const firstCheckedMenuItem = items.find((item: HTMLElement) => item.hasAttribute('checked'));\n return firstCheckedMenuItem?.textContent;\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n render() {\n const search = this.has(Slot.Search) && (\n <section\n class={{\n 'six-header__search': true,\n 'six-header__search--open': this.selected(Section.Search),\n }}\n >\n <six-icon-button name=\"search\" onClick={this.toggleSearch(Section.Search)} data-testid=\"search-trigger\" />\n </section>\n );\n\n const notifications = this.has(Slot.Notifications) && (\n <section class=\"six-header__notification\">\n <slot name={Slot.Notifications} />\n </section>\n );\n\n const appSwitcher = this.has(Slot.AppSwitcher) && (\n <section\n class={{\n 'six-header__app-switcher': true,\n 'six-header__app-switcher--open': this.selected(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.has(Slot.Profile) && (\n <section\n class={{\n 'six-header__profile': true,\n 'six-header__profile--open': this.selected(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.has(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.selected(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"],"version":3}
1	+ {"file":"six-header.js","mappings":"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","names":["SixHeader"],"sources":["./src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","./src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$header-height: 3.75rem;\n$border-height: 0.25rem;\n\n:host {\n display: block;\n user-select: none;\n --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n position: absolute;\n margin-left: var(--search-border-width);\n width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n display: flex;\n width: 100%;\n height: $header-height;\n background-color: var(--six-header-background-color);\n align-items: center;\n flex-wrap: wrap;\n box-shadow: var(--six-shadow-x-large);\n border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n &__logo {\n width: 6rem;\n margin-top: 0.15rem;\n\n &--clickable {\n cursor: pointer;\n }\n }\n\n &__placeholder {\n flex: 1;\n }\n\n &__menu,\n &__logo,\n &__custom,\n &__search,\n &__notification,\n &__app-switcher,\n &__profile {\n height: calc(100% - #{$border-height} - 1px);\n padding: 0 1.25rem;\n display: flex;\n align-items: center;\n border-bottom: solid $border-height transparent;\n\n &--open {\n border-bottom: solid $border-height var(--six-header-border-color-open);\n }\n }\n\n &__selected-app {\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 600;\n padding-right: 0;\n padding-left: 0.3rem;\n &:hover {\n color: var(--six-header-selected-app-color-hover);\n }\n }\n\n &__search-field {\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n display: none;\n\n &--visible {\n opacity: 1;\n transform: none;\n display: block;\n }\n\n &--shift-content.six-header__search-field--visible {\n height: 2.65rem;\n transition: var(--six-transition-fast) height;\n }\n\n &--shift-content:not(.six-header__search-field--visible) {\n height: 0;\n transition: var(--six-transition-fast) height;\n }\n }\n}\n","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"],"version":3}

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

@@ -22,12 +22,12 @@ const SixIconButton = /*@__PURE__*/ proxyCustomElement(class SixIconButton exten
     this.html = undefined;
   }
   componentDidLoad() {
-    if (this.button) {
+    if (this.button != null) {
       focusVisible.observe(this.button);
     }
   }
   disconnectedCallback() {
-    if (this.button) {
+    if (this.button != null) {
       focusVisible.unobserve(this.button);
     }
   }