@salesforcedevs/arch-components 1.20.17-alpha9 → 1.25.0

package/src/modules/arch/dialog/dialog.ts

@@ -0,0 +1,154 @@
+import {
+    Instance as PopperInstance,
+    Placement as PopperPlacement
+} from '@popperjs/core';
+
+export type DialogState = {
+    isOpen?: boolean;
+};
+
+export type Placement =
+    | 'top'
+    | 'top left'
+    | 'top right'
+    | 'right'
+    | 'right top'
+    | 'right bottom'
+    | 'bottom'
+    | 'bottom left'
+    | 'bottom right'
+    | 'left'
+    | 'left top'
+    | 'left bottom';
+
+const DEFAULT_PLACEMENT = 'top';
+const NUBBIN_SIZE = 14;
+
+export class Dialog {
+    constructor(
+        private trigger: HTMLElement,
+        private dialog: HTMLElement,
+        private options: {
+            placement?: Placement;
+            onChange?: (Partial: DialogState) => void;
+        } = {}
+    ) {
+        this.create();
+    }
+
+    popper: PopperInstance | null = null;
+
+    private _state: DialogState = { isOpen: false };
+
+    get state(): DialogState {
+        return this._state;
+    }
+
+    set state(nextState: DialogState) {
+        this._state = { ...this._state, ...nextState };
+
+        if (this.options.onChange) {
+            this.options.onChange(this.state);
+        }
+    }
+
+    private async create() {
+        const modifiers = [
+            {
+                name: 'flip',
+                options: {
+                    padding: NUBBIN_SIZE
+                }
+            },
+            {
+                name: 'hide',
+                enabled: false
+            },
+            {
+                name: 'preventOverflow',
+                options: {
+                    padding: {
+                        top: 2,
+                        bottom: 2,
+                        left: 5,
+                        right: 5
+                    }
+                }
+            },
+            {
+                name: 'offset',
+                options: {
+                    offset: ({ placement, reference }: any) => {
+                        if (placement.match(/^(top|bottom)/)) {
+                            return [0, NUBBIN_SIZE];
+                        }
+
+                        if (placement.match(/end?/)) {
+                            return [(reference.height / 2) * 1, NUBBIN_SIZE];
+                        }
+
+                        if (placement.match(/start?/)) {
+                            return [(reference.height / 2) * -1, NUBBIN_SIZE];
+                        }
+
+                        return [0, NUBBIN_SIZE];
+                    }
+                }
+            }
+        ];
+        const { createPopper } = await import('@popperjs/core');
+
+        this.popper = createPopper(this.trigger, this.dialog, {
+            placement: this.getPlacement(this.options.placement),
+            modifiers
+        });
+
+        // Show
+        this.trigger.addEventListener('mouseenter', this.show.bind(this));
+        this.trigger.addEventListener('focusin', this.show.bind(this));
+
+        // Hide
+        this.trigger.addEventListener('mouseleave', this.hide.bind(this));
+        this.trigger.addEventListener('focusout', this.hide.bind(this));
+    }
+
+    destroy() {
+        this.popper!.destroy();
+        this.popper = null;
+    }
+
+    private async show() {
+        await this.popper!.update();
+        this.state = { isOpen: true };
+    }
+
+    private hide() {
+        this.state = { isOpen: false };
+    }
+
+    // Map the "placement" property used by SLDS to the correct Popper "placement"
+    private getPlacement(
+        placement: Placement = DEFAULT_PLACEMENT
+    ): PopperPlacement {
+        switch (placement) {
+            case 'top left':
+                return 'top-start';
+            case 'top right':
+                return 'top-end';
+            case 'right top':
+                return 'right-start';
+            case 'right bottom':
+                return 'right-end';
+            case 'bottom left':
+                return 'bottom-start';
+            case 'bottom right':
+                return 'bottom-end';
+            case 'left top':
+                return 'left-start';
+            case 'left bottom':
+                return 'left-end';
+            default:
+                return placement;
+        }
+    }
+}

package/src/modules/arch/dialogStyles/dialogStyles.css

@@ -0,0 +1,90 @@
+@import 'arch/reset';
+
+:host {
+    --nubbin-size: 14px;
+}
+
+[aria-hidden='true'] {
+    visibility: hidden;
+    pointer-events: none;
+}
+
+.with-nubbin::before,
+.with-nubbin::after {
+    content: '';
+    width: var(--nubbin-size);
+    height: var(--nubbin-size);
+    transform: rotate(45deg);
+    position: absolute;
+    z-index: -1;
+}
+
+.with-nubbin::before {
+    background-color: inherit;
+}
+
+.with-nubbin::after {
+    box-shadow: var(--arch-shadow-sm);
+}
+
+.with-nubbin[data-popper-placement^='top']::before,
+.with-nubbin[data-popper-placement^='top']::after {
+    bottom: calc(var(--nubbin-size) / 2 * -1);
+}
+
+.with-nubbin[data-popper-placement^='bottom']::before,
+.with-nubbin[data-popper-placement^='bottom']::after {
+    top: calc(var(--nubbin-size) / 2 * -1);
+}
+
+.with-nubbin[data-popper-placement^='right']::before,
+.with-nubbin[data-popper-placement^='right']::after {
+    left: calc(var(--nubbin-size) / 2 * -1);
+}
+
+.with-nubbin[data-popper-placement^='left']::before,
+.with-nubbin[data-popper-placement^='left']::after {
+    right: calc(var(--nubbin-size) / 2 * -1);
+}
+
+.with-nubbin[data-popper-placement='top']::before,
+.with-nubbin[data-popper-placement='bottom']::before,
+.with-nubbin[data-popper-placement='top']::after,
+.with-nubbin[data-popper-placement='bottom']::after {
+    left: calc(50% - var(--nubbin-size) / 2);
+}
+
+.with-nubbin[data-popper-placement='top-start']::before,
+.with-nubbin[data-popper-placement='bottom-start']::before,
+.with-nubbin[data-popper-placement='top-start']::after,
+.with-nubbin[data-popper-placement='bottom-start']::after {
+    left: var(--nubbin-size);
+}
+
+.with-nubbin[data-popper-placement='top-end']::before,
+.with-nubbin[data-popper-placement='bottom-end']::before,
+.with-nubbin[data-popper-placement='top-end']::after,
+.with-nubbin[data-popper-placement='bottom-end']::after {
+    right: var(--nubbin-size);
+}
+
+.with-nubbin[data-popper-placement='right']::before,
+.with-nubbin[data-popper-placement='left']::before,
+.with-nubbin[data-popper-placement='right']::after,
+.with-nubbin[data-popper-placement='left']::after {
+    top: calc(50% - var(--nubbin-size) / 2);
+}
+
+.with-nubbin[data-popper-placement='right-start']::before,
+.with-nubbin[data-popper-placement='left-start']::before,
+.with-nubbin[data-popper-placement='right-start']::after,
+.with-nubbin[data-popper-placement='left-start']::after {
+    top: var(--nubbin-size);
+}
+
+.with-nubbin[data-popper-placement='right-end']::before,
+.with-nubbin[data-popper-placement='left-end']::before,
+.with-nubbin[data-popper-placement='right-end']::after,
+.with-nubbin[data-popper-placement='left-end']::after {
+    bottom: var(--nubbin-size);
+}

package/src/modules/arch/effectAdapter/effectAdapter.html

@@ -0,0 +1 @@
+<template></template>

package/src/modules/arch/effectAdapter/effectAdapter.ts

@@ -0,0 +1,28 @@
+/* eslint-disable @lwc/lwc/no-disallowed-lwc-imports */
+import { WireAdapter } from "lwc";
+
+export type EffectAdapterConfig = {};
+
+export class EffectAdapter
+    implements WireAdapter<EffectAdapterConfig, EffectAdapterConfig, void>
+{
+    private setValue: (value: EffectAdapterConfig) => void;
+
+    constructor(setValue: (value: EffectAdapterConfig) => void) {
+        this.setValue = setValue;
+    }
+
+    connect() {
+        // Required by WireAdapter interface
+    }
+
+    disconnect() {
+        // Required by WireAdapter interface
+    }
+
+    update(config: EffectAdapterConfig) {
+        this.setValue(config);
+    }
+}
+
+export default EffectAdapter;

package/src/modules/arch/explorer/explorer.css

@@ -0,0 +1,301 @@
+@import "arch/reset";
+
+:host {
+    font-size: var(--arch-font-size-md);
+}
+
+.filter-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.filter-title {
+    display: inline-block;
+    margin-right: var(--arch-spacing-8);
+}
+
+.filter-header h2 {
+    font-size: var(--arch-font-size-lg);
+}
+
+.filter-form {
+    margin-bottom: var(--arch-spacing-2);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.filter-form > * {
+    margin-right: var(--arch-spacing-4);
+    margin-left: var(--arch-spacing-4);
+}
+
+.filter-form arch-select {
+    flex: 1;
+}
+
+.filter-form .search-input {
+    flex-basis: 100%;
+}
+
+.search-input {
+    width: 60%;
+    box-sizing: border-box;
+}
+
+.search-input-wrapper {
+    align-items: stretch;
+    display: flex;
+    position: relative;
+    margin-bottom: var(--arch-spacing-4);
+}
+
+.search-input-label {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
+    display: block;
+    padding-right: var(--arch-spacing-2);
+    padding-top: var(--arch-spacing-2);
+    color: var(--arch-color-meteorite);
+    font-size: var(--arch-font-size-xs);
+    margin-bottom: var(--arch-spacing-2);
+}
+
+.search-input-input {
+    border-radius: var(--arch-radius-md);
+    border: 1px solid var(--arch-color-fog);
+    color: var(--arch-color-black);
+    flex: 1;
+    font-family: inherit;
+    font-size: var(--arch-font-size-md);
+    line-height: 1.875;
+    overflow: hidden;
+    padding: 0.4rem 0;
+    padding-left: var(--arch-spacing-8);
+    position: relative;
+    text-overflow: ellipsis;
+    transition: border 0.1s linear, background-color 0.1s linear;
+    white-space: nowrap;
+}
+
+.search-input-icon {
+    color: var(--arch-color-granite);
+    left: 10px;
+    position: absolute;
+    top: 13px;
+    z-index: 1;
+}
+
+.table-summary {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.table-summary .page-size-controls {
+    flex-basis: 25%;
+}
+
+.table-summary .page-size-controls,
+.table-summary .export-buttons {
+    display: flex;
+    align-items: center;
+}
+
+.table-summary .export-buttons {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-align: right;
+}
+
+.table-summary .page-size-controls div,
+.table-summary .export-buttons div {
+    margin-right: 0.5rem;
+    color: var(--arch-color-meteorite);
+}
+
+.table-summary .export-buttons > * {
+    margin-right: 0.5rem;
+}
+
+.table-summary .filter-stats {
+    text-align: center;
+    color: var(--arch-color-meteorite);
+    margin-bottom: var(--arch-spacing-4);
+}
+
+table {
+    width: 100%;
+    margin: 0 auto;
+    border-collapse: separate;
+    border-spacing: 0;
+    border-right: 1px solid #dddbda;
+    border-left: 1px solid #dddbda;
+    border-bottom: 1px solid #111;
+    vertical-align: middle;
+    margin-bottom: var(--arch-spacing-8);
+}
+
+thead {
+    display: table-header-group;
+    border-color: inherit;
+}
+
+th {
+    background-color: #ebf5ff;
+    border-top: 1px solid #dddbda;
+    border-bottom: 1px solid #111;
+    padding: 1rem;
+    vertical-align: middle;
+    text-align: left;
+}
+
+tr {
+    display: table-row;
+    vertical-align: middle;
+}
+
+tr:nth-child(even) td {
+    background: #fafaf9;
+}
+
+tr td:first-child {
+    border-left: 3px solid transparent;
+}
+
+tr td:last-child {
+    border-right: 3px solid transparent;
+}
+
+tr:hover td {
+    box-shadow: #dddbda 0 -1px 0 inset, #dddbda 0 1px 0 inset;
+    background: #fafaf9;
+}
+
+tr:hover td:first-child {
+    border-left: 3px solid var(--arch-color-brand);
+}
+
+tr:hover td:last-child {
+    border-right: 3px solid var(--arch-color-brand);
+}
+
+td {
+    padding: 0.75rem 1rem;
+    border-top: 1px solid #dddbda;
+    border-bottom: 1px solid #dddbda;
+}
+
+.status {
+    text-align: center;
+}
+
+td.empty-table {
+    height: 20rem;
+    text-align: center;
+    pointer-events: none;
+}
+
+td.empty-table arch-spinner {
+    display: inline-block;
+}
+
+button.link {
+    background: none;
+    border-width: 0;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.pagination-controls {
+    display: flex;
+    justify-content: center;
+    margin-bottom: var(--arch-spacing-4);
+}
+
+.pagination-controls arch-button {
+    padding: 0 1rem;
+}
+
+.safe-harbor {
+    border-radius: 10px;
+    border: 1px solid gray;
+    padding: 20px;
+    margin-bottom: 20px;
+}
+
+.safe-harbor img {
+    margin-right: 10px;
+    float: left;
+}
+
+@media screen and (max-width: 48rem) {
+    .filter-header {
+        flex-direction: column-reverse;
+    }
+
+    .filter-header div {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .filter-header arch-social-share {
+        margin-bottom: var(--arch-spacing-6);
+    }
+
+    .table-summary {
+        flex-direction: column;
+    }
+
+    .table-wrapper {
+        overflow-x: scroll;
+    }
+
+    .pagination-controls-top,
+    .export-label {
+        display: none;
+    }
+}
+
+.row-title p {
+    font-weight: normal;
+}
+
+.row-pattern {
+    font-size: var(--arch-font-size-sm);
+    margin-bottom: 1rem;
+    color: #3e3e3c;
+    padding-left: 1rem;
+    width: 50%;
+    align-items: left;
+    flex: 1;
+}
+
+.row-pattern p {
+    font-weight: normal;
+}
+
+.row-pattern a {
+    color: var(--arch-color-brand);
+    text-decoration: none;
+}
+
+.row-pattern a:hover {
+    text-decoration: underline;
+}
+
+.selected-pills {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.selected-pills > div {
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+    background-color: white;
+}