@salesforcedevs/dx-components 0.54.6 → 0.54.7-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.54.6",
+    "version": "0.54.7-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -16,7 +16,6 @@
         "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",
         "debounce": "^1.2.0",
-        "lightning-base-components": "1.12.3-alpha",
         "lodash.get": "^4.4.2",
         "microtip": "0.2.2"
     },
@@ -25,6 +24,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6",
         "@types/vimeo__player": "^2.16.2"
-    },
-    "gitHead": "643dd94de9c0f755960b748bdb425720f4ad53f3"
+    }
 }

package/src/modules/dx/breadcrumbs/breadcrumbs.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Breadcrumb, Option } from "typings/custom";
+import { Breadcrumb, OptionWithNested } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 
 type LabelMap = { [href: string]: string };
@@ -19,7 +19,7 @@ const toLabel = (val: string) => {
 export default class Breadcrumbs extends LightningElement {
     @api ariaLabel: string = "Navigation Breadcrumbs";
     @api baseHref: string = "/";
-    @api navItems: Option[] = [];
+    @api navItems: OptionWithNested[] = [];
     @api pathname: string = window.location.pathname;
     @api title: string = "Salesforce";
     @api logo: boolean = false;
@@ -42,19 +42,22 @@ export default class Breadcrumbs extends LightningElement {
     private _breadcrumbs!: Breadcrumb[];
 
     private get labelMap(): LabelMap {
-        const deepReducer = (options: Option[]) =>
-            options.reduce((acc: LabelMap, item: Option): LabelMap => {
-                if (item.options) {
-                    return { ...acc, ...deepReducer(item.options) };
-                }
-                if (!item.link) {
-                    return acc;
-                }
-                return {
-                    ...acc,
-                    [item.link.href]: item.label
-                };
-            }, {});
+        const deepReducer = (options: OptionWithNested[]) =>
+            options.reduce(
+                (acc: LabelMap, item: OptionWithNested): LabelMap => {
+                    if (item.options) {
+                        return { ...acc, ...deepReducer(item.options) };
+                    }
+                    if (!item.link) {
+                        return acc;
+                    }
+                    return {
+                        ...acc,
+                        [item.link.href]: item.label
+                    };
+                },
+                {}
+            );
         return this.navItems ? deepReducer(this.navItems) : {};
     }
 

package/src/modules/dx/dropdown/dropdown.ts

@@ -1,11 +1,11 @@
-import { Option, PopperPlacement } from "typings/custom";
+import { OptionWithNested, PopperPlacement } from "typings/custom";
 import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
 import get from "lodash.get";
 import { deepmapOptions } from "dxUtils/options";
 import { toJson } from "dxUtils/normalizers";
 
-interface DropdownOption extends Option {
+interface DropdownOption extends OptionWithNested {
     // link that gets shown as a highlighted link at end of option group
     calloutLink?: {
         href: string;

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -1,10 +1,10 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Option } from "typings/custom";
+import { OptionWithNested } from "typings/custom";
 import { track } from "dxUtils/analytics";
 
 export default class DropdownOption extends LightningElement {
-    @api option!: Option;
+    @api option!: OptionWithNested;
     @api suppressGtmNavHeadings: boolean = false;
     @api keyValue!: string;
     @api active: boolean = false;

package/src/modules/dx/footer/footer.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
+import { FooterVariant, OptionWithLink } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
-import { FooterVariant, Option } from "typings/custom";
 import {
     generalLinks,
     termsLinks,
@@ -31,7 +31,7 @@ export default class Footer extends LightningElement {
         this._locales = toJson(value);
     }
 
-    private _locales?: Option[] | null = null;
+    private _locales?: OptionWithLink[] | null = null;
     private termsLinks = termsLinks;
     private generalLinks = generalLinks;
     private socialLinks = socialLinks;

package/src/modules/dx/header/header.ts

@@ -1,10 +1,10 @@
 import { api } from "lwc";
+import type { OptionWithNested } from "typings/custom";
 import { HeaderBase } from "dxBaseElements/headerBase";
 import { toJson } from "dxUtils/normalizers";
-import type { Option } from "typings/custom";
 
 export default class Header extends HeaderBase {
-    private _breadcrumbs!: Option[];
+    private _breadcrumbs!: OptionWithNested[];
 
     @api
     get breadcrumbs() {

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Option } from "typings/custom";
+import { OptionWithNested } from "typings/custom";
 import { deepmapOptions } from "dxUtils/options";
 
 export default class HeaderMobileNavMenu extends LightningElement {
@@ -9,7 +9,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
     @api pathname: string | null = null;
 
     @api
-    set navItems(_navItems: Option[]) {
+    set navItems(_navItems: OptionWithNested[]) {
         this._navItems = _navItems;
     }
     get navItems() {
@@ -24,7 +24,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
         // then we use deepmapper to affect the actual root options (actual links)
         return deepmapOptions(
             navItems,
-            (app: Option, index: number, level: number) => {
+            (app: OptionWithNested, index: number, level: number) => {
                 const active = app.link
                     ? app.link.href === this.pathname
                     : false;
@@ -47,7 +47,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
         );
     }
 
-    private _navItems: Option[] = [];
+    private _navItems: OptionWithNested[] = [];
     private navElement: HTMLElement | null = null;
     private wasOpen: boolean = false;
     private showScrollShadow: boolean = false;

package/src/modules/dx/headerNav/headerNav.ts

@@ -1,18 +1,18 @@
 import { LightningElement, api } from "lwc";
-import { TabVariant, Option } from "typings/custom";
+import { TabVariant, OptionWithNested } from "typings/custom";
 export default class HeaderNav extends LightningElement {
     @api pathname: string | null = null;
     @api variant: TabVariant = "default";
     @api ariaLabel: string = "Primary Navigation";
 
     @api
-    set navItems(_navItems: Option[]) {
+    set navItems(_navItems: OptionWithNested[]) {
         this._navItems = _navItems;
     }
 
     get navItems() {
         const activeItem = this._navItems
-            .filter((navItem: Option) => {
+            .filter((navItem: OptionWithNested) => {
                 if (!navItem.link || navItem.link.href === "/") {
                     return false;
                 }
@@ -31,7 +31,7 @@ export default class HeaderNav extends LightningElement {
                     (b.link?.href.length || 0) - (a.link?.href.length || 0)
             )[0];
 
-        const items = this._navItems.map((navItem: Option) =>
+        const items = this._navItems.map((navItem: OptionWithNested) =>
             navItem.link
                 ? {
                       ...navItem,
@@ -45,7 +45,7 @@ export default class HeaderNav extends LightningElement {
         return items;
     }
 
-    private _navItems: Option[] = [];
+    private _navItems: OptionWithNested[] = [];
 
     private requestOpenNavMenu(e: PointerEvent) {
         const detail = (<HTMLButtonElement>e.currentTarget).getAttribute(

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { PopoverRequestCloseType, Option } from "typings/custom";
+import { PopoverRequestCloseType, OptionWithLink } from "typings/custom";
 import { buildSearchEngine } from "dxUtils/coveo";
 import {
     StandaloneSearchBox as StandaloneSearchBoxType,
@@ -28,7 +28,7 @@ export default class HeaderSearch extends LightningElement {
         return this.mobile ? null : "desktop_search-container";
     }
 
-    private get suggestions(): Option[] {
+    private get suggestions(): OptionWithLink[] {
         if (this.searchState) {
             return this.searchState.suggestions.map(
                 ({ highlightedValue }: { highlightedValue: string }) => ({

package/src/modules/dx/select/select.css

@@ -1,5 +1,3 @@
-@import "dxHelpers/slds";
-
 :host {
     display: block;
 }
@@ -8,7 +6,7 @@
     outline: none;
 }
 
-.slds-select_container::before {
+.select_container::before {
     --icon-size: 0.5em;
 
     border-style: solid;
@@ -24,21 +22,196 @@
     width: var(--icon-size);
 }
 
-.placeholder {
+.select-element_placeholder {
     color: var(--sds-g-gray-9);
 }
 
-select.slds-select:focus:not([disabled]),
-select.slds-select:active:not([disabled]) {
+select.select-element:focus:not([disabled]),
+select.select-element:active:not([disabled]) {
     border-width: 2px;
     border-color: var(--dx-g-blue-vibrant-50);
     box-shadow: none;
     -webkit-box-shadow: none;
 }
 
-:host(.slds-has-error) select.slds-select:focus,
-:host(.slds-has-error) select.slds-select:active {
+.has-error select.select-element:focus,
+.has-error select.select-element:active {
     border-color: #ea001e;
     box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
     -webkit-box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
 }
+
+@media (min-width: 48em) {
+    .form-element_horizontal .form-element_control {
+        padding-left: 33%;
+        clear: none;
+    }
+}
+
+abbr[title] {
+    border-bottom: 1px dotted;
+    text-decoration: none;
+    cursor: help;
+}
+
+abbr[title]::after {
+    content: " (" attr(title) ")";
+}
+
+abbr[title],
+fieldset,
+hr {
+    border: 0;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+.form-element_control {
+    clear: left;
+    position: relative;
+}
+
+.form-element_label {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+    display: inline-block;
+    color: #3e3e3c;
+    font-size: 0.75rem;
+    padding-right: 0.5rem;
+    padding-top: 0.25rem;
+    margin-bottom: 0.125rem;
+}
+
+.form-element_label:empty {
+    margin: 0;
+}
+
+.form-element_stacked .form-element_label,
+.form-element_stacked .form-element_control {
+    border-bottom: 0;
+    padding-left: 0;
+}
+
+.form-element_stacked .form-element_control {
+    width: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    clear: left;
+}
+
+.assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+}
+
+.required-element {
+    color: #ea001e;
+    margin: 0 0.125rem;
+}
+
+.select-element {
+    height: calc(1.875rem + (1px * 2));
+    width: 100%;
+    border: 1px solid #dddbda;
+    border-radius: 0.25rem;
+    background-color: white;
+    -webkit-transition: border 0.1s linear, background-color 0.1s linear;
+    transition: border 0.1s linear, background-color 0.1s linear;
+}
+
+.select-element:focus,
+.select-element:active {
+    outline: 0;
+    border-color: #1b96ff;
+    background-color:white;
+    -webkit-box-shadow: 0 0 3px #0176d3;
+    box-shadow: 0 0 3px #0176d3;
+}
+
+.select-element[disabled],
+.select-element.slds-is-disabled {
+    background-color: #ecebea;
+    border-color: #c9c7c5;
+    color: #3e3e3c;
+    cursor: not-allowed;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    opacity: 1;
+}
+
+.select-element[disabled]:focus,
+.select-element[disabled]:active,
+.select-element.slds-is-disabled:focus,
+.select-element.slds-is-disabled:active {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.select-element[size] {
+    min-height: calc(1.875rem + (1px * 2));
+    height: inherit;
+}
+
+.select-element[size] option {
+    padding: 0.5rem;
+}
+
+.has-error .select-element {
+    border-color: #ea001e;
+    -webkit-box-shadow: #ea001e 0 0 0 1px inset;
+    box-shadow: #ea001e 0 0 0 1px inset;
+    background-clip: padding-box;
+}
+
+.select_container {
+    position: relative;
+}
+
+.select_container .select-element {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    padding-left: 0.5rem;
+    padding-right: 1.5rem;
+}
+
+.select_container .select-element::-ms-expand {
+    display: none;
+}
+
+.has-error .select-element:focus,
+.has-error .select-element:active {
+    -webkit-box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
+    box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
+}
+
+.form-element:not(.has-error) .select-element:required {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.form-element_help,
+.form-element_helper {
+    font-size: 0.75rem;
+    margin-top: 0.125rem;
+    display: block;
+}
+
+.has-error .form-element_help {
+    color: #ea001e;
+}

package/src/modules/dx/select/select.html

@@ -1,60 +1,57 @@
 <template>
-    <label class={computedLabelClass} for="select">
-        {label}
-        <template if:true={required}>
-            <abbr>*</abbr>
-        </template>
-    </label>
-
-    <div class="slds-form-element__control">
-        <div class="slds-select_container">
-            <select
-                autocomplete={autocomplete}
-                class={selectClass}
-                disabled={disabled}
-                id="select"
-                multiple={multiple}
-                name={name}
-                onblur={handleBlur}
-                onchange={handleChange}
-                onfocus={handleFocus}
-                required={required}
-                accesskey={accessKey}
-                size={size}
-            >
-                <template if:true={placeholder}>
-                    <option if:false={value} value="" disabled>
-                        {placeholder}
-                    </option>
-                </template>
-                <template for:each={options} for:item="option">
-                    <template if:true={option.disabled}>
-                        <option
-                            disabled
-                            key={option.value}
-                            value={option.value}
-                        >
-                            {option.label}
-                        </option>
+    <div class={containerClass}>
+        <label class="form-element_label" for="select">
+            {label}
+            <template if:true={required}>
+                <abbr>*</abbr>
+            </template>
+        </label>
+        <div class="form-element_control">
+            <div class="select_container">
+                <select
+                    autocomplete={autocomplete}
+                    class={selectClass}
+                    disabled={disabled}
+                    id="select"
+                    name={name}
+                    onblur={handleBlur}
+                    onchange={handleChange}
+                    onfocus={handleFocus}
+                    required={required}
+                    accesskey={accessKey}
+                    size={size}
+                >
+                    <template if:true={placeholder}>
+                        <option value="" disabled>{placeholder}</option>
                     </template>
-                    <template if:false={option.disabled}>
-                        <option key={option.value} value={option.value}>
-                            {option.label}
-                        </option>
+                    <template for:each={options} for:item="option">
+                        <template if:true={option.disabled}>
+                            <option
+                                disabled
+                                key={option.value}
+                                value={option.value}
+                            >
+                                {option.label}
+                            </option>
+                        </template>
+                        <template if:false={option.disabled}>
+                            <option key={option.value} value={option.value}>
+                                {option.label}
+                            </option>
+                        </template>
                     </template>
-                </template>
-            </select>
+                </select>
+            </div>
         </div>
+        <template if:true={helpMessage}>
+            <div
+                aria-live="assertive"
+                class="form-element_help"
+                data-help-message
+                id="help-message"
+            >
+                {helpMessage}
+            </div>
+        </template>
     </div>
-
-    <template if:true={_helpMessage}>
-        <div
-            aria-live="assertive"
-            class="slds-form-element__help"
-            data-help-message
-            id="help-message"
-        >
-            {_helpMessage}
-        </div>
-    </template>
 </template>

package/src/modules/dx/select/select.ts

@@ -1,23 +1,141 @@
 import cx from "classnames";
-import { api } from "lwc";
-import LightningSelect from "lightning/select";
-import { toJson } from "dxUtils/normalizers";
+import { LightningElement, api } from "lwc";
+import { SelectOption } from "typings/custom";
+import { toJson, normalizeBoolean } from "dxUtils/normalizers";
 
-export default class Select extends LightningSelect {
+export const DEFAULT_MISSING_MESSAGE = "This field is required";
+
+export default class Select extends LightningElement {
+    @api accessKey!: string;
+    @api autocomplete?: string;
+    @api label?: string;
+    @api messageWhenValueMissing: string = DEFAULT_MISSING_MESSAGE;
+    @api name?: string;
     @api placeholder?: string;
+    @api size?: string;
+
+    @api
+    get disabled() {
+        return this._disabled;
+    }
+
+    set disabled(value) {
+        this._disabled = normalizeBoolean(value);
+    }
+
+    @api
+    get options() {
+        return this._options;
+    }
+
+    set options(value) {
+        this._options = toJson(value);
+    }
 
     @api
-    get jsonOptions() {
-        return this.options;
+    get required() {
+        return this._required;
     }
 
-    set jsonOptions(value) {
-        this.options = toJson(value);
+    set required(value) {
+        this._required = normalizeBoolean(value);
+    }
+
+    @api
+    get value() {
+        return this._value;
+    }
+
+    set value(value) {
+        this._value = value;
+        this.updateSelectValue();
+    }
+
+    _disabled = false;
+    _size = "";
+    _required = false;
+    _options: Array<SelectOption> = [];
+    _value: string = "";
+    _selectElement: HTMLSelectElement | null = null;
+    helpMessage?: string = "";
+
+    renderedCallback(): void {
+        this.updateSelectValue();
+    }
+
+    get containerClass() {
+        return cx("form-element", this.hasError && "has-error");
+    }
+
+    get hasError(): boolean {
+        return !!this.helpMessage;
     }
 
     get selectClass() {
-        return cx("slds-select", {
-            placeholder: !this.value
+        return cx("select-element", {
+            "select-element_placeholder": this.placeholder && !this.value
         });
     }
+
+    get selectElement() {
+        if (!this._selectElement) {
+            this._selectElement =
+                this.template.querySelector<HTMLSelectElement>("select");
+        }
+        return this._selectElement;
+    }
+
+    @api
+    blur(): void {
+        if (this.selectElement) {
+            this.selectElement.blur();
+        }
+    }
+
+    @api
+    focus(): void {
+        if (this.selectElement) {
+            this.selectElement.focus();
+        }
+    }
+
+    @api
+    reportValidity(): boolean {
+        const isInvalid = this._required && !this._value;
+        this.helpMessage = isInvalid
+            ? this.messageWhenValueMissing || DEFAULT_MISSING_MESSAGE
+            : "";
+        return !isInvalid;
+    }
+
+    handleBlur(): void {
+        this.reportValidity();
+        this.dispatchEvent(new CustomEvent("blur"));
+    }
+
+    handleChange(event: Event & { target: HTMLSelectElement }): void {
+        const { value } = event.target;
+        this._value = value;
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                detail: { value }
+            })
+        );
+    }
+
+    handleFocus(): void {
+        this.helpMessage = "";
+        this.dispatchEvent(new CustomEvent("focus"));
+    }
+
+    // We have to do it programmatically because value binding doesn't work apparently.
+    updateSelectValue(): void {
+        if (!this._value && !this.placeholder) {
+            return;
+        }
+
+        if (this.selectElement) {
+            this.selectElement.value = this._value;
+        }
+    }
 }

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -292,7 +292,7 @@ export default class SidebarSearch extends LightningElement {
     }: Result): SidebarSearchResult => {
         // discussion about this normalization here: https://salesforce-internal.slack.com/archives/C020S6784JX/p1639506238376600
 
-        let pathname;
+        let pathname, queryParam;
         if (sfhtml_url__c) {
             pathname = `/docs/${sfhtml_url__c}`;
         } else {
@@ -303,9 +303,15 @@ export default class SidebarSearch extends LightningElement {
                     ? ".html"
                     : "";
             pathname = `${url.pathname}${extension}`;
+            queryParam = url.search;
         }
 
-        const href = `${pathname}?q=${this.value}`;
+        let href;
+        if (queryParam) {
+            href = `${pathname}${queryParam}&q=${this.value}`;
+        } else {
+            href = `${pathname}?q=${this.value}`;
+        }
 
         return {
             title,

package/src/modules/dxBaseElements/headerBase/headerBase.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Brand, Option } from "typings/custom";
+import { Brand, OptionWithLink, OptionWithNested } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { track } from "dxUtils/analytics";
 
@@ -61,8 +61,8 @@ export abstract class HeaderBase extends LightningElement {
         this._versions = toJson(value);
     }
 
-    private _navItems!: Option[];
-    private _versions!: Option[];
+    private _navItems!: OptionWithNested[];
+    private _versions!: OptionWithLink[];
     private matchMedia!: MediaQueryList;
     protected mobile: boolean = false;
     private mobileNavMenuValue: string | null = null;

package/src/modules/dxUtils/language/language.ts

@@ -0,0 +1,21 @@
+import { Language } from "typings/custom";
+
+export const getLanguageDisplayTextById = (
+    languages: Language[],
+    languageId: string
+): string => {
+    const language = languages.find(
+        (languageItem) => languageItem.id === languageId
+    );
+    return language ? language.displayText : "";
+};
+
+export const isGivenLanguageSupported = (
+    languages: Language[],
+    languageId: string
+): boolean => {
+    const languageIndex = languages.findIndex(
+        (languageItem) => languageItem.id === languageId
+    );
+    return languageIndex >= 0;
+};

package/src/modules/dxUtils/options/options.ts

@@ -1,12 +1,12 @@
-import { Option } from "typings/custom";
+import { OptionWithNested } from "typings/custom";
 
 const deepmapper = (
-    _options: Option[],
-    _callback: (option: Option, lavel: number) => Option,
+    _options: OptionWithNested[],
+    _callback: (option: OptionWithNested, lavel: number) => OptionWithNested,
     level: number = 0
-): Option[] => {
+): OptionWithNested[] => {
     const _level = level + 1;
-    return _options?.map((option: Option) =>
+    return _options?.map((option: OptionWithNested) =>
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         option.options
             ? {
@@ -18,9 +18,13 @@ const deepmapper = (
 };
 
 export const deepmapOptions = (
-    options: Option[],
-    callback: (option: Option, index: number, level: number) => Option
-): Option[] => {
+    options: OptionWithNested[],
+    callback: (
+        option: OptionWithNested,
+        index: number,
+        level: number
+    ) => OptionWithNested
+): OptionWithNested[] => {
     let index = 0;
     return deepmapper(options, (option, level) => {
         const newOption = callback(option, index, level);
@@ -29,7 +33,7 @@ export const deepmapOptions = (
     });
 };
 
-export const getOptionsCount = (options: Option[]) => {
+export const getOptionsCount = (options: OptionWithNested[]) => {
     let count = 0;
     deepmapper(options, (option) => {
         count += 1;

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/src/modules/dxHelpers/slds/slds.css

@@ -1,191 +0,0 @@
-:host(.slds-form-element_stacked) .slds-form-element__label,
-:host(.slds-form-element_stacked) .slds-form-element__control {
-    border-bottom: 0;
-    padding-left: 0;
-}
-
-:host(.slds-form-element_stacked) .slds-form-element__control {
-    width: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    clear: left;
-}
-
-@media (min-width: 48em) {
-    :host(.slds-form-element_horizontal) .slds-form-element__control {
-        padding-left: 33%;
-        clear: none;
-    }
-}
-
-:host(.slds-has-error) .slds-select {
-    border-color: #ea001e;
-    -webkit-box-shadow: #ea001e 0 0 0 1px inset;
-    box-shadow: #ea001e 0 0 0 1px inset;
-    background-clip: padding-box;
-}
-
-:host(.slds-has-error) .slds-select:focus,
-:host(.slds-has-error) .slds-select:active {
-    -webkit-box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
-    box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
-}
-
-:host(.slds-has-error) .slds-form-element__help {
-    color: #ea001e;
-}
-
-abbr[title] {
-    border-bottom: 1px dotted;
-}
-
-abbr[title] {
-    text-decoration: none;
-}
-
-abbr[title],
-fieldset,
-hr {
-    border: 0;
-}
-
-abbr[title] {
-    cursor: help;
-}
-
-abbr[title]:after {
-    content: " (" attr(title) ")";
-}
-
-button,
-select {
-    text-transform: none;
-}
-
-.slds-form-element__label {
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    -webkit-hyphens: auto;
-    -ms-hyphens: auto;
-    hyphens: auto;
-    display: inline-block;
-    color: #3e3e3c;
-    font-size: 0.75rem;
-    padding-right: 0.5rem;
-    padding-top: 0.25rem;
-    margin-bottom: 0.125rem;
-}
-
-.slds-form-element__label:empty {
-    margin: 0;
-}
-
-.slds-assistive-text {
-    position: absolute !important;
-    margin: -1px !important;
-    border: 0 !important;
-    padding: 0 !important;
-    width: 1px !important;
-    height: 1px !important;
-    overflow: hidden !important;
-    clip: rect(0 0 0 0) !important;
-    text-transform: none !important;
-    white-space: nowrap !important;
-}
-
-.slds-required {
-    color: #ea001e;
-    margin: 0 0.125rem;
-}
-
-.slds-form-element__control {
-    clear: left;
-    position: relative;
-}
-
-.slds-select {
-    height: calc(1.875rem + (1px * 2));
-    width: 100%;
-    border: 1px solid var(--sds-c-select-color-border, #dddbda);
-    border-radius: var(--sds-c-select-radius-border, 0.25rem);
-    background-color: var(--sds-c-select-color-background, white);
-    color: var(--sds-c-select-text-color);
-    -webkit-box-shadow: var(--sds-c-select-shadow);
-    box-shadow: var(--sds-c-select-shadow);
-    -webkit-transition: border 0.1s linear, background-color 0.1s linear;
-    transition: border 0.1s linear, background-color 0.1s linear;
-}
-
-.slds-select:required {
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-.slds-select:focus,
-.slds-select:active {
-    outline: 0;
-    border-color: var(--sds-c-select-color-border-focus, #1b96ff);
-    background-color: var(--sds-c-select-color-background-focus, white);
-    color: var(--sds-c-select-text-color-focus);
-    -webkit-box-shadow: var(--sds-c-select-shadow-focus, 0 0 3px #0176d3);
-    box-shadow: var(--sds-c-select-shadow-focus, 0 0 3px #0176d3);
-}
-
-.slds-select[disabled],
-.slds-select.slds-is-disabled {
-    background-color: #ecebea;
-    border-color: #c9c7c5;
-    color: #3e3e3c;
-    cursor: not-allowed;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    opacity: 1;
-}
-
-.slds-select[disabled]:focus,
-.slds-select[disabled]:active,
-.slds-select.slds-is-disabled:focus,
-.slds-select.slds-is-disabled:active {
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-.slds-select[size],
-.slds-select[multiple] {
-    min-height: calc(1.875rem + (1px * 2));
-    height: inherit;
-}
-
-.slds-select[size] option,
-.slds-select[multiple] option {
-    padding: 0.5rem;
-}
-
-.slds-select_container {
-    position: relative;
-    color: var(--sds-c-select-text-color);
-}
-
-.slds-select_container .slds-select {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    padding-left: 0.5rem;
-    padding-right: 1.5rem;
-}
-.slds-select_container .slds-select::-ms-expand {
-    display: none;
-}
-
-.slds-select[size] option,
-.slds-select[multiple] option {
-    padding: 0.5rem;
-}
-
-.slds-form-element__help,
-.slds-form-element__helper {
-    font-size: 0.75rem;
-    margin-top: 0.125rem;
-    display: block;
-}