@basic-ui-components-stc/basic-ui-components 1.0.0

package/dist/components/ds-status.js

@@ -0,0 +1,6 @@
+import { D as DsStatus$1, d as defineCustomElement$1 } from './ds-status2.js';
+
+const DsStatus = DsStatus$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsStatus, defineCustomElement };

package/dist/components/ds-status2.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const dsStatusCss = ":host{display:inline-block}:host .status{--status-radius:3px;--status-fs:0.75rem;--status-fw:400;--status-color:var(--black);--status-bg:var(--white);--status-size:1.5rem;--status-width:80px;--status-padding:0 0.5rem;--status-ws:nowrap;display:inline-flex;align-items:center;justify-content:center;background-color:var(--status-bg);color:var(--status-color);font-size:var(--status-fs);font-weight:var(--status-fw);line-height:1;min-height:var(--status-size);min-width:var(--status-width);padding:var(--status-padding);text-transform:capitalize;border-radius:var(--status-radius);white-space:var(--status-ws)}:host .status--medium{--status-size:var(--default-size);--status-fs:1rem}:host .status--small{--status-size:var(--default-size-sm);--status-fs:0.875rem;--status-fw:400}:host .status--large{--status-size:var(--default-size-lg);--status-fs:1.2rem}:host .status--icon{--status-padding:0;min-width:var(--status-size);min-height:var(--status-size);--status-fs:100%}";
+
+const DsStatus = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.status = undefined;
+    this.noOpacity = false;
+    this.size = undefined;
+    this.icon = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, h("div", { part: "base", class: Object.assign({ 'status': true }, classMap) }, h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [`status--${this.status}`]: this.status != null,
+      [`status--${this.size}`]: true,
+      [`status--icon`]: this.icon,
+      [`status--no-opacity`]: this.noOpacity,
+    };
+  }
+  static get style() { return dsStatusCss; }
+}, [1, "ds-status", {
+    "status": [1537],
+    "noOpacity": [4, "no-opacity"],
+    "size": [1],
+    "icon": [516]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ds-status"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ds-status":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DsStatus);
+      }
+      break;
+  } });
+}
+
+export { DsStatus as D, defineCustomElement as d };

package/dist/components/ds-user-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsUserCard extends Components.DsUserCard, HTMLElement {}
+export const DsUserCard: {
+  prototype: DsUserCard;
+  new (): DsUserCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-user-card.js

@@ -0,0 +1,6 @@
+import { D as DsUserCard$1, d as defineCustomElement$1 } from './ds-user-card2.js';
+
+const DsUserCard = DsUserCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsUserCard, defineCustomElement };

package/dist/components/ds-user-card2.js

@@ -0,0 +1,58 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './ds-avatar2.js';
+
+const dsUserCardCss = ":host{display:block}.user-card{min-width:200px;max-width:100%;height:var(--user-card-height, auto);position:relative;padding:var(--user-card-padding, 0);text-align:var(--user-card-align, inherit);background-color:var(--user-card-bg, transparent);display:var(--user-card-display, flex);align-items:var(--user-card-align, flex-start);gap:var(--user-card-gap, 1rem)}.user-card .user-info{display:var(--user-details-display, flex);align-items:var(--user-details-align, baseline);flex-direction:var(--user-details-direction, column);flex-grow:1;gap:var(--user-details-gap, 0.3rem);line-height:1;padding:var(--user-info-padding, 0.3rem 0)}.user-card .user-info .name{--user-fc:var(--black);--user-fs:0.875rem;--user-fw:500;color:var(--user-fc, black);font-size:var(--user-fs, 0.875rem);font-weight:var(--user-fw, 500);word-break:break-all;width:100%}.user-card .user-info .title{--title-fc:var(--dark-gray);--title-fs:0.75rem;--title-fw:400;color:var(--title-fc, gray);font-size:var(--title-fs, 0.75rem);font-weight:var(--title-fw, 400);word-break:break-all;width:100%}.user-card .user-info .title:empty{display:none}.user-card .user-info .body{width:100%}.user-card .user-info .body:empty{display:none}";
+
+const DsUserCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.imageSize = 'medium';
+    this.imageShape = 'circle';
+    this.userInfo = undefined;
+  }
+  userInfoWatcher(newValue) {
+    if (typeof newValue === 'string') {
+      this._userInfo = JSON.parse(newValue);
+    }
+    else {
+      this._userInfo = newValue;
+    }
+  }
+  componentWillLoad() {
+    this.userInfoWatcher(this.userInfo);
+  }
+  render() {
+    return (h(Host, null, this._userInfo &&
+      h("section", { part: "base", class: "user-card" }, h("ds-avatar", { part: "image", size: this.imageSize, shape: this.imageShape, exportparts: "base: avatar_base", image: this._userInfo.image, label: this._userInfo.name }), h("div", { part: "details", class: "user-info" }, h("span", { part: "name", class: "name" }, this._userInfo.name), h("span", { part: "title", class: "title" }, this._userInfo.title), h("div", { part: "body", class: "body" }, h("slot", null))), h("slot", { name: 'close' }))));
+  }
+  static get watchers() { return {
+    "userInfo": ["userInfoWatcher"]
+  }; }
+  static get style() { return dsUserCardCss; }
+}, [1, "ds-user-card", {
+    "imageSize": [1, "image-size"],
+    "imageShape": [1, "image-shape"],
+    "userInfo": [1, "user-info"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ds-user-card", "ds-avatar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ds-user-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DsUserCard);
+      }
+      break;
+    case "ds-avatar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DsUserCard as D, defineCustomElement as d };

package/dist/components/index.d.ts

@@ -0,0 +1,48 @@
+/* DsComponents custom elements */
+export { DsActivityLog as DsActivityLog } from '../types/components/ds-activity-log/ds-activity-log';
+export { DsAlert as DsAlert } from '../types/components/ds-alert/ds-alert';
+export { DsApprovals as DsApprovals } from '../types/components/ds-approvals/ds-approvals';
+export { DsAttachments as DsAttachments } from '../types/components/ds-attachments/ds-attachments';
+export { DsAvatar as DsAvatar } from '../types/components/ds-avatar/ds-avatar';
+export { DsButton as DsButton } from '../types/components/ds-button/ds-button';
+export { DsCard as DsCard } from '../types/components/ds-card/ds-card';
+export { DsFilePicker as DsFilePicker } from '../types/components/ds-file-picker/ds-file-picker';
+export { DsIcon as DsIcon } from '../types/components/ds-icon/ds-icon';
+export { DsLoadingChart as DsLoadingChart } from '../types/components/ds-loading-chart/ds-loading-chart';
+export { DsLoadingPage as DsLoadingPage } from '../types/components/ds-loading-page/ds-loading-page';
+export { DsLoadingTable as DsLoadingTable } from '../types/components/ds-loading-table/ds-loading-table';
+export { DsMessage as DsMessage } from '../types/components/ds-message/ds-message';
+export { DsSla as DsSla } from '../types/components/ds-sla/ds-sla';
+export { DsSlider as DsSlider } from '../types/components/ds-slider/ds-slider';
+export { DsSplash as DsSplash } from '../types/components/ds-splash/ds-splash';
+export { DsStatus as DsStatus } from '../types/components/ds-status/ds-status';
+export { DsUserCard as DsUserCard } from '../types/components/ds-user-card/ds-user-card';
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1,19 @@
+export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { DsActivityLog, defineCustomElement as defineCustomElementDsActivityLog } from './ds-activity-log.js';
+export { DsAlert, defineCustomElement as defineCustomElementDsAlert } from './ds-alert.js';
+export { DsApprovals, defineCustomElement as defineCustomElementDsApprovals } from './ds-approvals.js';
+export { DsAttachments, defineCustomElement as defineCustomElementDsAttachments } from './ds-attachments.js';
+export { DsAvatar, defineCustomElement as defineCustomElementDsAvatar } from './ds-avatar.js';
+export { DsButton, defineCustomElement as defineCustomElementDsButton } from './ds-button.js';
+export { DsCard, defineCustomElement as defineCustomElementDsCard } from './ds-card.js';
+export { DsFilePicker, defineCustomElement as defineCustomElementDsFilePicker } from './ds-file-picker.js';
+export { DsIcon, defineCustomElement as defineCustomElementDsIcon } from './ds-icon.js';
+export { DsLoadingChart, defineCustomElement as defineCustomElementDsLoadingChart } from './ds-loading-chart.js';
+export { DsLoadingPage, defineCustomElement as defineCustomElementDsLoadingPage } from './ds-loading-page.js';
+export { DsLoadingTable, defineCustomElement as defineCustomElementDsLoadingTable } from './ds-loading-table.js';
+export { DsMessage, defineCustomElement as defineCustomElementDsMessage } from './ds-message.js';
+export { DsSla, defineCustomElement as defineCustomElementDsSla } from './ds-sla.js';
+export { DsSlider, defineCustomElement as defineCustomElementDsSlider } from './ds-slider.js';
+export { DsSplash, defineCustomElement as defineCustomElementDsSplash } from './ds-splash.js';
+export { DsStatus, defineCustomElement as defineCustomElementDsStatus } from './ds-status.js';
+export { DsUserCard, defineCustomElement as defineCustomElementDsUserCard } from './ds-user-card.js';