npm - @ukic/web-components - Versions diffs - 2.1.0-beta.0 → 2.1.0-beta.2 - Mend

@ukic/web-components 2.1.0-beta.0 → 2.1.0-beta.2

Files changed (591) hide show

package/dist/collection/components/ic-stepper/ic-stepper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-stepper.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/ic-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { checkResizeObserver } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\n\n@Component({\n tag: \"ic-stepper\",\n styleUrl: \"ic-stepper.css\",\n shadow: true,\n})\nexport class IcStepper {\n @Element() el: HTMLIcStepperElement;\n\n /*\n ~~How~~ the stepper ~~should~~ ~~be aligned in~~ its container.\n /\n @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n /\n The length of the connnector between each step in pixels. Minimum length is 100px.\n /\n @Prop() connectorWidth?: number = 100;\n\n @State() stepperWidth: number = document\n .querySelector(\"ic-stepper\")\n .getBoundingClientRect().width;\n\n @State() lastStepWidth: number = 0;\n\n private steps: HTMLIcStepElement[];\n\n private resizeObserver: ResizeObserver = null;\n\n /\n Get all steps currently within this stepper\n */\n private getChildren = (): void => {\n this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n };\n\n private initialiseStepStates = (): void => {\n this.steps.forEach((step, index) => {\n // Assign stepNum to each step\n step.stepNum = index + 1;\n //Assign lastStep to final step\n step.lastStep = index === this.steps.length - 1;\n\n if (step.lastStep) {\n step.classList.add(\"last-step\");\n if (this.el.classList.contains(\"aligned-full-width\")) {\n step.style.maxWidth = `${this.lastStepWidth}px`;\n }\n if (this.el.classList.contains(\"aligned-left\")) {\n step.style.maxWidth = `${this.connectorWidth + 48}px`;\n }\n }\n });\n\n for (let i = 0; i < this.steps.length - 1; i++) {\n if (this.el.classList.contains(\"aligned-full-width\")) {\n this.steps[i].style.width = `${\n (this.stepperWidth - this.lastStepWidth) / (this.steps.length - 1)\n }px`;\n this.steps[i].style.minWidth = \"148px\";\n }\n\n if (this.el.classList.contains(\"aligned-left\")) {\n this.steps[i].style.width = `${this.connectorWidth + 48}px`;\n const stepConnect = this.steps[i].shadowRoot.querySelector(\n \"div > .step-top > .step-connect\"\n ) as HTMLElement;\n stepConnect.style.width =\n this.connectorWidth > 100 ? `${this.connectorWidth}px` : \"100px\";\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.setStepperWidth();\n this.getChildren();\n this.initialiseStepStates();\n });\n this.resizeObserver.observe(this.el);\n };\n\n private setStepperWidth = (): void => {\n this.stepperWidth = this.el.offsetWidth;\n const allSteps = document.querySelectorAll(\"ic-step\");\n const lastStep = allSteps[allSteps.length - 1];\n lastStep.style.maxWidth = \"none\";\n if (lastStep.classList.contains(\"aligned-full-width\")) {\n lastStep.style.maxWidth = `${this.stepperWidth / allSteps.length}px`;\n }\n this.lastStepWidth = lastStep.offsetWidth;\n this.getChildren();\n this.initialiseStepStates();\n };\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n return (\n <Host\n class={{\n [\"aligned-left\"]: this.aligned === \"left\",\n [\"aligned-full-width\"]: this.aligned === \"full-width\",\n }}\n >\n <ul class=\"step-item-list\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-stepper.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/ic-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { checkResizeObserver } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\n\n@Component({\n tag: \"ic-stepper\",\n styleUrl: \"ic-stepper.css\",\n shadow: true,\n})\nexport class IcStepper {\n @Element() el: HTMLIcStepperElement;\n\n /*\n The alignment of the stepper within its container.\n /\n @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n /\n The length of the connnector between each step in pixels. Minimum length is 100px.\n /\n @Prop() connectorWidth?: number = 100;\n\n @State() stepperWidth: number = document\n .querySelector(\"ic-stepper\")\n .getBoundingClientRect().width;\n\n @State() lastStepWidth: number = 0;\n\n private steps: HTMLIcStepElement[];\n\n private resizeObserver: ResizeObserver = null;\n\n /\n Get all steps currently within this stepper\n */\n private getChildren = (): void => {\n this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n };\n\n private initialiseStepStates = (): void => {\n this.steps.forEach((step, index) => {\n // Assign stepNum to each step\n step.stepNum = index + 1;\n //Assign lastStep to final step\n step.lastStep = index === this.steps.length - 1;\n\n if (step.lastStep) {\n step.classList.add(\"last-step\");\n if (this.el.classList.contains(\"aligned-full-width\")) {\n step.style.maxWidth = `${this.lastStepWidth}px`;\n }\n if (this.el.classList.contains(\"aligned-left\")) {\n step.style.maxWidth = `${this.connectorWidth + 48}px`;\n }\n }\n });\n\n for (let i = 0; i < this.steps.length - 1; i++) {\n if (this.el.classList.contains(\"aligned-full-width\")) {\n this.steps[i].style.width = `${\n (this.stepperWidth - this.lastStepWidth) / (this.steps.length - 1)\n }px`;\n this.steps[i].style.minWidth = \"148px\";\n }\n\n if (this.el.classList.contains(\"aligned-left\")) {\n this.steps[i].style.width = `${this.connectorWidth + 48}px`;\n const stepConnect = this.steps[i].shadowRoot.querySelector(\n \"div > .step-top > .step-connect\"\n ) as HTMLElement;\n stepConnect.style.width =\n this.connectorWidth > 100 ? `${this.connectorWidth}px` : \"100px\";\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.setStepperWidth();\n this.getChildren();\n this.initialiseStepStates();\n });\n this.resizeObserver.observe(this.el);\n };\n\n private setStepperWidth = (): void => {\n this.stepperWidth = this.el.offsetWidth;\n const allSteps = document.querySelectorAll(\"ic-step\");\n const lastStep = allSteps[allSteps.length - 1];\n lastStep.style.maxWidth = \"none\";\n if (lastStep.classList.contains(\"aligned-full-width\")) {\n lastStep.style.maxWidth = `${this.stepperWidth / allSteps.length}px`;\n }\n this.lastStepWidth = lastStep.offsetWidth;\n this.getChildren();\n this.initialiseStepStates();\n };\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n return (\n <Host\n class={{\n [\"aligned-left\"]: this.aligned === \"left\",\n [\"aligned-full-width\"]: this.aligned === \"full-width\",\n }}\n >\n <ul class=\"step-item-list\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-switch/ic-switch.css CHANGED Viewed

@@ -624,3 +624,33 @@ input {
 ::slotted(*) {
   margin-left: var(--ic-space-sm);
 }
+::slotted(svg) {
+  fill: currentcolor;
+}
+@media (forced-colors: active) {
+  .ic-switch-toggle::before,
+  .ic-switch-input:checked + .ic-switch-toggle {
+    border: var(--ic-hc-border);
+  }
+  .ic-switch-input:checked + .ic-switch-toggle::before {
+    transform: translate(calc(var(--ic-space-xl) - 2px), -50%);
+  }
+  .ic-switch-input:disabled + .ic-switch-toggle,
+  .ic-switch-input:disabled:checked + .ic-switch-toggle,
+  .ic-switch-input:disabled + .ic-switch-toggle::before {
+    border-color: GrayText;
+  }
+  .ic-switch-input:disabled ~ .ic-switch-checked-status {
+    color: GrayText;
+  }
+  .ic-switch-disabled .ic-switch-icon-circle,
+  .ic-switch-disabled .ic-switch-icon-line {
+    stroke: GrayText;
+  }
+}

package/dist/collection/components/ic-switch/ic-switch.js CHANGED Viewed

@@ -84,7 +84,7 @@ export class Switch {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Applies an aria-label to the component, for when no visual 'name' is provided."
+          "text": "The aria-label applied to the switch when no visual 'name' is provided."
         },
         "attribute": "label",
         "reflect": false
@@ -101,7 +101,7 @@ export class Switch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Hides the label and applies the required label value as an aria-label."
+          "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
         },
         "attribute": "hide-label",
         "reflect": false,
@@ -119,7 +119,7 @@ export class Switch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Provide helper text to display additional field guidance."
+          "text": "The helper text that will be displayed for additional field guidance."
         },
         "attribute": "helper-text",
         "reflect": false,
@@ -137,7 +137,7 @@ export class Switch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If true, the component is checked."
+          "text": "If `true`, the switch will display as checked."
         },
         "attribute": "checked",
         "reflect": false,
@@ -155,7 +155,7 @@ export class Switch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If true, the component reduces in size to the small state."
+          "text": "If `true`, the small styling will be applied to the switch."
         },
         "attribute": "small",
         "reflect": false,
@@ -173,7 +173,7 @@ export class Switch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If true, the component is not interactive."
+          "text": "If `true`, the disabled state will be set."
         },
         "attribute": "disabled",
         "reflect": false,
@@ -209,7 +209,7 @@ export class Switch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If true, the component will render the On/Off state text."
+          "text": "If `true`, the switch will render the On/Off state text."
         },
         "attribute": "show-state",
         "reflect": false,

package/dist/collection/components/ic-switch/ic-switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-switch.js","sourceRoot":"","sources":["../../../src/components/ic-switch/ic-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\n\nlet inputIds = 0;\n\n/*\n @slot right-adornment - Content is placed to the right of switch before state label.\n /\n@Component({\n tag: \"ic-switch\",\n styleUrl: \"ic-switch.css\",\n shadow: true,\n})\nexport class Switch {\n private inputId = `ic-switch-input-${inputIds++}`;\n\n @Element() el: HTMLIcSwitchElement;\n\n /\n ~~Applies~~ an aria-label to the ~~component,~~ ~~for~~ when no visual 'name' is provided.\n /\n @Prop() label!: string;\n\n /\n ~~Hides~~ the label and ~~applies~~ the required label value as an aria-label.\n /\n @Prop() hideLabel?: boolean = false;\n /\n ~~Provide~~ helper text to ~~display~~ additional field guidance.\n /\n @Prop() helperText?: string = \"\";\n /\n If true, the ~~component~~ is checked.\n /\n @Prop() checked?: boolean = false;\n /\n If true, the ~~component~~ ~~reduces~~ in ~~size~~ to the ~~small state~~.\n /\n @Prop() small?: boolean = false;\n /\n If true, the ~~component~~ is ~~not~~ ~~interactive~~.\n /\n @Prop() disabled?: boolean = false;\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name?: string = this.inputId;\n /\n If true, the ~~component~~ will render the On/Off state text.\n /\n @Prop() showState?: boolean = false;\n\n /\n The value of the toggle does not mean if it's checked or not, use the `checked`\n * property for that.\n \n The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n * it's only used when the toggle participates in a native `<form>`.\n /\n @Prop() value?: string \| null = \"on\";\n\n /\n Emitted when the value property has changed.\n /\n @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n /\n Emitted when the toggle has focus.\n /\n @Event() icFocus!: EventEmitter<void>;\n\n /\n Emitted when the toggle loses focus.\n */\n @Event() icBlur!: EventEmitter<void>;\n\n @State() checkedState: boolean = false;\n @State() initiallyChecked = this.checked;\n\n private handleChange = () => {\n this.checkedState = !this.checkedState;\n this.icChange.emit({\n checked: this.checkedState,\n value: this.value,\n });\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private handleFormReset = (): void => {\n this.checkedState = this.initiallyChecked;\n };\n\n componentWillLoad(): void {\n this.checkedState = this.checked;\n addFormResetListener(this.el, this.handleFormReset);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Switch\"\n );\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n render() {\n const {\n label,\n checkedState,\n small,\n disabled,\n name,\n showState,\n value,\n hideLabel,\n helperText,\n inputId,\n } = this;\n\n renderHiddenInput(true, this.el, name, checkedState ? value : \"\", disabled);\n\n const describedBy = getInputDescribedByText(\n inputId,\n helperText !== \"\",\n false\n );\n\n return (\n <Host>\n <label\n class={{\n [\"ic-switch-container\"]: true,\n [\"ic-switch-disabled\"]: disabled,\n [\"ic-switch-small\"]: small,\n }}\n htmlFor={inputId}\n >\n {!hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n readonly={true}\n disabled={disabled}\n class={{\n [\"ic-switch-label\"]: true,\n [\"ic-switch-label-small\"]: small,\n }}\n ></ic-input-label>\n )}\n {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n <input\n checked={checkedState}\n disabled={disabled}\n aria-label={label}\n aria-checked={checkedState ? \"true\" : \"false\"}\n aria-describedby={describedBy}\n role=\"switch\"\n class=\"ic-switch-input\"\n type=\"checkbox\"\n name=\"toggle\"\n id={inputId}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onChange={this.handleChange}\n />\n <span class=\"ic-switch-toggle\">\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n class=\"ic-switch-icon-line\"\n x1=\"9\"\n y1={small ? \"2\" : \"1\"}\n x2=\"9\"\n y2={small ? \"8\" : \"9\"}\n />\n </svg>\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle\n class=\"ic-switch-icon-circle\"\n fill=\"none\"\n cx=\"5\"\n cy=\"5\"\n r={small ? \"3.335\" : \"4.445\"}\n />\n </svg>\n </span>\n <slot name=\"right-adornment\"></slot>\n {showState && (\n <ic-typography\n aria-hidden=\"true\"\n variant=\"label\"\n class=\"ic-switch-checked-status\"\n >\n {checkedState ? \"On\" : \"Off\"}\n </ic-typography>\n )}\n </label>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-switch.js","sourceRoot":"","sources":["../../../src/components/ic-switch/ic-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\n\nlet inputIds = 0;\n\n/*\n @slot right-adornment - Content is placed to the right of switch before state label.\n /\n@Component({\n tag: \"ic-switch\",\n styleUrl: \"ic-switch.css\",\n shadow: true,\n})\nexport class Switch {\n private inputId = `ic-switch-input-${inputIds++}`;\n\n @Element() el: HTMLIcSwitchElement;\n\n /\n The aria-label applied to the switch when no visual 'name' is provided.\n /\n @Prop() label!: string;\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel?: boolean = false;\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText?: string = \"\";\n /\n If `true`, the switch will display as checked.\n /\n @Prop() checked?: boolean = false;\n /\n If `true`, the small styling will be applied to the switch.\n /\n @Prop() small?: boolean = false;\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name?: string = this.inputId;\n /\n If `true`, the switch will render the On/Off state text.\n /\n @Prop() showState?: boolean = false;\n\n /\n The value of the toggle does not mean if it's checked or not, use the `checked`\n * property for that.\n \n The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n * it's only used when the toggle participates in a native `<form>`.\n /\n @Prop() value?: string \| null = \"on\";\n\n /\n Emitted when the value property has changed.\n /\n @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n /\n Emitted when the toggle has focus.\n /\n @Event() icFocus!: EventEmitter<void>;\n\n /\n Emitted when the toggle loses focus.\n */\n @Event() icBlur!: EventEmitter<void>;\n\n @State() checkedState: boolean = false;\n @State() initiallyChecked = this.checked;\n\n private handleChange = () => {\n this.checkedState = !this.checkedState;\n this.icChange.emit({\n checked: this.checkedState,\n value: this.value,\n });\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private handleFormReset = (): void => {\n this.checkedState = this.initiallyChecked;\n };\n\n componentWillLoad(): void {\n this.checkedState = this.checked;\n addFormResetListener(this.el, this.handleFormReset);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Switch\"\n );\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n render() {\n const {\n label,\n checkedState,\n small,\n disabled,\n name,\n showState,\n value,\n hideLabel,\n helperText,\n inputId,\n } = this;\n\n renderHiddenInput(true, this.el, name, checkedState ? value : \"\", disabled);\n\n const describedBy = getInputDescribedByText(\n inputId,\n helperText !== \"\",\n false\n );\n\n return (\n <Host>\n <label\n class={{\n [\"ic-switch-container\"]: true,\n [\"ic-switch-disabled\"]: disabled,\n [\"ic-switch-small\"]: small,\n }}\n htmlFor={inputId}\n >\n {!hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n readonly={true}\n disabled={disabled}\n class={{\n [\"ic-switch-label\"]: true,\n [\"ic-switch-label-small\"]: small,\n }}\n ></ic-input-label>\n )}\n {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n <input\n checked={checkedState}\n disabled={disabled}\n aria-label={label}\n aria-checked={checkedState ? \"true\" : \"false\"}\n aria-describedby={describedBy}\n role=\"switch\"\n class=\"ic-switch-input\"\n type=\"checkbox\"\n name=\"toggle\"\n id={inputId}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onChange={this.handleChange}\n />\n <span class=\"ic-switch-toggle\">\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n class=\"ic-switch-icon-line\"\n x1=\"9\"\n y1={small ? \"2\" : \"1\"}\n x2=\"9\"\n y2={small ? \"8\" : \"9\"}\n />\n </svg>\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle\n class=\"ic-switch-icon-circle\"\n fill=\"none\"\n cx=\"5\"\n cy=\"5\"\n r={small ? \"3.335\" : \"4.445\"}\n />\n </svg>\n </span>\n <slot name=\"right-adornment\"></slot>\n {showState && (\n <ic-typography\n aria-hidden=\"true\"\n variant=\"label\"\n class=\"ic-switch-checked-status\"\n >\n {checkedState ? \"On\" : \"Off\"}\n </ic-typography>\n )}\n </label>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-tab/ic-tab.css CHANGED Viewed

@@ -507,5 +507,15 @@ video {
 }
 ::slotted(svg) {
-  fill: var(--label-color);
+  fill: currentcolor;
+}
+@media (forced-colors: active) {
+  :host {
+    border-bottom: var(--ic-space-xxs) solid canvas;
+  }
+  :host([disabled]) {
+    color: GrayText;
+  }
 }

package/dist/collection/components/ic-tab/ic-tab.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import { Host, h, } from "@stencil/core";
-import { onComponentRequiredPropUndefined } from "../../utils/helpers";
 import { IcThemeForegroundEnum, } from "../../utils/types";
 /**
  * @slot icon - Content will be rendered next to the tab label.
@@ -48,9 +47,6 @@ export class Tab {
   componentDidUpdate() {
     this.isInitialRender = false;
   }
-  componentDidLoad() {
-    onComponentRequiredPropUndefined([{ prop: this.tabPosition, propName: "tab-position" }], "Tab");
-  }
   render() {
     const { disabled, selected, appearance } = this;
     return (h(Host, { class: {
@@ -85,7 +81,7 @@ export class Tab {
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel."
+              "text": "The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel."
             }],
           "text": ""
         },
@@ -105,7 +101,7 @@ export class Tab {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Disables the tab."
+          "text": "If `true`, the disabled state will be set."
         },
         "attribute": "disabled",
         "reflect": false,
@@ -124,7 +120,7 @@ export class Tab {
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Will display a selected indicator and set tabIndex."
+              "text": "If `true`, the tab will display with a selected indicator and tabIndex will be set."
             }],
           "text": ""
         },
@@ -160,8 +156,8 @@ export class Tab {
           "resolved": "number",
           "references": {}
         },
-        "required": true,
-        "optional": false,
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [{
               "name": "internal",
@@ -209,7 +205,7 @@ export class Tab {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Called when a tab is selected."
+          "text": "Emitted when a tab is selected."
         },
         "complexType": {
           "original": "IcTabClickEventDetail",
@@ -230,7 +226,7 @@ export class Tab {
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Called when a tab is focussed."
+              "text": "Emitted when a tab is focussed."
             }],
           "text": ""
         },

package/dist/collection/components/ic-tab/ic-tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-tab.js","sourceRoot":"","sources":["../../../src/components/ic-tab/ic-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,CAAC,GACF,MAAM,eAAe,CAAC;~~AAEvB~~,OAAO,~~EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAEvE,OAAO,~~EAEL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B;;GAEG;AAMH,MAAM,OAAO,GAAG;;IAiCN,oBAAe,GAAY,IAAI,CAAC;IAChC,mBAAc,GAAY,KAAK,CAAC;IAEhC,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;OAC3B,CAAC,CAAC;MACH,IAAI,IAAI,CAAC,cAAc,EAAE;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;OAC7B;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;OACJ;IACH,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAG,EAAE;MAC7B,iDAAiD;MACjD,wFAAwF;MACxF,iFAAiF;MACjF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC,CAAC;qBA/D4C,SAAS;oBAK1B,KAAK;oBAGY,KAAK;;;sBASD,MAAM;;EAgDxD,kBAAkB;IAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;EAC/B,CAAC;EAED,~~gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC,EACtD,KAAK,CACN,CAAC;EACJ,CAAC;EAED,~~MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAChD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe;QAC1C,CAAC,cAAc,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;OAC7D,EACD,IAAI,EAAC,KAAK,mBACK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,eAAe,mBAClB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;MAE/B,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ;MACtE,qBAAe,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,OAAO;QACjD;UACE,eAAa,CACR,CACO,CACX,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n} from \"@stencil/core\";\n\nimport { ~~onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {~~ IcTabClickEventDetail } from \"./ic-tab.types\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/*\n @slot icon - Content will be rendered next to the tab label.\n /\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n @Element() host: HTMLIcTabElement;\n\n /* @internal ~~Provide~~ a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n ~~Disables~~ the ~~tab~~.\n /\n @Prop() disabled?: boolean = false;\n\n /* @internal ~~Will~~ display a selected indicator and set ~~tabIndex~~. /\n @Prop({ reflect: true }) selected?: boolean = false;\n\n /* @internal The shared ID between panel and tab. /\n @Prop({ reflect: true }) tabId?: string;\n\n /* @internal The position of the tab inside the tabs array in context. /\n @Prop() tabPosition!: number;\n\n /* @internal Determines whether the light or dark variant of the tabs should be displayed. /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n /\n ~~Called~~ when a tab is selected.\n /\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal ~~Called~~ when a tab is focussed.\n */\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n private isInitialRender: boolean = true;\n private focusFromClick: boolean = false;\n\n private handleClick = () => {\n this.tabClick.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n if (this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n this.focusFromClick = false;\n }\n };\n\n private handleFocus = () => {\n if (!this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n }\n };\n\n private handleMouseDown = () => {\n //set flag so that focus gets handled after click\n //there is a timing issue where a long click only causes focus to happen & not the click\n //the focus does need to be a seperate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n ~~componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.tabPosition, propName: \"tab-position\" }],\n \"Tab\"\n );\n }\n\n~~ render() {\n const { disabled, selected, appearance } = this;\n return (\n <Host\n class={{\n [\"with-transition\"]: !this.isInitialRender,\n [\"ic-tab-light\"]: appearance === IcThemeForegroundEnum.Light,\n }}\n role=\"tab\"\n aria-selected={selected ? \"true\" : \"false\"}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onMouseDown={this.handleMouseDown}\n aria-disabled={disabled ? \"true\" : \"false\"}\n tabindex={this.selected ? 0 : -1}\n >\n {this.host.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n <ic-typography class=\"ic-tab-label\" variant=\"label\">\n <span>\n <slot></slot>\n </span>\n </ic-typography>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-tab.js","sourceRoot":"","sources":["../../../src/components/ic-tab/ic-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,CAAC,GACF,MAAM,eAAe,CAAC;AAGvB,OAAO,EAEL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B;;GAEG;AAMH,MAAM,OAAO,GAAG;;IAiCN,oBAAe,GAAY,IAAI,CAAC;IAChC,mBAAc,GAAY,KAAK,CAAC;IAEhC,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;OAC3B,CAAC,CAAC;MACH,IAAI,IAAI,CAAC,cAAc,EAAE;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;OAC7B;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;OACJ;IACH,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAG,EAAE;MAC7B,iDAAiD;MACjD,wFAAwF;MACxF,iFAAiF;MACjF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC,CAAC;qBA/D4C,SAAS;oBAK1B,KAAK;oBAGY,KAAK;;;sBASD,MAAM;;EAgDxD,kBAAkB;IAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;EAC/B,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAChD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe;QAC1C,CAAC,cAAc,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;OAC7D,EACD,IAAI,EAAC,KAAK,mBACK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,eAAe,mBAClB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;MAE/B,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ;MACtE,qBAAe,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,OAAO;QACjD;UACE,eAAa,CACR,CACO,CACX,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n} from \"@stencil/core\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/*\n @slot icon - Content will be rendered next to the tab label.\n /\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n @Element() host: HTMLIcTabElement;\n\n /* @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n\n /* @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. /\n @Prop({ reflect: true }) selected?: boolean = false;\n\n /* @internal The shared ID between panel and tab. /\n @Prop({ reflect: true }) tabId?: string;\n\n /* @internal The position of the tab inside the tabs array in context. /\n @Prop() tabPosition?: number;\n\n /* @internal Determines whether the light or dark variant of the tabs should be displayed. /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n /\n Emitted when a tab is selected.\n /\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Emitted when a tab is focussed.\n */\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n private isInitialRender: boolean = true;\n private focusFromClick: boolean = false;\n\n private handleClick = () => {\n this.tabClick.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n if (this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n this.focusFromClick = false;\n }\n };\n\n private handleFocus = () => {\n if (!this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n }\n };\n\n private handleMouseDown = () => {\n //set flag so that focus gets handled after click\n //there is a timing issue where a long click only causes focus to happen & not the click\n //the focus does need to be a seperate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n render() {\n const { disabled, selected, appearance } = this;\n return (\n <Host\n class={{\n [\"with-transition\"]: !this.isInitialRender,\n [\"ic-tab-light\"]: appearance === IcThemeForegroundEnum.Light,\n }}\n role=\"tab\"\n aria-selected={selected ? \"true\" : \"false\"}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onMouseDown={this.handleMouseDown}\n aria-disabled={disabled ? \"true\" : \"false\"}\n tabindex={this.selected ? 0 : -1}\n >\n {this.host.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n <ic-typography class=\"ic-tab-label\" variant=\"label\">\n <span>\n <slot></slot>\n </span>\n </ic-typography>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-tab-context/ic-tab-context.js CHANGED Viewed

@@ -225,7 +225,7 @@ export class TabContext {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel."
+          "text": "The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel."
         },
         "attribute": "context-id",
         "reflect": true,
@@ -266,7 +266,7 @@ export class TabContext {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Allows the user to control the selected tab. Must be used alongside the tabSelect event to manage tab selection."
+          "text": "The selected tab to be controlled by the user. Must be used alongside the tabSelect event to manage tab selection."
         },
         "attribute": "selected-tab-index",
         "reflect": false
@@ -288,7 +288,7 @@ export class TabContext {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Determines whether the light or dark variant of the tabs should be displayed."
+          "text": "The appearance of the tab context, e.g dark, or light."
         },
         "attribute": "appearance",
         "reflect": false,

package/dist/collection/components/ic-tab-context/ic-tab-context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-tab-context.js","sourceRoot":"","sources":["../../../src/components/ic-tab-context/ic-tab-context.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Prop,\n State,\n h,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcActivationTypes,\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nimport {\n IcTabClickEventDetail,\n IcTabSelectEventDetail,\n} from \"../ic-tab/ic-tab.types\";\n\n@Component({\n tag: \"ic-tab-context\",\n})\nexport class TabContext {\n @Element() host: HTMLIcTabContextElement;\n\n /*\n Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.\n /\n @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n /\n Allows the user to control the selected tab. Must be used alongside the tabSelect event to manage tab selection.\n /\n @Prop() selectedTabIndex?: number;\n\n /\n Determines whether the light or dark variant of the tabs should be displayed.\n /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n @State() selectedTab: number \| null;\n\n @Watch(\"selectedTabIndex\")\n updateSelectedTab(newValue: number): void {\n this.selectedTab = newValue;\n }\n\n /\n Emitted when a user selects a tab.\n */\n @Event() tabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n @Listen(\"tabClick\")\n tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n if (\n this.selectedTabIndex === undefined &&\n event.detail.contextId === this.contextId\n ) {\n this.selectedTab = event.detail.position;\n }\n this.tabSelect.emit({\n tabIndex: event.detail.position,\n });\n }\n\n private controlledMode: boolean;\n private tabs: HTMLIcTabElement[];\n private enabledTabs: HTMLIcTabElement[];\n private tabPanels: HTMLIcTabPanelElement[];\n private tabGroup: HTMLIcTabGroupElement;\n private focusedTabIndex: number;\n\n // Sets attributes to link tabs and tabpanels\n private linkTabs = () => {\n this.tabs.forEach((tab, index) => {\n const tabId = `ic-tab-${index}-context-${this.contextId}`;\n const tabPanelId = `ic-tab-panel-${index}-context-${this.contextId}`;\n const shared = `ic-tab--${index}-context-${this.contextId}`;\n tab.setAttribute(\"id\", tabId);\n tab.tabId = shared;\n tab.tabPosition = index;\n tab.setAttribute(\"aria-controls\", tabPanelId);\n tab.setAttribute(\"context-id\", this.contextId);\n this.tabPanels[index].setAttribute(\"id\", tabPanelId);\n this.tabPanels[index].panelId = shared;\n this.tabPanels[index].tabPosition = index;\n this.tabPanels[index].setAttribute(\"aria-labelledby\", tabId);\n\n if (this.appearance === IcThemeForegroundEnum.Light) {\n tab.appearance = this.appearance;\n this.tabPanels[index].appearance = this.appearance;\n }\n });\n\n if (this.appearance === IcThemeForegroundEnum.Light) {\n this.tabGroup.appearance = this.appearance;\n }\n };\n\n // Gets tabs and tabpanels with the same context ID\n private getChildren = (): void => {\n this.tabGroup = Array.from(this.host.querySelectorAll(\"ic-tab-group\")).find(\n (tabGroup) => tabGroup.contextId === this.contextId\n );\n this.tabs = Array.from(this.tabGroup.querySelectorAll(\"ic-tab\")).filter(\n (tab) => tab.contextId === this.contextId\n );\n this.enabledTabs = this.getEnabledTabs();\n this.tabPanels = Array.from(this.host.querySelectorAll(\"ic-tab-panel\"));\n };\n\n // Determines how keyboard navigation is to be handled based on the activation type\n private attatchEventListeners = (): void => {\n if (this.activationType === \"automatic\") {\n this.tabGroup.addEventListener(\"keydown\", (event) => {\n this.handleKeyBoardNavAutomatic(event);\n });\n } else {\n this.tabGroup.addEventListener(\"keydown\", (event) => {\n this.handleKeyBoardNavManual(event);\n });\n }\n };\n\n // Determines whether the selected tab is being controlled within the component\n // or by the user (via selectedTabIndex and onTabSelect)\n private setControlledMode = (): void => {\n if (this.selectedTabIndex !== undefined) {\n this.controlledMode = true;\n this.selectedTab = this.selectedTabIndex;\n }\n };\n\n // Sets the tab that is selected on initial render\n private setInitialTab = (): void => {\n if (this.controlledMode) {\n this.selectedTab = this.selectedTabIndex;\n this.focusedTabIndex = this.selectedTabIndex;\n } else {\n const firstEnabledTabIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[0].tabId\n );\n this.selectedTab = firstEnabledTabIndex;\n this.focusedTabIndex = firstEnabledTabIndex;\n }\n };\n\n // Passes the selected tab to the tab and tab panel components\n private configureTabs = () => {\n this.enabledTabs.forEach((tab) => {\n tab.selected = tab.tabPosition === this.selectedTab;\n });\n this.tabPanels.forEach((tabPanel) => {\n tabPanel.selectedTab = this.tabs[this.selectedTab].tabId;\n });\n };\n\n private getEnabledTabs = () => {\n return Array.from(this.tabs).filter((child) => !child.disabled);\n };\n\n private getIndexOfEnabledTab = (allTabsIndex: number) => {\n return this.enabledTabs.findIndex(\n (tab) => tab.tabId === this.tabs[allTabsIndex].tabId\n );\n };\n\n // Sets focus on tab and selects it\n private keyboardSelectTab = (enabledTabIndex: number) => {\n const newIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n );\n this.enabledTabs[enabledTabIndex].focus();\n if (!this.controlledMode) {\n this.selectedTab = newIndex;\n } else {\n this.tabSelect.emit({ tabIndex: newIndex });\n }\n };\n\n // Sets focus on tab without selecting it (for manual activation)\n private keyboardFocusTab = (enabledTabIndex: number) => {\n const newIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n );\n this.enabledTabs[enabledTabIndex].focus();\n this.focusedTabIndex = newIndex;\n };\n\n private handleKeyBoardNavAutomatic = (event: KeyboardEvent) => {\n const key = event.key;\n const enabledTabIndex = this.getIndexOfEnabledTab(this.selectedTab);\n let preventDefault = true;\n switch (key) {\n case \"Home\":\n this.keyboardSelectTab(0);\n break;\n case \"End\":\n this.keyboardSelectTab(this.enabledTabs.length - 1);\n break;\n case \"ArrowRight\":\n if (enabledTabIndex < this.enabledTabs.length - 1) {\n this.keyboardSelectTab(enabledTabIndex + 1);\n } else {\n this.keyboardSelectTab(0);\n }\n break;\n case \"ArrowLeft\":\n if (enabledTabIndex > 0) {\n this.keyboardSelectTab(enabledTabIndex - 1);\n } else {\n this.keyboardSelectTab(this.enabledTabs.length - 1);\n }\n break;\n default:\n preventDefault = false;\n }\n if (preventDefault) event.preventDefault();\n };\n\n private handleKeyBoardNavManual = (event: KeyboardEvent) => {\n const key = event.key;\n const enabledTabIndex = this.getIndexOfEnabledTab(this.focusedTabIndex);\n let preventDefault = true;\n switch (key) {\n case \"Home\":\n this.keyboardFocusTab(0);\n break;\n case \"End\":\n this.keyboardFocusTab(this.enabledTabs.length - 1);\n break;\n case \"ArrowRight\":\n if (enabledTabIndex < this.enabledTabs.length - 1) {\n this.keyboardFocusTab(enabledTabIndex + 1);\n } else {\n this.keyboardFocusTab(0);\n }\n break;\n case \"ArrowLeft\":\n if (enabledTabIndex > 0) {\n this.keyboardFocusTab(enabledTabIndex - 1);\n } else {\n this.keyboardFocusTab(this.enabledTabs.length - 1);\n }\n break;\n case \"Enter\":\n this.keyboardSelectTab(this.focusedTabIndex);\n break;\n case \" \":\n this.keyboardSelectTab(this.focusedTabIndex);\n break;\n default:\n preventDefault = false;\n }\n if (preventDefault) event.preventDefault();\n };\n\n componentDidLoad(): void {\n this.setControlledMode();\n this.getChildren();\n this.linkTabs();\n this.attatchEventListeners();\n this.setInitialTab();\n this.configureTabs();\n }\n\n componentWillUpdate(): void {\n this.configureTabs();\n }\n\n disconnectedCallback(): void {\n if (this.activationType === \"manual\") {\n this.tabGroup.removeEventListener(\"keydown\", (event) =>\n this.handleKeyBoardNavManual(event)\n );\n } else {\n this.tabGroup.removeEventListener(\"keydown\", (event) =>\n this.handleKeyBoardNavAutomatic(event)\n );\n }\n }\n\n render() {\n return <slot></slot>;\n }\n}\n"]}
1	+ {"version":3,"file":"ic-tab-context.js","sourceRoot":"","sources":["../../../src/components/ic-tab-context/ic-tab-context.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Prop,\n State,\n h,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcActivationTypes,\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nimport {\n IcTabClickEventDetail,\n IcTabSelectEventDetail,\n} from \"../ic-tab/ic-tab.types\";\n\n@Component({\n tag: \"ic-tab-context\",\n})\nexport class TabContext {\n @Element() host: HTMLIcTabContextElement;\n\n /*\n The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.\n /\n @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n /\n The selected tab to be controlled by the user. Must be used alongside the tabSelect event to manage tab selection.\n /\n @Prop() selectedTabIndex?: number;\n\n /\n The appearance of the tab context, e.g dark, or light.\n /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n @State() selectedTab: number \| null;\n\n @Watch(\"selectedTabIndex\")\n updateSelectedTab(newValue: number): void {\n this.selectedTab = newValue;\n }\n\n /\n Emitted when a user selects a tab.\n */\n @Event() tabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n @Listen(\"tabClick\")\n tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n if (\n this.selectedTabIndex === undefined &&\n event.detail.contextId === this.contextId\n ) {\n this.selectedTab = event.detail.position;\n }\n this.tabSelect.emit({\n tabIndex: event.detail.position,\n });\n }\n\n private controlledMode: boolean;\n private tabs: HTMLIcTabElement[];\n private enabledTabs: HTMLIcTabElement[];\n private tabPanels: HTMLIcTabPanelElement[];\n private tabGroup: HTMLIcTabGroupElement;\n private focusedTabIndex: number;\n\n // Sets attributes to link tabs and tabpanels\n private linkTabs = () => {\n this.tabs.forEach((tab, index) => {\n const tabId = `ic-tab-${index}-context-${this.contextId}`;\n const tabPanelId = `ic-tab-panel-${index}-context-${this.contextId}`;\n const shared = `ic-tab--${index}-context-${this.contextId}`;\n tab.setAttribute(\"id\", tabId);\n tab.tabId = shared;\n tab.tabPosition = index;\n tab.setAttribute(\"aria-controls\", tabPanelId);\n tab.setAttribute(\"context-id\", this.contextId);\n this.tabPanels[index].setAttribute(\"id\", tabPanelId);\n this.tabPanels[index].panelId = shared;\n this.tabPanels[index].tabPosition = index;\n this.tabPanels[index].setAttribute(\"aria-labelledby\", tabId);\n\n if (this.appearance === IcThemeForegroundEnum.Light) {\n tab.appearance = this.appearance;\n this.tabPanels[index].appearance = this.appearance;\n }\n });\n\n if (this.appearance === IcThemeForegroundEnum.Light) {\n this.tabGroup.appearance = this.appearance;\n }\n };\n\n // Gets tabs and tabpanels with the same context ID\n private getChildren = (): void => {\n this.tabGroup = Array.from(this.host.querySelectorAll(\"ic-tab-group\")).find(\n (tabGroup) => tabGroup.contextId === this.contextId\n );\n this.tabs = Array.from(this.tabGroup.querySelectorAll(\"ic-tab\")).filter(\n (tab) => tab.contextId === this.contextId\n );\n this.enabledTabs = this.getEnabledTabs();\n this.tabPanels = Array.from(this.host.querySelectorAll(\"ic-tab-panel\"));\n };\n\n // Determines how keyboard navigation is to be handled based on the activation type\n private attatchEventListeners = (): void => {\n if (this.activationType === \"automatic\") {\n this.tabGroup.addEventListener(\"keydown\", (event) => {\n this.handleKeyBoardNavAutomatic(event);\n });\n } else {\n this.tabGroup.addEventListener(\"keydown\", (event) => {\n this.handleKeyBoardNavManual(event);\n });\n }\n };\n\n // Determines whether the selected tab is being controlled within the component\n // or by the user (via selectedTabIndex and onTabSelect)\n private setControlledMode = (): void => {\n if (this.selectedTabIndex !== undefined) {\n this.controlledMode = true;\n this.selectedTab = this.selectedTabIndex;\n }\n };\n\n // Sets the tab that is selected on initial render\n private setInitialTab = (): void => {\n if (this.controlledMode) {\n this.selectedTab = this.selectedTabIndex;\n this.focusedTabIndex = this.selectedTabIndex;\n } else {\n const firstEnabledTabIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[0].tabId\n );\n this.selectedTab = firstEnabledTabIndex;\n this.focusedTabIndex = firstEnabledTabIndex;\n }\n };\n\n // Passes the selected tab to the tab and tab panel components\n private configureTabs = () => {\n this.enabledTabs.forEach((tab) => {\n tab.selected = tab.tabPosition === this.selectedTab;\n });\n this.tabPanels.forEach((tabPanel) => {\n tabPanel.selectedTab = this.tabs[this.selectedTab].tabId;\n });\n };\n\n private getEnabledTabs = () => {\n return Array.from(this.tabs).filter((child) => !child.disabled);\n };\n\n private getIndexOfEnabledTab = (allTabsIndex: number) => {\n return this.enabledTabs.findIndex(\n (tab) => tab.tabId === this.tabs[allTabsIndex].tabId\n );\n };\n\n // Sets focus on tab and selects it\n private keyboardSelectTab = (enabledTabIndex: number) => {\n const newIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n );\n this.enabledTabs[enabledTabIndex].focus();\n if (!this.controlledMode) {\n this.selectedTab = newIndex;\n } else {\n this.tabSelect.emit({ tabIndex: newIndex });\n }\n };\n\n // Sets focus on tab without selecting it (for manual activation)\n private keyboardFocusTab = (enabledTabIndex: number) => {\n const newIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n );\n this.enabledTabs[enabledTabIndex].focus();\n this.focusedTabIndex = newIndex;\n };\n\n private handleKeyBoardNavAutomatic = (event: KeyboardEvent) => {\n const key = event.key;\n const enabledTabIndex = this.getIndexOfEnabledTab(this.selectedTab);\n let preventDefault = true;\n switch (key) {\n case \"Home\":\n this.keyboardSelectTab(0);\n break;\n case \"End\":\n this.keyboardSelectTab(this.enabledTabs.length - 1);\n break;\n case \"ArrowRight\":\n if (enabledTabIndex < this.enabledTabs.length - 1) {\n this.keyboardSelectTab(enabledTabIndex + 1);\n } else {\n this.keyboardSelectTab(0);\n }\n break;\n case \"ArrowLeft\":\n if (enabledTabIndex > 0) {\n this.keyboardSelectTab(enabledTabIndex - 1);\n } else {\n this.keyboardSelectTab(this.enabledTabs.length - 1);\n }\n break;\n default:\n preventDefault = false;\n }\n if (preventDefault) event.preventDefault();\n };\n\n private handleKeyBoardNavManual = (event: KeyboardEvent) => {\n const key = event.key;\n const enabledTabIndex = this.getIndexOfEnabledTab(this.focusedTabIndex);\n let preventDefault = true;\n switch (key) {\n case \"Home\":\n this.keyboardFocusTab(0);\n break;\n case \"End\":\n this.keyboardFocusTab(this.enabledTabs.length - 1);\n break;\n case \"ArrowRight\":\n if (enabledTabIndex < this.enabledTabs.length - 1) {\n this.keyboardFocusTab(enabledTabIndex + 1);\n } else {\n this.keyboardFocusTab(0);\n }\n break;\n case \"ArrowLeft\":\n if (enabledTabIndex > 0) {\n this.keyboardFocusTab(enabledTabIndex - 1);\n } else {\n this.keyboardFocusTab(this.enabledTabs.length - 1);\n }\n break;\n case \"Enter\":\n this.keyboardSelectTab(this.focusedTabIndex);\n break;\n case \" \":\n this.keyboardSelectTab(this.focusedTabIndex);\n break;\n default:\n preventDefault = false;\n }\n if (preventDefault) event.preventDefault();\n };\n\n componentDidLoad(): void {\n this.setControlledMode();\n this.getChildren();\n this.linkTabs();\n this.attatchEventListeners();\n this.setInitialTab();\n this.configureTabs();\n }\n\n componentWillUpdate(): void {\n this.configureTabs();\n }\n\n disconnectedCallback(): void {\n if (this.activationType === \"manual\") {\n this.tabGroup.removeEventListener(\"keydown\", (event) =>\n this.handleKeyBoardNavManual(event)\n );\n } else {\n this.tabGroup.removeEventListener(\"keydown\", (event) =>\n this.handleKeyBoardNavAutomatic(event)\n );\n }\n }\n\n render() {\n return <slot></slot>;\n }\n}\n"]}

package/dist/collection/components/ic-tab-group/ic-tab-group.js CHANGED Viewed

@@ -148,7 +148,7 @@ export class TabGroup {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel."
+          "text": "The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel."
         },
         "attribute": "context-id",
         "reflect": true,
@@ -166,7 +166,7 @@ export class TabGroup {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Use when tabs and tab panels are to be positioned separately."
+          "text": "If `true`, the tabs and tab panels will be positioned separately."
         },
         "attribute": "inline",
         "reflect": true,
@@ -184,7 +184,7 @@ export class TabGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide a label to describe the purpose of the set of tabs to screen reader users."
+          "text": "The label to describe the purpose of the set of tabs to screen reader users."
         },
         "attribute": "label",
         "reflect": false
@@ -207,7 +207,7 @@ export class TabGroup {
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Determines whether the light or dark variant of the tabs should be displayed."
+              "text": "The appearance of the tab group, e.g dark, or light."
             }],
           "text": ""
         },

package/dist/collection/components/ic-tab-group/ic-tab-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-tab-group.js","sourceRoot":"","sources":["../../../src/components/ic-tab-group/ic-tab-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Method,\n Listen,\n} from \"@stencil/core\";\n\nimport LeftArrow from \"./assets/left-arrow.svg\";\nimport RightArrow from \"./assets/right-arrow.svg\";\n\nimport {\n checkResizeObserver,\n elementOverflowsX,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTabClickEventDetail } from \"../ic-tab/ic-tab.types\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nconst SCROLL_DELAY_MS = 200;\n\n@Component({\n tag: \"ic-tab-group\",\n styleUrl: \"ic-tab-group.css\",\n shadow: true,\n})\nexport class TabGroup {\n @Element() host: HTMLIcTabGroupElement;\n\n /*\n Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n Use when tabs and tab panels are to be positioned separately.\n /\n @Prop({ reflect: true }) inline?: boolean = false;\n\n /\n Provide a label to describe the purpose of the set of tabs to screen reader users.\n /\n @Prop() label!: string;\n\n /* @internal Determines whether the light or dark variant of the tabs should be displayed. /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n @State() firstTabVisible: boolean = true;\n @State() lastTabVisible: boolean = false;\n @State() tabOverflow: boolean = false;\n\n private tabs: HTMLIcTabElement[];\n private tabOffsets: number[];\n private tabGroupEl: HTMLElement;\n private splitterEl: HTMLElement;\n private resizeObserver: ResizeObserver;\n private isScrolling: number;\n private scrollDelay: number;\n private buttonStateSet: boolean = false;\n\n /\n @internal if tab side scrolling enabled, scrolls the specified tab into view\n */\n @Method()\n async scrollTabIntoView(tabNumber: number): Promise<void> {\n this.firstTabVisible = tabNumber <= 0;\n const newScrollPos = tabNumber <= 0 ? 0 : this.tabOffsets[tabNumber - 1];\n this.lastTabVisible =\n this.tabGroupEl.offsetWidth + newScrollPos >= this.tabGroupEl.scrollWidth;\n this.buttonStateSet = true;\n this.tabGroupEl.scrollLeft = newScrollPos;\n }\n\n @Listen(\"tabFocus\")\n tabFocusHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n if (this.tabOverflow) {\n this.scrollTabIntoView(event.detail.position);\n }\n }\n\n private resizeObserverCallback = () => {\n if (this.tabGroupEl === null \|\| this.tabGroupEl === undefined) {\n this.tabGroupEl = this.host.shadowRoot.querySelector(\".tabs-container\");\n }\n this.tabOverflow = elementOverflowsX(this.tabGroupEl);\n if (this.tabOverflow) {\n this.lastTabVisible =\n this.tabGroupEl.offsetWidth + this.tabGroupEl.scrollLeft >=\n this.tabGroupEl.scrollWidth;\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.splitterEl);\n };\n\n private scrollLeft = () => {\n this.scrollTabIntoView(this.getCurrentLeftTab() - 1);\n };\n\n private scrollRight = () => {\n this.scrollTabIntoView(this.getCurrentLeftTab() + 1);\n };\n\n private longScrollRight = () => {\n this.scrollRight();\n this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n };\n\n private longScrollLeft = () => {\n this.scrollLeft();\n this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n };\n\n private leftArrowMouseDownHandler = () => {\n this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n };\n\n private rightArrowMouseDownHandler = () => {\n this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n };\n\n private arrowMouseUpHandler = () => {\n window.clearTimeout(this.scrollDelay);\n };\n\n private getCurrentLeftTab = (): number => {\n const index = this.tabOffsets.findIndex(\n (el) => el > this.tabGroupEl.scrollLeft\n );\n return index < 0 ? 0 : index;\n };\n\n private scrollHandler = () => {\n window.clearTimeout(this.isScrolling);\n // Set a timeout to run after scrolling ends\n this.isScrolling = window.setTimeout(this.scrollStopped, 50);\n };\n\n private scrollStopped = () => {\n // if scrollTabIntoView has been called, the button states will already be set\n // can't just handle it here as it causes strange jumping behaviour in positioning\n if (this.buttonStateSet === false) {\n this.firstTabVisible = this.tabGroupEl.scrollLeft === 0;\n this.lastTabVisible =\n this.tabGroupEl.offsetWidth + this.tabGroupEl.scrollLeft >=\n this.tabGroupEl.scrollWidth;\n }\n this.buttonStateSet = false;\n };\n\n componentDidLoad(): void {\n this.tabs = Array.from(this.host.querySelectorAll(\"ic-tab\"));\n let runningTotal = 0;\n this.tabOffsets = this.tabs.map((tab) => {\n runningTotal += tab.offsetWidth;\n return runningTotal;\n });\n checkResizeObserver(this.runResizeObserver);\n\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Tab List\"\n );\n }\n\n disconnectedCallback(): void {\n this.resizeObserver.disconnect();\n }\n\n render() {\n const {\n inline,\n appearance,\n label,\n firstTabVisible,\n lastTabVisible,\n tabOverflow,\n } = this;\n\n return (\n <Host\n role=\"tablist\"\n aria-label={label}\n class={{\n [\"light\"]: appearance === IcThemeForegroundEnum.Light,\n [\"ic-tab-group-not-inline\"]: !inline,\n }}\n >\n <div class=\"ic-tab-group-container\">\n {this.tabOverflow && (\n <div\n aria-hidden=\"true\"\n id=\"scroll-container-left\"\n class={{\n [\"scroll-container\"]: true,\n [\"hidden\"]: !tabOverflow,\n [\"disabled\"]: firstTabVisible,\n }}\n >\n <ic-tooltip\n placement=\"bottom-start\"\n label=\"Scroll left\"\n target=\"left-arrow\"\n >\n <span\n id=\"left-arrow\"\n class=\"scroll-arrow\"\n innerHTML={LeftArrow}\n onClick={this.scrollLeft}\n onMouseDown={this.leftArrowMouseDownHandler}\n onMouseUp={this.arrowMouseUpHandler}\n ></span>\n </ic-tooltip>\n <span class=\"scroll-splitter-left\"></span>\n </div>\n )}\n <div\n class=\"tabs-container\"\n ref={(el) => (this.tabGroupEl = el)}\n onScroll={this.scrollHandler}\n >\n <slot></slot>\n </div>\n {this.tabOverflow && (\n <div\n aria-hidden=\"true\"\n id=\"scroll-container-right\"\n class={{\n [\"scroll-container\"]: true,\n [\"hidden\"]: !tabOverflow,\n [\"disabled\"]: lastTabVisible,\n }}\n >\n <span class=\"scroll-splitter-right\"></span>\n <ic-tooltip\n placement=\"bottom-start\"\n label=\"Scroll right\"\n target=\"right-arrow\"\n >\n <span\n id=\"right-arrow\"\n class=\"scroll-arrow\"\n innerHTML={RightArrow}\n onClick={this.scrollRight}\n onMouseDown={this.rightArrowMouseDownHandler}\n onMouseUp={this.arrowMouseUpHandler}\n ></span>\n </ic-tooltip>\n </div>\n )}\n </div>\n\n <div\n aria-hidden=\"true\"\n class={{\n [\"ic-tab-splitter\"]: true,\n [\"hidden\"]: inline,\n }}\n ref={(el) => (this.splitterEl = el)}\n ></div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-tab-group.js","sourceRoot":"","sources":["../../../src/components/ic-tab-group/ic-tab-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Method,\n Listen,\n} from \"@stencil/core\";\n\nimport LeftArrow from \"./assets/left-arrow.svg\";\nimport RightArrow from \"./assets/right-arrow.svg\";\n\nimport {\n checkResizeObserver,\n elementOverflowsX,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTabClickEventDetail } from \"../ic-tab/ic-tab.types\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nconst SCROLL_DELAY_MS = 200;\n\n@Component({\n tag: \"ic-tab-group\",\n styleUrl: \"ic-tab-group.css\",\n shadow: true,\n})\nexport class TabGroup {\n @Element() host: HTMLIcTabGroupElement;\n\n /*\n The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n If `true`, the tabs and tab panels will be positioned separately.\n /\n @Prop({ reflect: true }) inline?: boolean = false;\n\n /\n The label to describe the purpose of the set of tabs to screen reader users.\n /\n @Prop() label!: string;\n\n /* @internal The appearance of the tab group, e.g dark, or light. /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n @State() firstTabVisible: boolean = true;\n @State() lastTabVisible: boolean = false;\n @State() tabOverflow: boolean = false;\n\n private tabs: HTMLIcTabElement[];\n private tabOffsets: number[];\n private tabGroupEl: HTMLElement;\n private splitterEl: HTMLElement;\n private resizeObserver: ResizeObserver;\n private isScrolling: number;\n private scrollDelay: number;\n private buttonStateSet: boolean = false;\n\n /\n @internal if tab side scrolling enabled, scrolls the specified tab into view\n */\n @Method()\n async scrollTabIntoView(tabNumber: number): Promise<void> {\n this.firstTabVisible = tabNumber <= 0;\n const newScrollPos = tabNumber <= 0 ? 0 : this.tabOffsets[tabNumber - 1];\n this.lastTabVisible =\n this.tabGroupEl.offsetWidth + newScrollPos >= this.tabGroupEl.scrollWidth;\n this.buttonStateSet = true;\n this.tabGroupEl.scrollLeft = newScrollPos;\n }\n\n @Listen(\"tabFocus\")\n tabFocusHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n if (this.tabOverflow) {\n this.scrollTabIntoView(event.detail.position);\n }\n }\n\n private resizeObserverCallback = () => {\n if (this.tabGroupEl === null \|\| this.tabGroupEl === undefined) {\n this.tabGroupEl = this.host.shadowRoot.querySelector(\".tabs-container\");\n }\n this.tabOverflow = elementOverflowsX(this.tabGroupEl);\n if (this.tabOverflow) {\n this.lastTabVisible =\n this.tabGroupEl.offsetWidth + this.tabGroupEl.scrollLeft >=\n this.tabGroupEl.scrollWidth;\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.splitterEl);\n };\n\n private scrollLeft = () => {\n this.scrollTabIntoView(this.getCurrentLeftTab() - 1);\n };\n\n private scrollRight = () => {\n this.scrollTabIntoView(this.getCurrentLeftTab() + 1);\n };\n\n private longScrollRight = () => {\n this.scrollRight();\n this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n };\n\n private longScrollLeft = () => {\n this.scrollLeft();\n this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n };\n\n private leftArrowMouseDownHandler = () => {\n this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n };\n\n private rightArrowMouseDownHandler = () => {\n this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n };\n\n private arrowMouseUpHandler = () => {\n window.clearTimeout(this.scrollDelay);\n };\n\n private getCurrentLeftTab = (): number => {\n const index = this.tabOffsets.findIndex(\n (el) => el > this.tabGroupEl.scrollLeft\n );\n return index < 0 ? 0 : index;\n };\n\n private scrollHandler = () => {\n window.clearTimeout(this.isScrolling);\n // Set a timeout to run after scrolling ends\n this.isScrolling = window.setTimeout(this.scrollStopped, 50);\n };\n\n private scrollStopped = () => {\n // if scrollTabIntoView has been called, the button states will already be set\n // can't just handle it here as it causes strange jumping behaviour in positioning\n if (this.buttonStateSet === false) {\n this.firstTabVisible = this.tabGroupEl.scrollLeft === 0;\n this.lastTabVisible =\n this.tabGroupEl.offsetWidth + this.tabGroupEl.scrollLeft >=\n this.tabGroupEl.scrollWidth;\n }\n this.buttonStateSet = false;\n };\n\n componentDidLoad(): void {\n this.tabs = Array.from(this.host.querySelectorAll(\"ic-tab\"));\n let runningTotal = 0;\n this.tabOffsets = this.tabs.map((tab) => {\n runningTotal += tab.offsetWidth;\n return runningTotal;\n });\n checkResizeObserver(this.runResizeObserver);\n\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Tab List\"\n );\n }\n\n disconnectedCallback(): void {\n this.resizeObserver.disconnect();\n }\n\n render() {\n const {\n inline,\n appearance,\n label,\n firstTabVisible,\n lastTabVisible,\n tabOverflow,\n } = this;\n\n return (\n <Host\n role=\"tablist\"\n aria-label={label}\n class={{\n [\"light\"]: appearance === IcThemeForegroundEnum.Light,\n [\"ic-tab-group-not-inline\"]: !inline,\n }}\n >\n <div class=\"ic-tab-group-container\">\n {this.tabOverflow && (\n <div\n aria-hidden=\"true\"\n id=\"scroll-container-left\"\n class={{\n [\"scroll-container\"]: true,\n [\"hidden\"]: !tabOverflow,\n [\"disabled\"]: firstTabVisible,\n }}\n >\n <ic-tooltip\n placement=\"bottom-start\"\n label=\"Scroll left\"\n target=\"left-arrow\"\n >\n <span\n id=\"left-arrow\"\n class=\"scroll-arrow\"\n innerHTML={LeftArrow}\n onClick={this.scrollLeft}\n onMouseDown={this.leftArrowMouseDownHandler}\n onMouseUp={this.arrowMouseUpHandler}\n ></span>\n </ic-tooltip>\n <span class=\"scroll-splitter-left\"></span>\n </div>\n )}\n <div\n class=\"tabs-container\"\n ref={(el) => (this.tabGroupEl = el)}\n onScroll={this.scrollHandler}\n >\n <slot></slot>\n </div>\n {this.tabOverflow && (\n <div\n aria-hidden=\"true\"\n id=\"scroll-container-right\"\n class={{\n [\"scroll-container\"]: true,\n [\"hidden\"]: !tabOverflow,\n [\"disabled\"]: lastTabVisible,\n }}\n >\n <span class=\"scroll-splitter-right\"></span>\n <ic-tooltip\n placement=\"bottom-start\"\n label=\"Scroll right\"\n target=\"right-arrow\"\n >\n <span\n id=\"right-arrow\"\n class=\"scroll-arrow\"\n innerHTML={RightArrow}\n onClick={this.scrollRight}\n onMouseDown={this.rightArrowMouseDownHandler}\n onMouseUp={this.arrowMouseUpHandler}\n ></span>\n </ic-tooltip>\n </div>\n )}\n </div>\n\n <div\n aria-hidden=\"true\"\n class={{\n [\"ic-tab-splitter\"]: true,\n [\"hidden\"]: inline,\n }}\n ref={(el) => (this.splitterEl = el)}\n ></div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-tab-panel/ic-tab-panel.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import { Host, h } from "@stencil/core";
-import { onComponentRequiredPropUndefined } from "../../utils/helpers";
 import { IcThemeForegroundEnum, } from "../../utils/types";
 export class TabPanel {
   constructor() {
@@ -9,9 +8,6 @@ export class TabPanel {
     this.selectedTab = undefined;
     this.appearance = "dark";
   }
-  componentDidLoad() {
-    onComponentRequiredPropUndefined([{ prop: this.tabPosition, propName: "tab-position" }], "Tab Panel");
-  }
   render() {
     const { panelId, selectedTab, appearance } = this;
     return (h(Host, { class: {
@@ -46,7 +42,7 @@ export class TabPanel {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel."
+          "text": "The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel."
         },
         "attribute": "context-id",
         "reflect": true,
@@ -60,8 +56,8 @@ export class TabPanel {
           "resolved": "number",
           "references": {}
         },
-        "required": true,
-        "optional": false,
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [{
               "name": "internal",
@@ -130,7 +126,7 @@ export class TabPanel {
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Determines whether the light or dark variant of the tabs should be displayed."
+              "text": "The appearance of the tabs, e.g dark, or light."
             }],
           "text": ""
         },

package/dist/collection/components/ic-tab-panel/ic-tab-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-tab-panel.js","sourceRoot":"","sources":["../../../src/components/ic-tab-panel/ic-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,~~EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,~~EACL,qBAAqB,GAEtB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,OAAO,QAAQ;;qBAM2B,SAAS;;;;sBAYL,MAAM;;EAExD,~~gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC,EACtD,WAAW,CACZ,CAAC;EACJ,CAAC;EAED,~~MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAClD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,oBAAoB,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;OACnE,EACD,IAAI,EAAC,UAAU,EACf,MAAM,EACJ,OAAO,KAAK,SAAS,IAAI,WAAW,KAAK,SAAS;QAChD,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,WAAW,CAAC;QAC5B,CAAC,CAAC,IAAI;MAGV;QACE,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport { ~~onComponentRequiredPropUndefined } from~~ \~~"../../utils/helpers\";\nimport {\~~n IcThemeForegroundEnum,\n IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n tag: \"ic-tab-panel\",\n styleUrl: \"ic-tab-panel.css\",\n shadow: true,\n})\nexport class TabPanel {\n @Element() host: HTMLIcTabPanelElement;\n\n /*\n ~~Provide~~ a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /* @internal The position of the tab panel inside the tabs array in context. /\n @Prop({ reflect: true }) tabPosition!: number;\n\n /* @internal The shared ID that links the panel and tab. /\n @Prop({ reflect: true }) panelId?: string;\n\n /* @internal The shared ID of the currently selected tab. /\n @Prop() selectedTab?: string;\n\n /* @internal ~~Determines~~ ~~whether~~ ~~the light or dark variant~~ of the tabs ~~should~~ be ~~displayed~~. */\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n ~~componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.tabPosition, propName: \"tab-position\" }],\n \"Tab Panel\"\n );\n }\n\n~~ render() {\n const { panelId, selectedTab, appearance } = this;\n return (\n <Host\n class={{\n [\"ic-tab-panel-light\"]: appearance === IcThemeForegroundEnum.Light,\n }}\n role=\"tabpanel\"\n hidden={\n panelId !== undefined && selectedTab !== undefined\n ? !(panelId === selectedTab)\n : true\n }\n >\n <div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-tab-panel.js","sourceRoot":"","sources":["../../../src/components/ic-tab-panel/ic-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EACL,qBAAqB,GAEtB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,OAAO,QAAQ;;qBAM2B,SAAS;;;;sBAYL,MAAM;;EAExD,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAClD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,oBAAoB,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;OACnE,EACD,IAAI,EAAC,UAAU,EACf,MAAM,EACJ,OAAO,KAAK,SAAS,IAAI,WAAW,KAAK,SAAS;QAChD,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,WAAW,CAAC;QAC5B,CAAC,CAAC,IAAI;MAGV;QACE,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport {\n IcThemeForegroundEnum,\n IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n tag: \"ic-tab-panel\",\n styleUrl: \"ic-tab-panel.css\",\n shadow: true,\n})\nexport class TabPanel {\n @Element() host: HTMLIcTabPanelElement;\n\n /*\n The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /* @internal The position of the tab panel inside the tabs array in context. /\n @Prop({ reflect: true }) tabPosition?: number;\n\n /* @internal The shared ID that links the panel and tab. /\n @Prop({ reflect: true }) panelId?: string;\n\n /* @internal The shared ID of the currently selected tab. /\n @Prop() selectedTab?: string;\n\n /* @internal The appearance of the tabs, e.g dark, or light. */\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n render() {\n const { panelId, selectedTab, appearance } = this;\n return (\n <Host\n class={{\n [\"ic-tab-panel-light\"]: appearance === IcThemeForegroundEnum.Light,\n }}\n role=\"tabpanel\"\n hidden={\n panelId !== undefined && selectedTab !== undefined\n ? !(panelId === selectedTab)\n : true\n }\n >\n <div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-text-field/ic-text-field.css CHANGED Viewed

@@ -554,3 +554,14 @@ input[type="search"].truncate-value {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+@media (forced-colors: active) {
+  input.readonly,
+  textarea.readonly {
+    color: canvastext;
+  }
+  .has-value ::slotted([slot="icon"]) {
+    fill: currentcolor;
+  }
+}