@salesforcedevs/arch-components 1.20.17-alpha12 → 1.20.17-alpha13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/arch-components",
-    "version": "1.20.17-alpha12",
+    "version": "1.20.17-alpha13",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/arch/context/context.html

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

package/src/modules/arch/context/context.ts

@@ -0,0 +1,137 @@
+import {
+    ContextConsumer,
+    createContextProvider,
+    Contextualizer,
+    LightningElement,
+    wire,
+    WireAdapter
+} from 'lwc';
+
+import { EffectAdapter } from 'common/effectAdapter';
+
+export interface ContextWireAdapter<Value, Config, Context>
+    extends WireAdapter<Value, Config, Context> {
+    value: Value;
+}
+export interface ContextWireAdapterConstructor<Value, Config, Context> {
+    new (setValue: (value: Value) => void): ContextWireAdapter<
+        Value,
+        Config,
+        Context
+    >;
+    setGlobalContext(context: Context): void;
+    setDefaultValue(value: Value): void;
+}
+
+export function createContextAdapter<Value, Config, Context>(
+    initDefaultValue: () => Value,
+    schema: Record<keyof Context, string>
+): ContextWireAdapterConstructor<Value, Config, Context> {
+    const adapters = new Set<ContextWireAdapter<Value, Config, Context>>();
+
+    let globalContext: Context;
+    let defaultValue: Value;
+
+    return class ContextAdapter
+        implements ContextWireAdapter<Value, Config, Context>
+    {
+        static contextSchema = schema;
+
+        static setGlobalContext(context: Context) {
+            globalContext = context;
+            (adapters as Set<ContextAdapter>).forEach((adapter) =>
+                adapter.setValue(adapter.value)
+            );
+        }
+
+        static setDefaultValue(value: Value) {
+            defaultValue = value;
+        }
+
+        constructor(public setValue: (value: Value) => void) {
+            if (!defaultValue) {
+                defaultValue = initDefaultValue();
+            }
+        }
+
+        private config?: Config;
+        private context?: Context;
+
+        get value(): Value {
+            return {
+                ...defaultValue,
+                ...compactConfig<Context>(globalContext),
+                ...compactConfig<Context>(this.context),
+                ...compactConfig<Config>(this.config)
+            };
+        }
+
+        connect() {
+            adapters.add(this);
+            this.setValue(this.value);
+        }
+
+        disconnect() {
+            adapters.delete(this);
+        }
+
+        update(config: Config, context?: Context) {
+            this.config = config;
+            this.context = context;
+            this.setValue(this.value);
+        }
+    };
+}
+
+function compactConfig<T>(config?: T) {
+    return Object.fromEntries(
+        Object.entries({ ...config }).filter(
+            ([key, value]) => typeof value !== 'undefined' && value !== null
+        )
+    );
+}
+
+export function createBaseContextProviderElement<Value, Config, Context>(
+    adapterClass: ContextWireAdapterConstructor<Value, Config, Context>
+) {
+    const contextualizer = createContextProvider(adapterClass);
+
+    return class ProviderElement extends BaseProvider<Context> {
+        public get contextualizer() {
+            return contextualizer;
+        }
+    };
+}
+
+class BaseProvider<Context> extends LightningElement {
+    private consumers = new Set<ContextConsumer<Context>>();
+
+    public get contextualizer(): Contextualizer<Context> {
+        throw new Error('contextualizer not implenented');
+    }
+
+    @wire(EffectAdapter, {
+        localContext: '$localContext'
+    })
+    private updateConsumers({ localContext }: { localContext: Context }) {
+        for (let consumer of this.consumers) {
+            consumer.provide(localContext);
+        }
+    }
+
+    public get localContext(): Context {
+        return {} as Context;
+    }
+
+    connectedCallback() {
+        this.contextualizer!(this, {
+            consumerConnectedCallback: (consumer) => {
+                this.consumers.add(consumer);
+                consumer.provide(this.localContext);
+            },
+            consumerDisconnectedCallback: (consumer) => {
+                this.consumers.delete(consumer);
+            }
+        });
+    }
+}

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

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

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

@@ -0,0 +1,18 @@
+import { WireAdapter } from 'lwc';
+
+export type EffectAdapterConfig<T> = {};
+
+export class EffectAdapter<T>
+    implements
+        WireAdapter<EffectAdapterConfig<T>, EffectAdapterConfig<T>, void>
+{
+    constructor(private setValue: (value: EffectAdapterConfig<T>) => void) {}
+
+    connect() {}
+
+    disconnect() {}
+
+    update(config: EffectAdapterConfig<T>) {
+        this.setValue(config);
+    }
+}

package/src/modules/arch/reflectedElement/reflectedElement.ts

@@ -0,0 +1,50 @@
+/**
+ * @file
+ * This element copies the innerHTML of the host (Light DOM)
+ * to the innerHTML of the element (Shadow DOM) returned by
+ * contentElement() (which must use the lwc:dom="manual" directive).
+ */
+import { LightningElement } from 'lwc';
+
+export class ReflectedElement extends LightningElement {
+    private observer!: MutationObserver;
+    private didSetContent = false;
+
+    get contentElement(): Element {
+        throw new Error('Not Implemented');
+    }
+
+    connectedCallback() {
+        this.observer = new MutationObserver((e) => {
+            this.setContent();
+        });
+        this.observer.observe(this.template.host, {
+            characterData: true,
+            childList: true,
+            subtree: true
+        });
+    }
+
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
+
+    innerHTMLSetCallback() {}
+
+    renderedCallback() {
+        if (!this.didSetContent) {
+            this.didSetContent = true;
+            this.setContent();
+        }
+    }
+
+    transformHTML(html: string): string {
+        return html;
+    }
+
+    private setContent() {
+        const element = this.contentElement;
+        element.innerHTML = this.transformHTML(this.template.host.innerHTML);
+        this.innerHTMLSetCallback();
+    }
+}

package/src/modules/arch/slot/slot.ts

@@ -0,0 +1,20 @@
+export function assignedSlotNames(template: {
+    querySelectorAll(selector: string): NodeList;
+}) {
+    let slots = Array.from(
+        template.querySelectorAll('slot')
+    ) as HTMLSlotElement[];
+    return slots
+        .filter(isSlotAssigned)
+        .map((slot) => slot.getAttribute('name') || 'default');
+}
+
+export function isSlotAssigned(slot: HTMLSlotElement): boolean {
+    let [element] = slot.assignedElements();
+    if (element) {
+        if (element.tagName === 'SLOT')
+            return isSlotAssigned(element as HTMLSlotElement);
+        return true;
+    }
+    return slot.children.length > 0;
+}

package/src/modules/arch/alert/alert.css

@@ -1,103 +0,0 @@
-@import "dxHelpers/reset";
-@import "dxHelpers/text";
-
-:host {
-    --dx-c-alert-top: 0;
-    --dx-c-alert-container-align-items: flex-start;
-    --dx-c-alert-vertical-padding: var(--dx-g-spacing-md);
-    --dx-c-alert-success-color: var(--dx-g-green-vibrant-95);
-    --dx-c-alert-warning-color: rgb(254 243 217);
-    --dx-c-alert-danger-color: var(--dx-g-red-vibrant-95);
-    --dx-c-alert-success-accent-color: var(--dx-g-green-vibrant-80);
-    --dx-c-alert-warning-accent-color: var(--dx-g-yellow-vibrant-80);
-    --dx-c-alert-danger-accent-color: var(--dx-g-red-vibrant-50);
-}
-
-.alert-icon {
-    margin-right: var(--dx-g-spacing-md);
-}
-
-.alert-base {
-    padding: var(--dx-c-alert-vertical-padding);
-}
-
-.alert-container {
-    display: flex;
-    flex-direction: column;
-    align-items: var(--dx-c-alert-container-align-items);
-    padding-left: var(--dx-g-global-header-padding-horizontal);
-    padding-right: var(--dx-g-global-header-padding-horizontal);
-    width: 100%;
-    border: none;
-}
-
-.alert-container.alert-type-success {
-    background-color: var(--dx-c-alert-success-color);
-    border-color: var(--dx-c-alert-success-accent-color);
-}
-
-.alert-container.alert-type-warning {
-    background-color: var(--dx-c-alert-warning-color);
-    border-color: var(--dx-c-alert-warning-accent-color);
-}
-
-.alert-container.alert-type-danger {
-    background-color: var(--dx-c-alert-danger-color);
-    border-color: var(--dx-c-alert-danger-accent-color);
-}
-
-.alert-container.alert-variant-accented {
-    border-style: solid;
-    border-width: 0;
-    border-left-width: 4px;
-}
-
-.alert-title-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
-}
-
-.alert-title {
-    font-weight: var(--dx-g-font-bold);
-}
-
-dx-button {
-    margin-left: auto;
-}
-
-/*
-    NOTE: Here we are assuming that indicator height won't go beyond 1000px.
-
-    It's one of the suggested way to achieve the expand/collapse animation
-    Ref: https://stackoverflow.com/a/41164095
-
-    Otherwise we need to change the height when user clicks on button
-    Ref: https://stackoverflow.com/a/11837673
-*/
-
-.alert-body {
-    display: block;
-    max-height: 1000px;
-    overflow: hidden;
-    padding-top: var(--dx-g-spacing-smd);
-    transition: max-height 0.25s ease, padding 0.25s ease;
-}
-
-.alert-body-hidden {
-    max-height: 0;
-    padding-top: 0;
-    transition: max-height 0.1s ease-out, padding 0.25s ease-out;
-}
-
-.alert-body a {
-    color: var(--dx-g-blue-vibrant-50);
-}
-
-/* Small Devices */
-@media screen and (max-width: 480px) {
-    .alert-container {
-        padding: var(--dx-c-alert-vertical-padding);
-    }
-}

package/src/modules/arch/alert/alert.html

@@ -1,37 +0,0 @@
-<template>
-    <div class={className} part="container">
-        <div class="alert-title-container">
-            <dx-icon
-                class="alert-icon"
-                symbol={iconName}
-                sprite={iconSprite}
-                size="large"
-                color={iconColor}
-            ></dx-icon>
-            <p class="alert-title dx-text-body-3">{alertTitle}</p>
-            <dx-button
-                lwc:if={hideable}
-                variant="inline"
-                onclick={onShowHide}
-                aria-label={hideBodyText}
-            >
-                {hideBodyText}
-            </dx-button>
-            <dx-button
-                lwc:if={dismissible}
-                aria-label="Dismiss"
-                icon-color="status-icon-color"
-                icon-size="large"
-                icon-symbol="close"
-                onclick={onDismiss}
-                variant="icon-only"
-            ></dx-button>
-        </div>
-        <!--
-            NOTE: Here we are rendering mark up using lwc:dom & innerHTML
-            option instead of slots because the html markup will come as a
-            property to the component from a configuration
-        -->
-        <span lwc:dom="manual" class={bodyClassName}></span>
-    </div>
-</template>

package/src/modules/arch/alert/alert.ts

@@ -1,137 +0,0 @@
-import { LightningElement, api } from "lwc";
-import cx from "classnames";
-
-import { AlertInfo } from "typings/custom";
-import { toJson } from "dxUtils/normalizers";
-
-export default class Alert extends LightningElement {
-    _alertInfo: AlertInfo | null = null;
-    _dismissible = false;
-    _iconName = "";
-    _iconSprite = "";
-    _iconColor = "";
-    @api control: "none" | "hideable" | "dismissible" = "none";
-    @api type: "success" | "warning" | "danger" = "warning";
-    @api variant: "base" | "accented" = "base";
-
-    @api
-    get alertInfo(): AlertInfo | null {
-        return this._alertInfo;
-    }
-    set alertInfo(value) {
-        this._alertInfo = toJson(value);
-    }
-
-    @api
-    get iconColor(): string {
-        return this._iconColor || this.variant === "base"
-            ? "gray-10"
-            : this.accentedIconColor;
-    }
-    set iconColor(value) {
-        if (value) {
-            this._iconColor = value;
-        }
-    }
-
-    @api
-    get iconName(): string {
-        return this._iconName || this.type === "success"
-            ? "check-circle"
-            : "warning";
-    }
-    set iconName(value) {
-        if (value) {
-            this._iconName = value;
-        }
-    }
-
-    @api
-    get iconSprite(): string {
-        return this._iconSprite || this.type === "success"
-            ? "general"
-            : "utility";
-    }
-    set iconSprite(value) {
-        if (value) {
-            this._iconSprite = value;
-        }
-    }
-
-    get accentedIconColor() {
-        const baseColor =
-            this.type === "danger"
-                ? "red"
-                : this.type === "warning"
-                ? "yellow"
-                : "green";
-        return `${baseColor}-vibrant-50`;
-    }
-
-    get dismissible(): boolean {
-        return this.control === "dismissible";
-    }
-
-    get hideable(): boolean {
-        return this.control === "hideable";
-    }
-
-    get alertTitle() {
-        return this.alertInfo?.title;
-    }
-
-    get hideBodyText() {
-        return this.isBodyHidden ? "Show" : "Hide";
-    }
-
-    get alertType() {
-        return this.type || "warning";
-    }
-
-    get alertVariant() {
-        return this.variant || "base";
-    }
-
-    get className() {
-        return cx(
-            "alert-base",
-            "alert-container",
-            `alert-variant-${this.alertVariant}`,
-            `alert-type-${this.alertType}`
-        );
-    }
-
-    get bodyClassName() {
-        return cx(
-            "alert-body",
-            "dx-text-body-3",
-            this.isBodyHidden && "alert-body-hidden"
-        );
-    }
-
-    isBodyHidden = false;
-
-    renderedCallback() {
-        const phaseBodyContainer = this.template.querySelector(".alert-body");
-        if (phaseBodyContainer && this.alertInfo) {
-            // eslint-disable-next-line @lwc/lwc/no-inner-html
-            phaseBodyContainer.innerHTML = this.alertInfo.body;
-        }
-    }
-
-    onShowHide() {
-        this.isBodyHidden = !this.isBodyHidden;
-    }
-
-    onDismiss() {
-        this.dispatchEvent(
-            new CustomEvent("dismissphase", {
-                detail: {
-                    alertInfo: this.alertInfo
-                },
-                composed: true,
-                bubbles: true
-            })
-        );
-    }
-}