@uxland/primary-shell 4.3.0 → 5.0.0

package/dist/primary/shell/src/UI/shared-components/primaria-interaction/notify.d.ts

@@ -1,4 +0,0 @@
-import { NotifyOptions } from './typings';
-
-export declare function generateId(): string;
-export declare const notify: (options: NotifyOptions) => void;

package/dist/primary/shell/src/UI/shared-components/primaria-interaction/open-dialog.d.ts

@@ -1,3 +0,0 @@
-import { DialogOptions } from './typings';
-
-export declare const openDialog: (options: DialogOptions | any) => void;

package/dist/primary/shell/src/UI/shared-components/primaria-interaction/shared.d.ts

@@ -1,3 +0,0 @@
-import { ConfirmOptions, ConfirmResult, CustomConfirmOptions, DialogOptions } from './typings';
-
-export declare const buildDialogComponent: (options: DialogOptions & ConfirmOptions & CustomConfirmOptions) => Promise<ConfirmResult>;

package/dist/primary/shell/src/UI/shared-components/primaria-interaction/typings.d.ts

@@ -1,40 +0,0 @@
-import { LitElement } from 'lit';
-
-export declare type Constructor<T = Record<string, unknown>> = new (...args: any[]) => T;
-export interface ConfirmOptions {
-    title: string;
-    message: string;
-    type: ConfirmType;
-    acceptLabel: string;
-    cancelLabel: string;
-}
-export interface CustomConfirmOptions<T = any> {
-    title: string;
-    componentConstructor: Constructor<LitElement | any>;
-    type: ConfirmType;
-    acceptLabel?: string;
-    cancelLabel?: string;
-    model?: T;
-    fullCustomization?: boolean;
-}
-export interface DialogOptions<T = any> {
-    title: string;
-    componentConstructor: Constructor<LitElement | any>;
-    model?: T;
-    showCloseButton?: boolean;
-    fullCustomization?: boolean;
-}
-export type ConfirmType = "danger" | "warning" | "info" | "success";
-export interface NotifyOptions {
-    message?: string;
-    type?: NotifyType;
-    position?: NotifyPosition;
-    order?: string;
-}
-export interface ConfirmResult<T = any> {
-    confirmed: boolean;
-    outputModel?: T;
-}
-export type NotifyOrder = "first" | "second" | "third" | "fourth" | "fifth";
-export type NotifyPosition = "bottom" | "center" | "top";
-export type NotifyType = "warning" | "info" | "success" | "error";

package/dist/primary/shell/src/api/interaction-manager/interaction.d.ts

@@ -1,9 +0,0 @@
-import { ConfirmOptions, ConfirmResult, CustomConfirmOptions, DialogOptions, NotifyOptions } from '../../UI/shared-components/primaria-interaction';
-
-export interface PrimariaInteractionManager {
-    notify(options: NotifyOptions): void;
-    confirm(options: ConfirmOptions): Promise<ConfirmResult>;
-    customConfirm(options: CustomConfirmOptions): Promise<ConfirmResult>;
-    openDialog(options: DialogOptions): void;
-}
-export declare const createInteractionManager: () => PrimariaInteractionManager;

package/src/UI/shared-components/primaria-interaction/components/dialog-component-styles.css

@@ -1,104 +0,0 @@
-*[hidden] {
-  display: none !important;
-}
-
-.modal {
-  font-family: "Open Sans";
-  display: none;
-  position: fixed;
-  z-index: 400;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.65);
-
-  .dialog {
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 21;
-    background: #fff;
-    border-radius: 16px;
-    width: auto;
-    height: auto;
-    max-height: 95%;
-    min-width: 400px;
-    box-shadow:
-      0px 0px 14px rgb(0 0 0 / 25%),
-      0px 1px 10px rgb(0 0 0 / 22%);
-
-    .dialog__header {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      padding: 24px;
-      border-top-left-radius: 8px;
-      border-top-right-radius: 8px;
-      align-items: center;
-
-      &.with-close{
-        justify-content: space-between;
-      }
-      h2 {
-        color: var(--color-neutral-900);
-        padding: 0;
-        margin: 0;
-        font-weight: 700;
-        font-size: 1.286rem;
-        line-height: 30px;
-      }
-    }
-    .dialog__content {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      align-items: center;
-
-      min-height: 1px;
-      height: 100%;
-      padding-inline: 24px;
-      padding-bottom: 24px;
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 24px;
-      border-bottom-left-radius: 8px;
-      border-bottom-right-radius: 8px;
-
-      & > * {
-        border-bottom-left-radius: 8px;
-        border-bottom-right-radius: 8px;
-      }
-    }
-    .dialog__actions {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      gap: 16px;
-      padding: 24px 16px;
-    }
-  }
-}
-
-/* Animations to fade the snackbar in and out */
-@-webkit-keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}

package/src/UI/shared-components/primaria-interaction/components/dialog-component.ts

@@ -1,138 +0,0 @@
-import { LitElement, css, html, nothing, unsafeCSS } from "lit";
-import { when } from "lit/directives/when.js";
-import { customElement, property, query } from "lit/decorators.js";
-import {
-  ConfirmOptions,
-  ConfirmResult,
-  ConfirmType,
-  CustomConfirmOptions,
-  DialogOptions,
-} from "../typings";
-import styles from "./dialog-component-styles.css?inline";
-
-const dssToConfirmType = (type: ConfirmType) => {
-  return type === "danger" ? "error" : type;
-};
-
-const renderActions = (props: DialogComponent) => {
-  if (!props.options.acceptLabel && !props.options.cancelLabel) return nothing;
-  const optionsType = dssToConfirmType(props.options.type);
-
-  return html`
-    <div class="dialog__actions">
-      <dss-button label=${props.options.cancelLabel} size="lg" variant="secondary" @click="${props._cancel}" ?hidden=${!props.options.cancelLabel} id="cancel-btn"></dss-button>
-      <dss-button label=${props.options.acceptLabel} size="lg" variant=${optionsType} @click="${props._accept}" ?hidden=${!props.options.acceptLabel} id="accept-btn"></dss-button>
-    </div>
-  `;
-};
-
-const renderMessage = (options: ConfirmOptions) =>
-  html`<div id="message">${options.message || ""}</div>`;
-
-function renderCustomContent(props: DialogComponent) {
-  if (props.options.componentConstructor) {
-    const component = new props.options.componentConstructor() as LitElement;
-    component.setAttribute("id", "__custom-element__");
-    component.addEventListener("closed", props.componentCloseRequest.bind(props));
-    return html`${component}`;
-  }
-  return nothing;
-}
-
-function renderDefaultContent(props: DialogComponent) {
-  const showClose = (props.options as DialogOptions).showCloseButton;
-  return html`
-    <div class="dialog__header ${props.options.type} ${showClose ? "with-close" : ""}">
-      <h2 part="title">${props.options.title || ""}</h2>
-      ${when(
-        showClose,
-        () =>
-          html`<dss-icon-button size="md" icon="close" @click="${
-            props._cancel
-          }"></dss-icon-button>`,
-        () => nothing,
-      )}
-    </div>
-    <div class="dialog__content">
-      ${when(
-        props.options.message,
-        () => renderMessage(props.options),
-        () => renderCustomContent(props),
-      )}
-    </div>
-    ${renderActions(props)}
-  `;
-}
-
-@customElement("dialog-component")
-export class DialogComponent extends LitElement {
-  render() {
-    return html`
-      <div class="modal">
-        <div class="dialog">
-        ${this.options.fullCustomization ? renderCustomContent(this) : renderDefaultContent(this)}
-        </div>
-      </div>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ${unsafeCSS(styles)}
-    `;
-  }
-
-  @property()
-  options: ConfirmOptions & CustomConfirmOptions;
-
-  @query(".modal")
-  modal: any;
-
-  _cancel(e) {
-    this.close({ confirmed: false });
-  }
-
-  _accept(e) {
-    this.close({ confirmed: true });
-  }
-
-  componentCloseRequest(e: CustomEvent) {
-    this.close(e.detail);
-  }
-
-  async close(result: ConfirmResult) {
-    let finalResult = result;
-    if (finalResult?.confirmed) {
-      const component = this.getCustomComponent();
-      if (component?.canAccept) {
-        const canAccept = await component.canAccept();
-        if (!canAccept) return;
-      }
-      if (component?.accept) {
-        finalResult = await component.accept(finalResult);
-      }
-    }
-    this.dispatchEvent(new CustomEvent("closed", { detail: finalResult }));
-    this.modal.style.display = "none";
-  }
-
-  getCustomComponent(): any {
-    return this.shadowRoot?.querySelector("#__custom-element__");
-  }
-
-  @query("#accept-btn")
-  acceptButton: HTMLElement;
-
-  @query("#actions")
-  actionsContainer: HTMLElement;
-
-  @query("#header")
-  header: HTMLElement;
-
-  @query("#content")
-  content: HTMLElement;
-
-  show() {
-    this.modal.style.display = "block";
-  }
-}

package/src/UI/shared-components/primaria-interaction/components/notifier-component-styles.css

@@ -1,136 +0,0 @@
-.snackbar {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: 10px;
-  visibility: hidden; /* Hidden by default. Visible on click */
-  min-width: 250px; /* Set a default minimum width */
-  width: 417px;
-  height: 56px;
-  background-color: #333;
-  color: #fff;
-  text-align: center;
-  border-radius: 10px;
-  font-weight: 500;
-  padding: 12px 16px;
-  position: fixed;
-  z-index: 500;
-  left: 24px;
-  box-shadow:
-    0 0px 2px rgba(0, 0, 0, 0.16),
-    0 0px 5px rgba(0, 0, 0, 0.23);
-  border: 2px solid;
-  border-color: transparent;
-
-  .snackbar__message {
-    text-align: left;
-    margin-right: 24px;
-    flex: 1;
-  }
-
-  &.show {
-    visibility: visible; /* Show the snackbar */
-  }
-  &.success {
-    background-color: var(--color-green-500);
-    color: white;
-    box-shadow:
-      rgb(67 160 71 / 30%) 0px 0px 2px,
-      rgb(67 160 71 / 22%) 0px 0px 5px;
-  }
-  &.error {
-    background-color: var(--color-red-500);
-    color: white;
-    box-shadow:
-      rgb(229 57 53 / 30%) 0px 0px 2px,
-      rgb(229 57 53 / 22%) 0px 0px 5px;
-  }
-  &.warning {
-    background-color: var(--color-yellow-500);
-    color: black;
-    box-shadow:
-      rgb(251 140 0 / 30%) 0px 0px 2px,
-      rgb(251 140 0 / 22%) 0px 0px 5px;
-  }
-  &.info {
-    background-color: var(--color-primary-500);
-    color: white;
-    box-shadow:
-      rgb(14 80 138 / 30%) 0px 0px 2px,
-      rgb(14 80 138 / 22%) 0px 0px 5px;
-  }
-
-  &.notification-1 {
-    -webkit-animation:
-      fadein 0.3s,
-      fadeout 0.55s 6s;
-      animation:
-      fadein 0.3s,
-      fadeout 0.55s 6s;
-      bottom: 72px;
-  }
-
-  &.notification-2 {
-    -webkit-animation:
-      fadein 0.3s,
-      fadeout 0.55s 6s;
-      animation:
-      fadein 0.3s,
-      fadeout 0.55s 6s;
-      bottom: 132px;
-  }
-  &.notification-3 {
-    -webkit-animation:
-      fadein 0.3s,
-      fadeout 0.55s 6s;
-      animation:
-      fadein 0.3s,
-      fadeout 0.55s 6s;
-      bottom: 192px;
-  }
-
-  @-webkit-keyframes fadein {
-    from {
-      bottom: 0;
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes fadein {
-    from {
-      bottom: 0;
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  @-webkit-keyframes fadeout {
-    from {
-      opacity: 1;
-    }
-    to {
-      bottom: 0;
-      opacity: 0;
-    }
-  }
-
-  @keyframes fadeout {
-    from {
-      opacity: 1;
-    }
-    to {
-      bottom: 0;
-      opacity: 0;
-    }
-  }
-
-  #close-btn {
-    cursor: pointer;
-  }
-}

package/src/UI/shared-components/primaria-interaction/components/notifier-component.ts

@@ -1,69 +0,0 @@
-import { LitElement, css, html, unsafeCSS } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { NotifyOptions, NotifyType } from "../typings";
-import styles from "./notifier-component-styles.css?inline";
-
-function getIcon(type: NotifyType | undefined) {
-  if (!type) return;
-
-  const types = new Map<NotifyType, string>([
-    ["error", "error"],
-    ["info", "info"],
-    ["warning", "warning"],
-    ["success", "check_circle"],
-  ]);
-
-  return types.get(type) as string;
-}
-
-@customElement("notifier-component")
-export class NotifierComponent extends LitElement {
-  render() {
-    return html`
-      <div class="snackbar ${this.options.type}">
-        <dss-icon icon=${ifDefined(getIcon(this.options.type))} size="md"></dss-icon>
-        <div class="snackbar__message">${this.options.message ?? ""}</div>
-        <div class="snackbar__action">
-          <dss-icon @click="${this.close}" id="close-btn" icon="close" size="md"></dss-icon>
-        </div>
-      </div>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ${unsafeCSS(styles)}
-    `;
-  }
-
-  @property({ type: Object })
-  options: NotifyOptions;
-
-  @query(".snackbar")
-  snackbar: HTMLElement;
-
-  show() {
-    this.snackbar.classList.add("show");
-  }
-
-  clearAndUpdateOrder(order: string) {
-    const classListValues = this.snackbar.classList.values();
-
-    for (const singleClass of classListValues) {
-      if (!singleClass.startsWith("notification")) continue;
-
-      this.snackbar.classList.remove(singleClass);
-    }
-
-    this.snackbar.classList.add(order);
-
-    this.requestUpdate();
-  }
-
-  close() {
-    this.snackbar.classList.remove("show");
-
-    this.dispatchEvent(new CustomEvent("closed"));
-  }
-}

package/src/UI/shared-components/primaria-interaction/confirm-mixin.ts

@@ -1,35 +0,0 @@
-import { dedupeMixin } from "@uxland/lit-utilities";
-import { LitElement } from "lit";
-import { property } from "lit/decorators.js";
-import { ConfirmResult, Constructor } from "./typings";
-
-export declare class ConfirmMixinBase {
-  model: any;
-  outputModel: any;
-  close(result: ConfirmResult): void;
-  canAccept(): Promise<boolean> | boolean;
-  accept(result: ConfirmResult): Promise<ConfirmResult>;
-}
-
-const ConfirmMixin = dedupeMixin(<T extends Constructor<LitElement>>(superClass: T) => {
-  class ConfirmMixinClass extends superClass implements ConfirmMixinBase {
-    @property()
-    model: T;
-    @property()
-    outputModel: T;
-    close(result: ConfirmResult) {
-      (this as any).dispatchEvent(new CustomEvent("closed", { detail: result }));
-    }
-    canAccept(): Promise<boolean> | boolean {
-      return Promise.resolve(true);
-    }
-    accept(result: ConfirmResult): Promise<ConfirmResult> {
-      return Promise.resolve(result);
-    }
-  }
-  return ConfirmMixinClass as Constructor<ConfirmMixinBase> & T;
-});
-
-export function confirmMixin<T extends Constructor<LitElement>>(superClass: T) {
-  return ConfirmMixin(superClass as any) as unknown as Constructor<ConfirmMixinBase> & T;
-}

package/src/UI/shared-components/primaria-interaction/confirm.ts

@@ -1,9 +0,0 @@
-import "./components/dialog-component";
-import { buildDialogComponent } from "./shared";
-import { ConfirmOptions, ConfirmResult, CustomConfirmOptions } from "./typings";
-
-export const confirm = async (
-  options: (ConfirmOptions & CustomConfirmOptions) | any,
-): Promise<ConfirmResult> => {
-  return buildDialogComponent(options);
-};

package/src/UI/shared-components/primaria-interaction/index.ts

@@ -1,5 +0,0 @@
-export * from "./confirm";
-export * from "./notify";
-export * from "./open-dialog";
-export * from "./confirm-mixin";
-export * from "./typings";