npm - @govtechsg/sgds-web-component - Versions diffs - 3.15.1-rc.2 → 3.15.1-rc.3 - Mend

@govtechsg/sgds-web-component 3.15.1-rc.2 → 3.15.1-rc.3

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 (56) hide show

package/react/components/Stepper/sgds-stepper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-stepper.js","sources":["../../../../src/components/Stepper/sgds-stepper.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nexport interface IStepMetaData {\n component: unknown;\n stepHeader: string;\n iconName?: string;\n}\n/*\n @summary Steppers are used to inform users which step they are at in a form or a process\n \n @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n \n /\nexport class SgdsStepper extends SgdsElement {\n static styles = [...SgdsElement.styles, stepperStyle];\n /** @internal /\n static dependencies = { \"sgds-icon\": SgdsIcon };\n /* The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string`, `component:unknown`, `iconName:string`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\n * It is required to populate this array to properly render the stepper. By default, stepper markers will render numbers. For icon stepper markers, pass the name of sgds icon via `iconName` key. `iconName` is optional.\n /\n @property({ type: Array })\n steps: IStepMetaData[] = [];\n\n /* The current state of active step. Defaults to 0 /\n @property({ type: Number, reflect: true })\n activeStep = 0;\n\n /* The orientation of stepper. By default, the stepper is of horizontal orientation /\n @property({ type: String, reflect: true }) orientation: StepperOrientation = \"horizontal\";\n\n /* When true, the stepper's steps will be clickable /\n @property({ type: Boolean, reflect: true }) clickable = false;\n\n /* @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. /\n @defaultValue(\"activeStep\")\n defaultActiveStep = 0;\n\n /* By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter/\n public getComponent(step: number = this.activeStep) {\n return this.steps[step].component;\n }\n /* Moves the active step forward one step /\n public nextStep() {\n this.emit(\"sgds-next-step\");\n if (this.activeStep < this.steps.length - 1) {\n this.activeStep++;\n }\n }\n\n /* Moves the active step back one step /\n public previousStep() {\n this.emit(\"sgds-previous-step\");\n\n if (this.activeStep > 0) {\n this.activeStep--;\n }\n }\n\n /* Changes the active step to the last step /\n public lastStep() {\n this.emit(\"sgds-last-step\");\n if (this.activeStep !== this.steps.length - 1) {\n this.activeStep = this.steps.length - 1;\n }\n }\n\n /* Changes active step to the first step /\n public firstStep() {\n this.emit(\"sgds-first-step\");\n if (this.activeStep > 0) {\n this.activeStep = 0;\n }\n }\n\n /* Resets the Stepper to its initial active step state /\n public reset() {\n this.emit(\"sgds-reset\");\n this.activeStep = this.defaultActiveStep;\n }\n\n /@internal /\n _onStepperItemClick(index: number) {\n //emit an event before moving to next step\n if (this.activeStep > index) {\n this.activeStep = index;\n }\n }\n\n /*@internal /\n @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n _handleActiveStepChange() {\n this.emit(\"sgds-arrived\");\n }\n\n /*@internal /\n _handleKeyDown(event: KeyboardEvent, index: number) {\n if (event.key === \"Enter\") {\n this._onStepperItemClick(index);\n }\n }\n\n render() {\n return html`\n <div\n class=\"stepper ${classMap({\n [`${this.orientation}`]: this.orientation,\n clickable: this.clickable\n })}\"\n >\n ${this.steps.map(({ stepHeader: step, iconName }, index) => {\n return html`\n <div class=\"stepper-item-container\">\n <div\n class=\"stepper-item ${classMap({\n \"is-active\": this.activeStep === index,\n \"is-completed\": this.activeStep > index,\n \"is-clickable\": this.clickable && this.activeStep > index\n })}\"\n tabindex=${this.clickable && this.activeStep > index ? \"0\" : \"-1\"}\n aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n @click=\"${this.clickable ? () => this._onStepperItemClick(index) : null}\"\n @keydown=${this.clickable ? (e: KeyboardEvent) => this._handleKeyDown(e, index) : null}\n >\n <div class=\"stepper-marker\">\n ${iconName ? html`<sgds-icon name=${iconName} size=\"md\"></sgds-icon>` : index + 1}\n </div>\n <div class=\"stepper-detail\">${step}</div>\n </div>\n </div>\n `;\n })}\n </div>\n `;\n }\n}\n\nexport type StepperOrientation = \"horizontal\" \| \"vertical\";\n\nexport default SgdsStepper;\n"],"names":["stepperStyle"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-stepper.js","sources":["../../../../src/components/Stepper/sgds-stepper.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { IStepMetaData } from \"./types\";\nexport type { IStepMetaData };\n/*\n @summary Steppers are used to inform users which step they are at in a form or a process\n \n @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n \n /\nexport class SgdsStepper extends SgdsElement {\n static styles = [...SgdsElement.styles, stepperStyle];\n /** @internal /\n static dependencies = { \"sgds-icon\": SgdsIcon };\n /* The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string`, `component:unknown`, `iconName:string`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\n * It is required to populate this array to properly render the stepper. By default, stepper markers will render numbers. For icon stepper markers, pass the name of sgds icon via `iconName` key. `iconName` is optional.\n /\n @property({ type: Array })\n steps: IStepMetaData[] = [];\n\n /* The current state of active step. Defaults to 0 /\n @property({ type: Number, reflect: true })\n activeStep = 0;\n\n /* The orientation of stepper. By default, the stepper is of horizontal orientation /\n @property({ type: String, reflect: true }) orientation: StepperOrientation = \"horizontal\";\n\n /* When true, the stepper's steps will be clickable /\n @property({ type: Boolean, reflect: true }) clickable = false;\n\n /* @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. /\n @defaultValue(\"activeStep\")\n defaultActiveStep = 0;\n\n /* By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter/\n public getComponent(step: number = this.activeStep) {\n return this.steps[step].component;\n }\n /* Moves the active step forward one step /\n public nextStep() {\n this.emit(\"sgds-next-step\");\n if (this.activeStep < this.steps.length - 1) {\n this.activeStep++;\n }\n }\n\n /* Moves the active step back one step /\n public previousStep() {\n this.emit(\"sgds-previous-step\");\n\n if (this.activeStep > 0) {\n this.activeStep--;\n }\n }\n\n /* Changes the active step to the last step /\n public lastStep() {\n this.emit(\"sgds-last-step\");\n if (this.activeStep !== this.steps.length - 1) {\n this.activeStep = this.steps.length - 1;\n }\n }\n\n /* Changes active step to the first step /\n public firstStep() {\n this.emit(\"sgds-first-step\");\n if (this.activeStep > 0) {\n this.activeStep = 0;\n }\n }\n\n /* Resets the Stepper to its initial active step state /\n public reset() {\n this.emit(\"sgds-reset\");\n this.activeStep = this.defaultActiveStep;\n }\n\n /@internal /\n _onStepperItemClick(index: number) {\n //emit an event before moving to next step\n if (this.activeStep > index) {\n this.activeStep = index;\n }\n }\n\n /*@internal /\n @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n _handleActiveStepChange() {\n this.emit(\"sgds-arrived\");\n }\n\n /*@internal /\n _handleKeyDown(event: KeyboardEvent, index: number) {\n if (event.key === \"Enter\") {\n this._onStepperItemClick(index);\n }\n }\n\n render() {\n return html`\n <div\n class=\"stepper ${classMap({\n [`${this.orientation}`]: this.orientation,\n clickable: this.clickable\n })}\"\n >\n ${this.steps.map(({ stepHeader: step, iconName }, index) => {\n return html`\n <div class=\"stepper-item-container\">\n <div\n class=\"stepper-item ${classMap({\n \"is-active\": this.activeStep === index,\n \"is-completed\": this.activeStep > index,\n \"is-clickable\": this.clickable && this.activeStep > index\n })}\"\n tabindex=${this.clickable && this.activeStep > index ? \"0\" : \"-1\"}\n aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n @click=\"${this.clickable ? () => this._onStepperItemClick(index) : null}\"\n @keydown=${this.clickable ? (e: KeyboardEvent) => this._handleKeyDown(e, index) : null}\n >\n <div class=\"stepper-marker\">\n ${iconName ? html`<sgds-icon name=${iconName} size=\"md\"></sgds-icon>` : index + 1}\n </div>\n <div class=\"stepper-detail\">${step}</div>\n </div>\n </div>\n `;\n })}\n </div>\n `;\n }\n}\n\nexport type StepperOrientation = \"horizontal\" \| \"vertical\";\n\nexport default SgdsStepper;\n"],"names":["stepperStyle"],"mappings":"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"}

package/react/components/Switch/sgds-switch.cjs.js CHANGED Viewed

@@ -22,6 +22,7 @@ var _switch = require('./switch.cjs.js');
  * @slot leftLabel - The label on the left side of the switch
  *
  * @event sgds-change - Emitted when the checked state changes.
+ * @eventDetail {ISgdsSwitchChangeEventDetail} sgds-change
  *
  */
 class SgdsSwitch extends sgdsElement["default"] {

package/react/components/Switch/sgds-switch.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-switch.cjs.js","sources":["../../../../src/components/Switch/sgds-switch.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport switchStyle from \"./switch.css\";\n\n/*\n @summary Switch component is used to toggle on and off or yes or no action.\n \n @slot default - The default label of switch on the right side of the switch\n * @slot leftLabel - The label on the left side of the switch\n \n @event sgds-change - Emitted when the checked state changes.\n \n /\nexport class SgdsSwitch extends SgdsElement {\n static styles = [...SgdsElement.styles, formLabelStyles, switchStyle];\n\n /** The size of the switch. By default, it is small size /\n @property({ reflect: true, type: String }) size: \"sm\" \| \"md\" \| \"lg\" = \"md\";\n\n /* When enabled, icon appears in the switch /\n @property({ reflect: true, type: Boolean }) icon = false;\n\n /* Draws the switch in a checked state. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* Disables the switch (so the user can't check / uncheck it). /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Used only for SSR to indicate the presence of the `default` slot. /\n @property({ type: Boolean }) hasDefaultSlot = false;\n\n /* Used only for SSR to indicate the presence of the `leftLabel` slot. /\n @property({ type: Boolean }) hasLeftLabelSlot = false;\n\n /* @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. /\n @defaultValue(\"checked\")\n defaultChecked = false;\n\n /@internal /\n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n /** @internal /\n private readonly hasSlotController = new HasSlotController(this, \"[default]\", \"leftLabel\");\n\n updated() {\n if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n if (!this.hasLeftLabelSlot) this.hasLeftLabelSlot = this.hasSlotController.test(\"leftLabel\");\n }\n\n /* Simulates a click on the switch. /\n public click() {\n this.input.click();\n }\n /* Sets focus on the switch. /\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* Removes focus from the switch. /\n public blur() {\n this.input.blur();\n }\n\n private _handleChange() {\n this.checked = !this.checked;\n this.emit(\"sgds-change\", { detail: { checked: this.checked } });\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n const hasModifier = event.metaKey \|\| event.ctrlKey \|\| event.shiftKey \|\| event.altKey;\n if (event.key === \"Enter\" && !hasModifier) {\n this.click();\n }\n }\n\n /* @internal For Id/For pair of the HTML form control and label. /\n private _inputId = genId(\"switch\");\n\n /* @internal */\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.input.disabled = this.disabled;\n }\n\n render() {\n const noLabel = !this.hasDefaultSlot && !this.hasLeftLabelSlot;\n\n return html`\n <div class=\"form-check\">\n <label\n for=\"${this._inputId}\"\n class=${classMap({\n \"form-check-label\": true,\n \"left-label\": true,\n \"d-none\": this.hasDefaultSlot \|\| noLabel\n })}\n >\n <slot name=\"leftLabel\"></slot>\n </label>\n <input\n class=${classMap({\n \"form-check-input\": true\n })}\n type=\"checkbox\"\n id=${this._inputId}\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-checked=${this.checked ? \"true\" : \"false\"}\n @change=${this._handleChange}\n @keydown=${this._handleKeyDown}\n />\n <label\n for=\"${this._inputId}\"\n class=${classMap({\n \"form-check-label\": true,\n \"d-none\": this.hasLeftLabelSlot \|\| noLabel\n })}\n >\n <slot></slot>\n </label>\n </div>\n `;\n }\n}\n\nexport default SgdsSwitch;\n"],"names":["SgdsElement","HasSlotController","genId","html","classMap","formLabelStyles","switchStyle","__decorate","property","defaultValue","query","watch"],"mappings":";;;;;;;;;;;;;;;;;~~AAWA;;;;;;;;AAQG~~;AACG,MAAO,UAAW,SAAQA,sBAAW,CAAA;AAA3C,IAAA,WAAA,GAAA;;;QAI6C,IAAI,CAAA,IAAA,GAAuB,IAAI,CAAC;;QAG/B,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAGb,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAGhB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGhC,IAAc,CAAA,cAAA,GAAG,KAAK,CAAC;;QAGvB,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;;QAItD,IAAc,CAAA,cAAA,GAAG,KAAK,CAAC;;QAMN,IAAiB,CAAA,iBAAA,GAAG,IAAIC,sBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;;AAkCnF,QAAA,IAAA,CAAA,QAAQ,GAAGC,qBAAK,CAAC,QAAQ,CAAC,CAAC;KAiDpC;IAjFC,OAAO,GAAA;QACL,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACzF,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAAE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC9F;;IAGM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB;;AAEM,IAAA,KAAK,CAAC,OAAsB,EAAA;AACjC,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KAC3B;;IAGM,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACnB;IAEO,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;AAC7B,QAAA,IAAI,CAAC,IAAI,~~CAAC~~,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;~~KACjE~~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"}
1	+ {"version":3,"file":"sgds-switch.cjs.js","sources":["../../../../src/components/Switch/sgds-switch.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport switchStyle from \"./switch.css\";\nimport type { ISgdsSwitchChangeEventDetail } from \"./types\";\nexport type { ISgdsSwitchChangeEventDetail };\n\n/*\n @summary Switch component is used to toggle on and off or yes or no action.\n \n @slot default - The default label of switch on the right side of the switch\n * @slot leftLabel - The label on the left side of the switch\n \n @event sgds-change - Emitted when the checked state changes.\n * @eventDetail {ISgdsSwitchChangeEventDetail} sgds-change\n \n /\nexport class SgdsSwitch extends SgdsElement {\n static styles = [...SgdsElement.styles, formLabelStyles, switchStyle];\n\n /** The size of the switch. By default, it is small size /\n @property({ reflect: true, type: String }) size: \"sm\" \| \"md\" \| \"lg\" = \"md\";\n\n /* When enabled, icon appears in the switch /\n @property({ reflect: true, type: Boolean }) icon = false;\n\n /* Draws the switch in a checked state. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* Disables the switch (so the user can't check / uncheck it). /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Used only for SSR to indicate the presence of the `default` slot. /\n @property({ type: Boolean }) hasDefaultSlot = false;\n\n /* Used only for SSR to indicate the presence of the `leftLabel` slot. /\n @property({ type: Boolean }) hasLeftLabelSlot = false;\n\n /* @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. /\n @defaultValue(\"checked\")\n defaultChecked = false;\n\n /@internal /\n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n /** @internal /\n private readonly hasSlotController = new HasSlotController(this, \"[default]\", \"leftLabel\");\n\n updated() {\n if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n if (!this.hasLeftLabelSlot) this.hasLeftLabelSlot = this.hasSlotController.test(\"leftLabel\");\n }\n\n /* Simulates a click on the switch. /\n public click() {\n this.input.click();\n }\n /* Sets focus on the switch. /\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* Removes focus from the switch. /\n public blur() {\n this.input.blur();\n }\n\n private _handleChange() {\n this.checked = !this.checked;\n this.emit<ISgdsSwitchChangeEventDetail>(\"sgds-change\", { detail: { checked: this.checked } });\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n const hasModifier = event.metaKey \|\| event.ctrlKey \|\| event.shiftKey \|\| event.altKey;\n if (event.key === \"Enter\" && !hasModifier) {\n this.click();\n }\n }\n\n /* @internal For Id/For pair of the HTML form control and label. /\n private _inputId = genId(\"switch\");\n\n /* @internal */\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.input.disabled = this.disabled;\n }\n\n render() {\n const noLabel = !this.hasDefaultSlot && !this.hasLeftLabelSlot;\n\n return html`\n <div class=\"form-check\">\n <label\n for=\"${this._inputId}\"\n class=${classMap({\n \"form-check-label\": true,\n \"left-label\": true,\n \"d-none\": this.hasDefaultSlot \|\| noLabel\n })}\n >\n <slot name=\"leftLabel\"></slot>\n </label>\n <input\n class=${classMap({\n \"form-check-input\": true\n })}\n type=\"checkbox\"\n id=${this._inputId}\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-checked=${this.checked ? \"true\" : \"false\"}\n @change=${this._handleChange}\n @keydown=${this._handleKeyDown}\n />\n <label\n for=\"${this._inputId}\"\n class=${classMap({\n \"form-check-label\": true,\n \"d-none\": this.hasLeftLabelSlot \|\| noLabel\n })}\n >\n <slot></slot>\n </label>\n </div>\n `;\n }\n}\n\nexport default SgdsSwitch;\n"],"names":["SgdsElement","HasSlotController","genId","html","classMap","formLabelStyles","switchStyle","__decorate","property","defaultValue","query","watch"],"mappings":"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"}

package/react/components/Switch/sgds-switch.js CHANGED Viewed

@@ -18,6 +18,7 @@ import css_248z$1 from './switch.js';
  * @slot leftLabel - The label on the left side of the switch
  *
  * @event sgds-change - Emitted when the checked state changes.
+ * @eventDetail {ISgdsSwitchChangeEventDetail} sgds-change
  *
  */
 class SgdsSwitch extends SgdsElement {

package/react/components/Switch/sgds-switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-switch.js","sources":["../../../../src/components/Switch/sgds-switch.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport switchStyle from \"./switch.css\";\n\n/*\n @summary Switch component is used to toggle on and off or yes or no action.\n \n @slot default - The default label of switch on the right side of the switch\n * @slot leftLabel - The label on the left side of the switch\n \n @event sgds-change - Emitted when the checked state changes.\n \n /\nexport class SgdsSwitch extends SgdsElement {\n static styles = [...SgdsElement.styles, formLabelStyles, switchStyle];\n\n /** The size of the switch. By default, it is small size /\n @property({ reflect: true, type: String }) size: \"sm\" \| \"md\" \| \"lg\" = \"md\";\n\n /* When enabled, icon appears in the switch /\n @property({ reflect: true, type: Boolean }) icon = false;\n\n /* Draws the switch in a checked state. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* Disables the switch (so the user can't check / uncheck it). /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Used only for SSR to indicate the presence of the `default` slot. /\n @property({ type: Boolean }) hasDefaultSlot = false;\n\n /* Used only for SSR to indicate the presence of the `leftLabel` slot. /\n @property({ type: Boolean }) hasLeftLabelSlot = false;\n\n /* @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. /\n @defaultValue(\"checked\")\n defaultChecked = false;\n\n /@internal /\n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n /** @internal /\n private readonly hasSlotController = new HasSlotController(this, \"[default]\", \"leftLabel\");\n\n updated() {\n if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n if (!this.hasLeftLabelSlot) this.hasLeftLabelSlot = this.hasSlotController.test(\"leftLabel\");\n }\n\n /* Simulates a click on the switch. /\n public click() {\n this.input.click();\n }\n /* Sets focus on the switch. /\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* Removes focus from the switch. /\n public blur() {\n this.input.blur();\n }\n\n private _handleChange() {\n this.checked = !this.checked;\n this.emit(\"sgds-change\", { detail: { checked: this.checked } });\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n const hasModifier = event.metaKey \|\| event.ctrlKey \|\| event.shiftKey \|\| event.altKey;\n if (event.key === \"Enter\" && !hasModifier) {\n this.click();\n }\n }\n\n /* @internal For Id/For pair of the HTML form control and label. /\n private _inputId = genId(\"switch\");\n\n /* @internal */\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.input.disabled = this.disabled;\n }\n\n render() {\n const noLabel = !this.hasDefaultSlot && !this.hasLeftLabelSlot;\n\n return html`\n <div class=\"form-check\">\n <label\n for=\"${this._inputId}\"\n class=${classMap({\n \"form-check-label\": true,\n \"left-label\": true,\n \"d-none\": this.hasDefaultSlot \|\| noLabel\n })}\n >\n <slot name=\"leftLabel\"></slot>\n </label>\n <input\n class=${classMap({\n \"form-check-input\": true\n })}\n type=\"checkbox\"\n id=${this._inputId}\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-checked=${this.checked ? \"true\" : \"false\"}\n @change=${this._handleChange}\n @keydown=${this._handleKeyDown}\n />\n <label\n for=\"${this._inputId}\"\n class=${classMap({\n \"form-check-label\": true,\n \"d-none\": this.hasLeftLabelSlot \|\| noLabel\n })}\n >\n <slot></slot>\n </label>\n </div>\n `;\n }\n}\n\nexport default SgdsSwitch;\n"],"names":["formLabelStyles","switchStyle"],"mappings":";;;;;;;;;;;;;~~AAWA;;;;;;;;AAQG~~;AACG,MAAO,UAAW,SAAQ,WAAW,CAAA;AAA3C,IAAA,WAAA,GAAA;;;QAI6C,IAAI,CAAA,IAAA,GAAuB,IAAI,CAAC;;QAG/B,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAGb,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAGhB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGhC,IAAc,CAAA,cAAA,GAAG,KAAK,CAAC;;QAGvB,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;;QAItD,IAAc,CAAA,cAAA,GAAG,KAAK,CAAC;;QAMN,IAAiB,CAAA,iBAAA,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;;AAkCnF,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;KAiDpC;IAjFC,OAAO,GAAA;QACL,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACzF,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAAE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC9F;;IAGM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB;;AAEM,IAAA,KAAK,CAAC,OAAsB,EAAA;AACjC,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KAC3B;;IAGM,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACnB;IAEO,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;AAC7B,QAAA,IAAI,CAAC,IAAI,~~CAAC~~,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;~~KACjE~~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"}
1	+ {"version":3,"file":"sgds-switch.js","sources":["../../../../src/components/Switch/sgds-switch.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport switchStyle from \"./switch.css\";\nimport type { ISgdsSwitchChangeEventDetail } from \"./types\";\nexport type { ISgdsSwitchChangeEventDetail };\n\n/*\n @summary Switch component is used to toggle on and off or yes or no action.\n \n @slot default - The default label of switch on the right side of the switch\n * @slot leftLabel - The label on the left side of the switch\n \n @event sgds-change - Emitted when the checked state changes.\n * @eventDetail {ISgdsSwitchChangeEventDetail} sgds-change\n \n /\nexport class SgdsSwitch extends SgdsElement {\n static styles = [...SgdsElement.styles, formLabelStyles, switchStyle];\n\n /** The size of the switch. By default, it is small size /\n @property({ reflect: true, type: String }) size: \"sm\" \| \"md\" \| \"lg\" = \"md\";\n\n /* When enabled, icon appears in the switch /\n @property({ reflect: true, type: Boolean }) icon = false;\n\n /* Draws the switch in a checked state. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* Disables the switch (so the user can't check / uncheck it). /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Used only for SSR to indicate the presence of the `default` slot. /\n @property({ type: Boolean }) hasDefaultSlot = false;\n\n /* Used only for SSR to indicate the presence of the `leftLabel` slot. /\n @property({ type: Boolean }) hasLeftLabelSlot = false;\n\n /* @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. /\n @defaultValue(\"checked\")\n defaultChecked = false;\n\n /@internal /\n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n /** @internal /\n private readonly hasSlotController = new HasSlotController(this, \"[default]\", \"leftLabel\");\n\n updated() {\n if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n if (!this.hasLeftLabelSlot) this.hasLeftLabelSlot = this.hasSlotController.test(\"leftLabel\");\n }\n\n /* Simulates a click on the switch. /\n public click() {\n this.input.click();\n }\n /* Sets focus on the switch. /\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* Removes focus from the switch. /\n public blur() {\n this.input.blur();\n }\n\n private _handleChange() {\n this.checked = !this.checked;\n this.emit<ISgdsSwitchChangeEventDetail>(\"sgds-change\", { detail: { checked: this.checked } });\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n const hasModifier = event.metaKey \|\| event.ctrlKey \|\| event.shiftKey \|\| event.altKey;\n if (event.key === \"Enter\" && !hasModifier) {\n this.click();\n }\n }\n\n /* @internal For Id/For pair of the HTML form control and label. /\n private _inputId = genId(\"switch\");\n\n /* @internal */\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.input.disabled = this.disabled;\n }\n\n render() {\n const noLabel = !this.hasDefaultSlot && !this.hasLeftLabelSlot;\n\n return html`\n <div class=\"form-check\">\n <label\n for=\"${this._inputId}\"\n class=${classMap({\n \"form-check-label\": true,\n \"left-label\": true,\n \"d-none\": this.hasDefaultSlot \|\| noLabel\n })}\n >\n <slot name=\"leftLabel\"></slot>\n </label>\n <input\n class=${classMap({\n \"form-check-input\": true\n })}\n type=\"checkbox\"\n id=${this._inputId}\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-checked=${this.checked ? \"true\" : \"false\"}\n @change=${this._handleChange}\n @keydown=${this._handleKeyDown}\n />\n <label\n for=\"${this._inputId}\"\n class=${classMap({\n \"form-check-label\": true,\n \"d-none\": this.hasLeftLabelSlot \|\| noLabel\n })}\n >\n <slot></slot>\n </label>\n </div>\n `;\n }\n}\n\nexport default SgdsSwitch;\n"],"names":["formLabelStyles","switchStyle"],"mappings":"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"}