lightning-base-components 1.28.11-alpha → 1.28.12-alpha

package/src/lightning/overlay/__examples__/demo/demo.html

@@ -0,0 +1,29 @@
+<template>
+    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
+        aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
+        <div class="slds-modal__container">
+            <header class="slds-modal__header">
+                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={handleDismiss}>
+                    <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
+                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
+                    </svg>
+                    <span class="slds-assistive-text">Close</span>
+                </button>
+                <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">{header}</h2>
+            </header>
+            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
+                <p>{body}</p>
+                <ul>
+                    <template for:each={options} for:item="option">
+                        <li key={option.id}>
+                            <button onclick={handleOptionClick} data-id={option.id}>
+                                {option.label}
+                            </button>
+                        </li>
+                    </template>
+                </ul>
+            </div>
+        </div>
+    </section>
+    <div class="slds-backdrop slds-backdrop_open"></div>
+</template>

package/src/lightning/overlay/__examples__/panel/panel.html

@@ -0,0 +1,17 @@
+<template>
+    <lightning-focus-trap>
+        <div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-left slds-is-open" aria-hidden="false">
+            <div class="slds-panel__header">
+                <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">{header}</h2>
+                <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__close" title="Collapse Panel Header" onclick={handleDismiss}>
+                <svg class="slds-button__icon" aria-hidden="true">
+                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
+                </svg>
+                <span class="slds-assistive-text">Collapse Panel Header</span>
+                </button>
+            </div>
+            <div class="slds-panel__body">{body}</div>
+        </div>
+    </lightning-focus-trap>
+    <!-- <div class="slds-backdrop slds-backdrop_open"></div>-->
+</template>

package/src/lightning/pill/__examples__/avatarPill/avatarPill.html

@@ -0,0 +1,6 @@
+<template>
+    <lightning-pill label="Pill Label">
+        <lightning-avatar src="https://v1.lightningdesignsystem.com/assets/images/avatar2.jpg" fallback-icon-name="standard:user" variant="circle"  alternative-text="User avatar"></lightning-avatar>
+    </lightning-pill>
+</template>
+

package/src/lightning/pill/__examples__/basic/basic.html

@@ -0,0 +1,8 @@
+<template>
+    <div class="slds-m-vertical_medium">
+        <p>Info: <span class="slds-text-heading_small">{infoText}</span></p>
+    </div>
+    <lightning-pill label="With link" href="https://www.example.com"></lightning-pill>
+    <lightning-pill label="With remove handler" onremove={handleRemove}></lightning-pill>
+</template>
+

package/src/lightning/pill/__examples__/errorPill/errorPill.html

@@ -0,0 +1,4 @@
+<template>
+        <lightning-pill label="Pill Label" has-error></lightning-pill>
+</template>
+

package/src/lightning/pill/__examples__/iconPill/iconPill.html

@@ -0,0 +1,6 @@
+<template>
+    <lightning-pill label="Pill Label">
+        <lightning-icon icon-name="standard:account" alternative-text="Account"></lightning-icon>
+    </lightning-pill>
+</template>
+

package/src/lightning/pill/__examples__/plainLink/plainLink.html

@@ -0,0 +1,6 @@
+<template>
+    <lightning-pill label="Pill Label" href="/path/to/some/where" variant="plainLink">
+        <lightning-avatar src="/docs/component-library/app/images/examples/avatar2.jpg" fallback-icon-name="standard:user" variant="circle"  alternative-text="User avatar"></lightning-avatar>
+    </lightning-pill>
+</template>
+

package/src/lightning/pillContainer/__examples__/basic/basic.html

@@ -0,0 +1,3 @@
+<template>
+    <lightning-pill-container items={items} ></lightning-pill-container>
+</template>

package/src/lightning/popup/__examples__/basic/basic.html

@@ -0,0 +1,16 @@
+<template>
+    <lightning-button label="Click to show a popup" onclick={openPopup}></lightning-button>
+
+    <lightning-popup aria-describedby="popup-body">
+        <div class="slds-popover">
+            <div id="popup-body" class="slds-popover__body">
+                <lightning-input label="An input"></lightning-input>
+                <div class="slds-m-top_small">
+                    <lightning-button variant="brand" label="Save" onclick={handleSave}></lightning-button>
+                    <lightning-button variant="brand" label="Cancel" onclick={handleCancel}></lightning-button>
+                </div>
+            </div>
+        </div>
+    </lightning-popup>
+
+</template>

package/src/lightning/popup/__examples__/walkthrough/walkthrough.html

@@ -0,0 +1,33 @@
+<template>
+    <lightning-button label="Click to show a popup" onclick={openPopup}></lightning-button>
+
+    <lightning-popup
+        aria-labelledby="popup-header"
+        aria-describedby="popup-body"
+        onautofocus={handleAutoFocus}
+        onalignmentupdate={handleAlignmentUpdate}>
+        <div class={popupClasses}>
+            <button onclick={closePopup}
+                class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse">
+                <lightning-icon icon-name="utility:close" size="xx-small"></lightning-icon>
+            </button>
+
+            <header id="popup-header" class="slds-popover__header">Manage your channels</header>
+
+            <div id="popup-body" class="slds-popover__body">
+                <p class="slds-p-bottom_medium slds-p-top_medium">This is the content of the body</p>
+
+                <lightning-input type="email" label="Email Address" placeholder="Email Address"
+                                 variant="label-hidden"></lightning-input>
+            </div>
+            <footer class="slds-popover__footer">
+                <div class="slds-grid slds-grid_vertical-align-center">
+                    <span class="slds-text-title">Step 2 of 4</span>
+                    <button class="slds-button slds-button_success slds-col_bump-left">Setup Email</button>
+                    <button class="slds-button slds-button_brand slds-col_bump-left">Next</button>
+                </div>
+            </footer>
+        </div>
+    </lightning-popup>
+
+</template>

package/src/lightning/positionLibrary/__examples__/components/components.html

@@ -0,0 +1,41 @@
+<template>
+    <template if:true={isHelpText}>
+        <lightning-helptext
+            content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel orci porta non pulvinar neque."
+        ></lightning-helptext>
+    </template>
+
+    <template if:true={isButtonMenu}>
+        <lightning-button-menu alternative-text="Show menu">
+            <lightning-menu-item
+                value="MenuItemOne"
+                label="Menu Item One"
+            ></lightning-menu-item>
+            <lightning-menu-item
+                value="MenuItemTwo"
+                label="Menu Item Two"
+            ></lightning-menu-item>
+            <lightning-menu-item
+                value="MenuItemThree"
+                label="Menu Item Three"
+            ></lightning-menu-item>
+            <lightning-menu-item
+                value="MenuItemFour"
+                label="Menu Item Four"
+            ></lightning-menu-item>
+        </lightning-button-menu>
+    </template>
+
+    <template if:true={isComboBox}>
+        <lightning-combobox
+            name="progress"
+            label="Status"
+            placeholder="Select Progress"
+            options={comboBoxOptions}
+        ></lightning-combobox>
+    </template>
+
+    <template if:true={isDatePicker}>
+        <lightning-datepicker label="Select a date"></lightning-datepicker>
+    </template>
+</template>

package/src/lightning/positionLibrary/__examples__/playground/playground.css

@@ -0,0 +1,84 @@
+.config {
+    background: white;
+    border-radius: 5px;
+    padding: 8px 15px 13px 15px;
+    position: fixed;
+    width: auto;
+    left: 10px;
+    right: 10px;
+}
+
+.config-bottom {
+    bottom: 130px;
+}
+
+.slds-col {
+    border-left: 1px solid #eef4ff;
+    border-right: 1px solid #eef4ff;
+}
+
+.container {
+    width: var(--containerWidth, 300px);
+    height: var(--containerHeight, 200px);
+    border: 3.5px solid #0176d3;
+}
+
+.container-text {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.container-placeholder {
+    background: transparent;
+    height: 1000px;
+    /* width: 50%;
+    margin: auto; */
+    word-wrap: break-word;
+}
+
+.top-left {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.top-right {
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.bottom-left {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+
+.bottom-right {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+
+.viewport-placeholder {
+    height: 200vh;
+    width: 50%;
+    background: transparent;
+}
+
+*::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 6px;
+}
+
+*::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+body {
+    overflow-y: auto;
+}

package/src/lightning/positionLibrary/__examples__/playground/playground.html

@@ -0,0 +1,122 @@
+<template>
+    <!-- Container -->
+    <div class={computedContainerClass}>
+        <p class="container-text">Container</p>
+
+        <template if:true={isUseShadowRootContainer}>
+            <positionLibrary-playground-shadow-scroll>
+                <positionLibrary-components
+                    component={selectedComponent}
+                    class={computedComponentClass}
+                ></positionLibrary-components>
+            </positionLibrary-playground-shadow-scroll>
+        </template>
+
+        <template if:false={isUseShadowRootContainer}>
+            <positionLibrary-components
+                component={selectedComponent}
+                class={computedComponentClass}
+            ></positionLibrary-components>
+        </template>
+
+        <template if:true={isContainerScroll}>
+            <div class="container-placeholder"></div>
+        </template>
+    </div>
+
+    <!-- Config panel -->
+    <div class={computedConfigClass}>
+        <div class="slds-text-heading_medium slds-m-bottom_x-small">
+            Configuration
+        </div>
+
+        <div class="slds-grid slds-gutters_small">
+            <div class="slds-col slds-size_1-of-5">
+                <lightning-combobox
+                    name="components"
+                    label="Select a component"
+                    placeholder="Please select"
+                    value={selectedComponent}
+                    options={componentOptions}
+                    onchange={handleComponentSelector}
+                >
+                </lightning-combobox>
+            </div>
+            <div class="slds-col slds-size_2-of-5">
+                <lightning-slider
+                    label="Container Width(px)"
+                    step="50"
+                    min="100"
+                    max="500"
+                    value={containerWidth}
+                    onchange={handleWidthSlider}
+                ></lightning-slider>
+                <lightning-slider
+                    label="Container Height(px)"
+                    step="50"
+                    min="100"
+                    max="500"
+                    value={containerHeight}
+                    onchange={handleHeightSlider}
+                ></lightning-slider>
+            </div>
+            <div class="slds-col slds-size_1-of-5">
+                <lightning-combobox
+                    name="containerPosition"
+                    label="Container Position"
+                    placeholder="Please select"
+                    value={containerPosition}
+                    options={positionOptions}
+                    onchange={handleContainerPosition}
+                >
+                </lightning-combobox>
+                <lightning-combobox
+                    name="componentPosition"
+                    label="Component Position"
+                    placeholder="Please select"
+                    value={componentPosition}
+                    options={positionOptions}
+                    onchange={handleComponentPosition}
+                >
+                </lightning-combobox>
+            </div>
+            <div class="slds-col slds-size_1-of-5">
+                <lightning-input
+                    type="toggle"
+                    name="container scrollbar"
+                    label="Container Scrollbar"
+                    message-toggle-active="Enabled"
+                    message-toggle-inactive="Disabled"
+                    checked={isContainerScroll}
+                    onchange={handleContainerScroll}
+                    disabled={isContainerScrollDisabled}
+                ></lightning-input>
+                <lightning-input
+                    type="toggle"
+                    name="viewport scrollbar"
+                    label="Viewport Scrollbar"
+                    message-toggle-active="Enabled"
+                    message-toggle-inactive="Disabled"
+                    checked={isViewportScroll}
+                    onchange={handleViewportScroll}
+                    class="slds-m-top_medium"
+                ></lightning-input>
+                <lightning-input
+                    type="toggle"
+                    name="ShadowRoot Container"
+                    label="ShadowRoot Container"
+                    message-toggle-active="Enabled"
+                    message-toggle-inactive="Disabled"
+                    checked={isUseShadowRootContainer}
+                    onchange={handleShadowContainer}
+                    class="slds-m-top_medium"
+                ></lightning-input>
+            </div>
+        </div>
+    </div>
+
+    <!-- Placeholder to enable scrollbar of viewport -->
+    <template if:true={isViewportScroll}>
+        <div class="viewport-placeholder"></div>
+    </template>
+</template>

package/src/lightning/positionLibrary/__examples__/playgroundShadowScroll/playgroundShadowScroll.html

@@ -0,0 +1,8 @@
+<template>
+    <div
+        style="overflow: auto; width: 100%; height: 100%; background: #f3f2f2"
+        onprivatescrollablecontainer={handleScroll}
+    >
+        <slot></slot>
+    </div>
+</template>

package/src/lightning/primitiveCoordinateItem/__examples__/basic/basic.html

@@ -0,0 +1,5 @@
+<template>
+    <lightning-primitive-coordinate-item item-title="P. Sherman" item-address="42 Wallaby Way, Sydney"
+        icon-name='standard:location' guid="guid">
+    </lightning-primitive-coordinate-item>
+</template>

package/src/lightning/progressBar/__examples__/basic/basic.html

@@ -0,0 +1,3 @@
+<template>
+    <lightning-progress-bar value="50" size="large"></lightning-progress-bar>
+</template>

package/src/lightning/progressBar/__examples__/inAction/inAction.html

@@ -0,0 +1,4 @@
+<template>
+    <lightning-progress-bar value={progress}></lightning-progress-bar>
+    <lightning-button label={computedLabel} onclick={toggleProgress} class="slds-m-top_medium"></lightning-button>
+</template>

package/src/lightning/progressBar/__examples__/variants/variants.html

@@ -0,0 +1,10 @@
+<template>
+    <p>
+        Below is a progressbar of variant base.
+    </p>
+    <lightning-progress-bar value="50" size="large"></lightning-progress-bar>
+    <p>
+        Below is a progressbar of variant circular.
+    </p>
+    <lightning-progress-bar value="50" size="large" variant="circular"></lightning-progress-bar>
+</template>

package/src/lightning/progressIndicator/__examples__/basic/basic.html

@@ -0,0 +1,11 @@
+<template>
+    <p>
+        A progress indicator displays the steps in a process. All steps preceding the step specified by currentStep are marked completed.
+    </p>
+    <lightning-progress-indicator current-step="3" type="base" has-error="true" variant="base">
+        <lightning-progress-step label="Step 1" value="1"></lightning-progress-step>
+        <lightning-progress-step label="Step 2" value="2"></lightning-progress-step>
+        <lightning-progress-step label="Step 3" value="3"></lightning-progress-step>
+        <lightning-progress-step label="Step 4" value="4"></lightning-progress-step>
+    </lightning-progress-indicator>
+</template>

package/src/lightning/progressIndicator/__examples__/pathType/pathType.html

@@ -0,0 +1,9 @@
+<template>
+    <lightning-progress-indicator current-step="3" type="path" variant="base">
+        <lightning-progress-step label="Contacted" value="1"></lightning-progress-step>
+        <lightning-progress-step label="Open" value="2"></lightning-progress-step>
+        <lightning-progress-step label="Unqualified" value="3"></lightning-progress-step>
+        <lightning-progress-step label="Nurturing" value="4"></lightning-progress-step>
+        <lightning-progress-step label="Closed" value="5"></lightning-progress-step>
+    </lightning-progress-indicator>
+</template>

package/src/lightning/progressIndicator/__examples__/pathTypeWithIfCondition/pathTypeWithIfCondition.html

@@ -0,0 +1,12 @@
+<template>
+    <lightning-progress-indicator current-step="step-3" type="path" variant="base">
+        <lightning-progress-step label="Contacted" value="step-1"></lightning-progress-step>
+        <lightning-progress-step label="Open" value="step-2"></lightning-progress-step>
+        <lightning-progress-step label="Unqualified" value="step-3"></lightning-progress-step>
+        <template if:true={showStep4}>
+            <lightning-progress-step label="Nurturing" value="step-4"></lightning-progress-step>
+        </template>
+        <lightning-progress-step label="Closed" value="step-5"></lightning-progress-step>
+    </lightning-progress-indicator>
+    <lightning-button label="Hide/Show Step 4" onclick={toggleStep4}></lightning-button>
+</template>

package/src/lightning/progressIndicator/__examples__/pathTypeWithIteration/pathTypeWithIteration.html

@@ -0,0 +1,7 @@
+<template>
+    <lightning-progress-indicator current-step="step-3" type="path" variant="base">
+        <template for:each={steps} for:item="step">
+            <lightning-progress-step label={step.label} value={step.value} key={step.label}></lightning-progress-step>
+        </template>
+    </lightning-progress-indicator>
+</template>

package/src/lightning/progressRing/__examples__/base/base.html

@@ -0,0 +1,7 @@
+<template>
+    <lightning-progress-ring value="0"> </lightning-progress-ring>
+    <lightning-progress-ring value="25"> </lightning-progress-ring>
+    <lightning-progress-ring value="50"> </lightning-progress-ring>
+    <lightning-progress-ring value="75"> </lightning-progress-ring>
+    <lightning-progress-ring value="100"> </lightning-progress-ring>
+</template>

package/src/lightning/progressRing/__examples__/drain/drain.html

@@ -0,0 +1,7 @@
+<template>
+    <lightning-progress-ring value="100" direction="drain"> </lightning-progress-ring>
+    <lightning-progress-ring value="75" direction="drain"> </lightning-progress-ring>
+    <lightning-progress-ring value="50" direction="drain"> </lightning-progress-ring>
+    <lightning-progress-ring value="25" direction="drain"> </lightning-progress-ring>
+    <lightning-progress-ring value="0" direction="drain"> </lightning-progress-ring>
+</template>

package/src/lightning/progressRing/__examples__/interactive/interactive.html

@@ -0,0 +1,69 @@
+<template>
+    <div class="slds-m-bottom_medium">
+        <lightning-slider
+            onchange={sliderChange}
+            value={sliderValue}
+            label="Value"
+        ></lightning-slider>
+        <lightning-input
+            type="toggle"
+            label="Direction"
+            name="direction"
+            checked
+            onchange={directionChange}
+            message-toggle-active="Fill"
+            message-toggle-inactive="Drain"
+        ></lightning-input>
+    </div>
+
+    <div class="slds-m-bottom_small">
+        <span class="slds-m-right_small">
+            variant: base
+        </span>
+        <lightning-progress-ring
+            value={sliderValue}
+            direction={direction}
+            variant="base"
+        ></lightning-progress-ring>
+    </div>
+    <div class="slds-m-bottom_small">
+        <span class="slds-m-right_small">
+            variant: base-autocomplete
+        </span>
+        <lightning-progress-ring
+            value={sliderValue}
+            direction={direction}
+            variant="base-autocomplete"
+        ></lightning-progress-ring>
+    </div>
+    <div class="slds-m-bottom_small">
+        <span class="slds-m-right_small">
+            variant: active-step
+        </span>
+        <lightning-progress-ring
+            value={sliderValue}
+            direction={direction}
+            variant="active-step"
+        ></lightning-progress-ring>
+    </div>
+    <div class="slds-m-bottom_small">
+        <span class="slds-m-right_small">
+            variant: warning
+        </span>
+        <lightning-progress-ring
+            value={sliderValue}
+            direction={direction}
+            variant="warning"
+        ></lightning-progress-ring>
+    </div>
+    <div class="slds-m-bottom_small">
+        <span class="slds-m-right_small">
+            variant: expired
+        </span>
+        <lightning-progress-ring
+            value={sliderValue}
+            direction={direction}
+            variant="expired"
+        ></lightning-progress-ring>
+    </div>
+</template>

package/src/lightning/progressRing/__examples__/large/large.html

@@ -0,0 +1,4 @@
+<template>
+    <lightning-progress-ring value="75"></lightning-progress-ring>
+    <lightning-progress-ring value="75" size="large"> </lightning-progress-ring>
+</template>

package/src/lightning/progressRing/__examples__/variantActiveStep/variantActiveStep.html

@@ -0,0 +1,3 @@
+<template>
+    <lightning-progress-ring value="75" variant="active-step"> </lightning-progress-ring>
+</template>

package/src/lightning/progressRing/__examples__/variantBaseAutocomplete/variantBaseAutocomplete.html

@@ -0,0 +1,6 @@
+<template>
+    <lightning-progress-ring value="75" variant="base-autocomplete">
+    </lightning-progress-ring>
+    <lightning-progress-ring value="100" variant="base-autocomplete">
+    </lightning-progress-ring>
+</template>

package/src/lightning/progressRing/__examples__/variantExpired/variantExpired.html

@@ -0,0 +1,3 @@
+<template>
+    <lightning-progress-ring value="75" variant="expired"> </lightning-progress-ring>
+</template>

package/src/lightning/progressRing/__examples__/variantWarning/variantWarning.html

@@ -0,0 +1,3 @@
+<template>
+    <lightning-progress-ring value="75" variant="warning"> </lightning-progress-ring>
+</template>

package/src/lightning/progressStep/__examples__/basic/basic.html

@@ -0,0 +1,11 @@
+<template>
+    <p>
+        The steps are shown within a lightning-progress-indicator here.
+    </p>
+    <lightning-progress-indicator current-step="3" type="base" has-error="true" variant="base">
+        <lightning-progress-step label="Step 1" value="1"></lightning-progress-step>
+        <lightning-progress-step label="Step 2" value="2"></lightning-progress-step>
+        <lightning-progress-step label="Step 3" value="3"></lightning-progress-step>
+        <lightning-progress-step label="Step 4" value="4"></lightning-progress-step>
+    </lightning-progress-indicator>
+</template>

package/src/lightning/progressStep/__examples__/shaded/shaded.html

@@ -0,0 +1,11 @@
+<template>
+    <p>
+        The shaded steps are shown within a lightning-progress-indicator here.
+    </p>
+    <lightning-progress-indicator current-step="3" type="base" has-error="true" variant="shade">
+        <lightning-progress-step label="Step 1" value="1"></lightning-progress-step>
+        <lightning-progress-step label="Step 2" value="2"></lightning-progress-step>
+        <lightning-progress-step label="Step 3" value="3"></lightning-progress-step>
+        <lightning-progress-step label="Step 4" value="4"></lightning-progress-step>
+    </lightning-progress-indicator>
+</template>

package/src/lightning/radioGroup/__examples__/basic/basic.html

@@ -0,0 +1,7 @@
+<template>
+    <lightning-radio-group name="radioGroup"
+                          label="Radio Group"
+                          options={options}
+                          value={value}
+                          type="radio"></lightning-radio-group>
+</template>

package/src/lightning/radioGroup/__examples__/button/button.html

@@ -0,0 +1,7 @@
+<template>
+    <lightning-radio-group name="radioGroup"
+                          label="Radio Group"
+                          options={options}
+                          value={value}
+                          type="button"></lightning-radio-group>
+</template>