@synergy-design-system/components 1.4.0 → 1.5.0

package/dist/components/radio-group/radio-group.js

@@ -1,15 +1,15 @@
 import {
   radio_group_default
-} from "../../chunks/chunk.7DUTGUSD.js";
-import "../../chunks/chunk.62GAQV3Z.js";
+} from "../../chunks/chunk.JQWJ7PHD.js";
+import "../../chunks/chunk.IYKQTZIY.js";
 import "../../chunks/chunk.4I6M5V6O.js";
 import "../../chunks/chunk.F4MRQLNL.js";
 import "../../chunks/chunk.JHXCBOUD.js";
 import "../../chunks/chunk.XGXFE6IF.js";
 import "../../chunks/chunk.AMTCNRDE.js";
 import "../../chunks/chunk.VZ7S7YYN.js";
-import "../../chunks/chunk.2Z2FGA3I.js";
-import "../../chunks/chunk.SNP6OECI.js";
+import "../../chunks/chunk.OPVDSHPD.js";
+import "../../chunks/chunk.C5W2Y6KW.js";
 import "../../chunks/chunk.4ZURABYO.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";

package/dist/components/select/select.component.d.ts

@@ -0,0 +1,180 @@
+import SynergyElement from '../../internal/synergy-element.js';
+import SynIcon from '../icon/icon.component.js';
+import SynPopup from '../popup/popup.component.js';
+import SynTag from '../tag/tag.component.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { SynergyFormControl } from '../../internal/synergy-element.js';
+import type SynOption from '../option/option.component.js';
+/**
+ * @summary Selects allow you to choose items from a menu of predefined options.
+ * @documentation https://synergy.style/components/select
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ * @dependency syn-popup
+ * @dependency syn-tag
+ *
+ * @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.
+ * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event syn-change - Emitted when the control's value changes.
+ * @event syn-clear - Emitted when the control's value is cleared.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-show - Emitted when the select's menu opens.
+ * @event syn-after-show - Emitted after the select's menu opens and all animations are complete.
+ * @event syn-hide - Emitted when the select's menu closes.
+ * @event syn-after-hide - Emitted after the select's menu closes and all animations are complete.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The select's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
+ * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
+ * @csspart listbox - The listbox container where options are slotted.
+ * @csspart tags - The container that houses option tags when `multiselect` is used.
+ * @csspart tag - The individual tags that represent each multiselect option.
+ * @csspart tag__base - The tag's base part.
+ * @csspart tag__content - The tag's content part.
+ * @csspart tag__remove-button - The tag's remove button.
+ * @csspart tag__remove-button__base - The tag's remove button base part.
+ * @csspart clear-button - The clear button.
+ * @csspart expand-icon - The container that wraps the expand icon.
+ */
+export default class SynSelect extends SynergyElement implements SynergyFormControl {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        'syn-icon': typeof SynIcon;
+        'syn-popup': typeof SynPopup;
+        'syn-tag': typeof SynTag;
+    };
+    private readonly formControlController;
+    private readonly hasSlotController;
+    private readonly localize;
+    private typeToSelectString;
+    private typeToSelectTimeout;
+    popup: SynPopup;
+    combobox: HTMLSlotElement;
+    displayInput: HTMLInputElement;
+    valueInput: HTMLInputElement;
+    listbox: HTMLSlotElement;
+    private hasFocus;
+    displayLabel: string;
+    currentOption: SynOption;
+    selectedOptions: SynOption[];
+    /** The name of the select, submitted as a name/value pair with form data. */
+    name: string;
+    /**
+     * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
+     * value attribute will be a space-delimited list of values based on the options selected, and the value property will
+     * be an array. **For this reason, values must not contain spaces.**
+     */
+    value: string | string[];
+    /** The default value of the form control. Primarily used for resetting the form control. */
+    defaultValue: string | string[];
+    /** The select's size. */
+    size: 'small' | 'medium' | 'large';
+    /** Placeholder text to show as a hint when the select is empty. */
+    placeholder: string;
+    /** Allows more than one option to be selected. */
+    multiple: boolean;
+    /**
+     * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
+     * indicate the number of additional items that are selected. Set to 0 to remove the limit.
+     */
+    maxOptionsVisible: number;
+    /** Disables the select control. */
+    disabled: boolean;
+    /** Adds a clear button when the select is not empty. */
+    clearable: boolean;
+    /**
+     * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can
+     * use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
+     */
+    open: boolean;
+    /**
+     * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
+     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+     */
+    hoist: boolean;
+    /** The select's label. If you need to display HTML, use the `label` slot instead. */
+    label: string;
+    /**
+     * The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox
+     * inside of the viewport.
+     */
+    placement: 'top' | 'bottom';
+    /** The select's help text. If you need to display HTML, use the `help-text` slot instead. */
+    helpText: string;
+    /**
+     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+     * the same document or shadow root for this to work.
+     */
+    form: string;
+    /** The select's required attribute. */
+    required: boolean;
+    /**
+     * A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second
+     * is the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at
+     * the specified value.
+     */
+    getTag: (option: SynOption, index: number) => TemplateResult | string | HTMLElement;
+    /** Gets the validity state object */
+    get validity(): ValidityState;
+    /** Gets the validation message */
+    get validationMessage(): string;
+    connectedCallback(): void;
+    private addOpenListeners;
+    private removeOpenListeners;
+    private handleFocus;
+    private handleBlur;
+    private handleDocumentFocusIn;
+    private handleDocumentKeyDown;
+    private handleDocumentMouseDown;
+    private handleLabelClick;
+    private handleComboboxMouseDown;
+    private handleComboboxKeyDown;
+    private handleClearClick;
+    private handleClearMouseDown;
+    private handleOptionClick;
+    private handleDefaultSlotChange;
+    private handleTagRemove;
+    private getAllOptions;
+    private getFirstOption;
+    private setCurrentOption;
+    private setSelectedOptions;
+    private toggleOptionSelection;
+    private selectionChanged;
+    protected get tags(): TemplateResult<1>[];
+    private handleInvalid;
+    handleDisabledChange(): void;
+    handleValueChange(): void;
+    handleOpenChange(): Promise<void>;
+    /** Shows the listbox. */
+    show(): Promise<void>;
+    /** Hides the listbox. */
+    hide(): Promise<void>;
+    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+    checkValidity(): boolean;
+    /** Gets the associated form, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message: string): void;
+    /** Sets focus on the control. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the control. */
+    blur(): void;
+    render(): TemplateResult<1>;
+}

package/dist/components/select/select.component.js

@@ -0,0 +1,35 @@
+import {
+  SynSelect
+} from "../../chunks/chunk.SS46QCYH.js";
+import "../../chunks/chunk.BQG5LF7J.js";
+import "../../chunks/chunk.CUHMPG7E.js";
+import "../../chunks/chunk.QHFGD6WW.js";
+import "../../chunks/chunk.7W73A57K.js";
+import "../../chunks/chunk.6XU6OLZ3.js";
+import "../../chunks/chunk.OWMT6OL2.js";
+import "../../chunks/chunk.JXOHBU6V.js";
+import "../../chunks/chunk.JN7CLMQZ.js";
+import "../../chunks/chunk.PQLAXTRQ.js";
+import "../../chunks/chunk.2FN5DTS6.js";
+import "../../chunks/chunk.OJF7KL44.js";
+import "../../chunks/chunk.JHXCBOUD.js";
+import "../../chunks/chunk.WFAJR3FN.js";
+import "../../chunks/chunk.XGXFE6IF.js";
+import "../../chunks/chunk.LAB4YJYE.js";
+import "../../chunks/chunk.A3SKDWCT.js";
+import "../../chunks/chunk.AMTCNRDE.js";
+import "../../chunks/chunk.63IJYG6Q.js";
+import "../../chunks/chunk.RSONAU45.js";
+import "../../chunks/chunk.PJO6TM3T.js";
+import "../../chunks/chunk.JRXQK6LG.js";
+import "../../chunks/chunk.6C4JXZZN.js";
+import "../../chunks/chunk.5AAIHRMI.js";
+import "../../chunks/chunk.VZ7S7YYN.js";
+import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.C5W2Y6KW.js";
+import "../../chunks/chunk.O7USYXBT.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
+export {
+  SynSelect as default
+};
+//# sourceMappingURL=select.component.js.map

package/dist/components/select/select.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/select/select.custom.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/select/select.custom.styles.js

@@ -0,0 +1,8 @@
+import {
+  select_custom_styles_default
+} from "../../chunks/chunk.OWMT6OL2.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
+export {
+  select_custom_styles_default as default
+};
+//# sourceMappingURL=select.custom.styles.js.map

package/dist/components/select/select.custom.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/select/select.d.ts

@@ -0,0 +1,8 @@
+import SynSelect from './select.component.js';
+export * from './select.component.js';
+export default SynSelect;
+declare global {
+    interface HTMLElementTagNameMap {
+        'syn-select': SynSelect;
+    }
+}

package/dist/components/select/select.js

@@ -0,0 +1,36 @@
+import {
+  select_default
+} from "../../chunks/chunk.FOTO5B4G.js";
+import "../../chunks/chunk.SS46QCYH.js";
+import "../../chunks/chunk.BQG5LF7J.js";
+import "../../chunks/chunk.CUHMPG7E.js";
+import "../../chunks/chunk.QHFGD6WW.js";
+import "../../chunks/chunk.7W73A57K.js";
+import "../../chunks/chunk.6XU6OLZ3.js";
+import "../../chunks/chunk.OWMT6OL2.js";
+import "../../chunks/chunk.JXOHBU6V.js";
+import "../../chunks/chunk.JN7CLMQZ.js";
+import "../../chunks/chunk.PQLAXTRQ.js";
+import "../../chunks/chunk.2FN5DTS6.js";
+import "../../chunks/chunk.OJF7KL44.js";
+import "../../chunks/chunk.JHXCBOUD.js";
+import "../../chunks/chunk.WFAJR3FN.js";
+import "../../chunks/chunk.XGXFE6IF.js";
+import "../../chunks/chunk.LAB4YJYE.js";
+import "../../chunks/chunk.A3SKDWCT.js";
+import "../../chunks/chunk.AMTCNRDE.js";
+import "../../chunks/chunk.63IJYG6Q.js";
+import "../../chunks/chunk.RSONAU45.js";
+import "../../chunks/chunk.PJO6TM3T.js";
+import "../../chunks/chunk.JRXQK6LG.js";
+import "../../chunks/chunk.6C4JXZZN.js";
+import "../../chunks/chunk.5AAIHRMI.js";
+import "../../chunks/chunk.VZ7S7YYN.js";
+import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.C5W2Y6KW.js";
+import "../../chunks/chunk.O7USYXBT.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
+export {
+  select_default as default
+};
+//# sourceMappingURL=select.js.map

package/dist/components/select/select.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/select/select.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/select/select.styles.js

@@ -0,0 +1,11 @@
+import {
+  select_styles_default
+} from "../../chunks/chunk.6XU6OLZ3.js";
+import "../../chunks/chunk.OWMT6OL2.js";
+import "../../chunks/chunk.JHXCBOUD.js";
+import "../../chunks/chunk.O7USYXBT.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
+export {
+  select_styles_default as default
+};
+//# sourceMappingURL=select.styles.js.map

package/dist/components/select/select.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/spinner/spinner.component.js

@@ -1,10 +1,10 @@
 import {
   SynSpinner
-} from "../../chunks/chunk.ZKVZHEJM.js";
+} from "../../chunks/chunk.TY5F2VTK.js";
 import "../../chunks/chunk.N2I6HVX3.js";
 import "../../chunks/chunk.LAB4YJYE.js";
 import "../../chunks/chunk.A3SKDWCT.js";
-import "../../chunks/chunk.SNP6OECI.js";
+import "../../chunks/chunk.C5W2Y6KW.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {

package/dist/components/switch/switch.component.js

@@ -1,12 +1,12 @@
 import {
   SynSwitch
-} from "../../chunks/chunk.RSGJ7C32.js";
+} from "../../chunks/chunk.DPTZN6HY.js";
 import "../../chunks/chunk.MNMITYTH.js";
 import "../../chunks/chunk.AFEABUNX.js";
 import "../../chunks/chunk.WFAJR3FN.js";
 import "../../chunks/chunk.AMTCNRDE.js";
 import "../../chunks/chunk.VZ7S7YYN.js";
-import "../../chunks/chunk.SNP6OECI.js";
+import "../../chunks/chunk.C5W2Y6KW.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {

package/dist/components/switch/switch.js

@@ -1,13 +1,13 @@
 import {
   switch_default
-} from "../../chunks/chunk.JFCQYLZB.js";
-import "../../chunks/chunk.RSGJ7C32.js";
+} from "../../chunks/chunk.5NJ7WWJW.js";
+import "../../chunks/chunk.DPTZN6HY.js";
 import "../../chunks/chunk.MNMITYTH.js";
 import "../../chunks/chunk.AFEABUNX.js";
 import "../../chunks/chunk.WFAJR3FN.js";
 import "../../chunks/chunk.AMTCNRDE.js";
 import "../../chunks/chunk.VZ7S7YYN.js";
-import "../../chunks/chunk.SNP6OECI.js";
+import "../../chunks/chunk.C5W2Y6KW.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {

package/dist/components/tag/tag.component.js

@@ -1,14 +1,14 @@
 import {
   SynTag
-} from "../../chunks/chunk.NZAZG5AN.js";
+} from "../../chunks/chunk.CUHMPG7E.js";
 import "../../chunks/chunk.QHFGD6WW.js";
 import "../../chunks/chunk.7W73A57K.js";
-import "../../chunks/chunk.FSHPI6B5.js";
+import "../../chunks/chunk.PQLAXTRQ.js";
 import "../../chunks/chunk.2FN5DTS6.js";
 import "../../chunks/chunk.OJF7KL44.js";
 import "../../chunks/chunk.LAB4YJYE.js";
 import "../../chunks/chunk.A3SKDWCT.js";
-import "../../chunks/chunk.C2S53NYE.js";
+import "../../chunks/chunk.63IJYG6Q.js";
 import "../../chunks/chunk.RSONAU45.js";
 import "../../chunks/chunk.PJO6TM3T.js";
 import "../../chunks/chunk.JRXQK6LG.js";
@@ -16,7 +16,7 @@ import "../../chunks/chunk.6C4JXZZN.js";
 import "../../chunks/chunk.5AAIHRMI.js";
 import "../../chunks/chunk.VZ7S7YYN.js";
 import "../../chunks/chunk.C7624ITA.js";
-import "../../chunks/chunk.SNP6OECI.js";
+import "../../chunks/chunk.C5W2Y6KW.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {

package/dist/components/tag/tag.js

@@ -1,15 +1,15 @@
 import {
   tag_default
-} from "../../chunks/chunk.NQZRYJEZ.js";
-import "../../chunks/chunk.NZAZG5AN.js";
+} from "../../chunks/chunk.Y6HNLEFW.js";
+import "../../chunks/chunk.CUHMPG7E.js";
 import "../../chunks/chunk.QHFGD6WW.js";
 import "../../chunks/chunk.7W73A57K.js";
-import "../../chunks/chunk.FSHPI6B5.js";
+import "../../chunks/chunk.PQLAXTRQ.js";
 import "../../chunks/chunk.2FN5DTS6.js";
 import "../../chunks/chunk.OJF7KL44.js";
 import "../../chunks/chunk.LAB4YJYE.js";
 import "../../chunks/chunk.A3SKDWCT.js";
-import "../../chunks/chunk.C2S53NYE.js";
+import "../../chunks/chunk.63IJYG6Q.js";
 import "../../chunks/chunk.RSONAU45.js";
 import "../../chunks/chunk.PJO6TM3T.js";
 import "../../chunks/chunk.JRXQK6LG.js";
@@ -17,7 +17,7 @@ import "../../chunks/chunk.6C4JXZZN.js";
 import "../../chunks/chunk.5AAIHRMI.js";
 import "../../chunks/chunk.VZ7S7YYN.js";
 import "../../chunks/chunk.C7624ITA.js";
-import "../../chunks/chunk.SNP6OECI.js";
+import "../../chunks/chunk.C5W2Y6KW.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {

package/dist/components/textarea/textarea.component.js

@@ -1,6 +1,6 @@
 import {
   SynTextarea
-} from "../../chunks/chunk.4NG4BW3G.js";
+} from "../../chunks/chunk.FLCUFEHS.js";
 import "../../chunks/chunk.23HTU3YE.js";
 import "../../chunks/chunk.YBIBWRKC.js";
 import "../../chunks/chunk.JHXCBOUD.js";
@@ -8,7 +8,7 @@ import "../../chunks/chunk.WFAJR3FN.js";
 import "../../chunks/chunk.XGXFE6IF.js";
 import "../../chunks/chunk.AMTCNRDE.js";
 import "../../chunks/chunk.VZ7S7YYN.js";
-import "../../chunks/chunk.SNP6OECI.js";
+import "../../chunks/chunk.C5W2Y6KW.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {

package/dist/components/textarea/textarea.js

@@ -1,7 +1,7 @@
 import {
   textarea_default
-} from "../../chunks/chunk.VYKSU5VJ.js";
-import "../../chunks/chunk.4NG4BW3G.js";
+} from "../../chunks/chunk.A4YWJJLD.js";
+import "../../chunks/chunk.FLCUFEHS.js";
 import "../../chunks/chunk.23HTU3YE.js";
 import "../../chunks/chunk.YBIBWRKC.js";
 import "../../chunks/chunk.JHXCBOUD.js";
@@ -9,7 +9,7 @@ import "../../chunks/chunk.WFAJR3FN.js";
 import "../../chunks/chunk.XGXFE6IF.js";
 import "../../chunks/chunk.AMTCNRDE.js";
 import "../../chunks/chunk.VZ7S7YYN.js";
-import "../../chunks/chunk.SNP6OECI.js";
+import "../../chunks/chunk.C5W2Y6KW.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {