@pairbo/ui-kit 0.0.1 → 0.0.3

package/dist/src/components/textarea/textarea.component.d.ts

@@ -0,0 +1,78 @@
+import { CSSResultGroup } from 'lit';
+import { default as PairboElement, PairboFormControl } from '../../internal/pairbo-element.js';
+/**
+ * @summary Short summary of the component's intended use.
+ * @status experimental
+ *
+ * @dependency pbo-example
+ *
+ * @event pbo-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class PboTextarea extends PairboElement implements PairboFormControl {
+    static styles: CSSResultGroup;
+    private readonly formControlController;
+    defaultValue?: unknown;
+    defaultChecked?: boolean | undefined;
+    pattern?: string | undefined;
+    min?: string | number | Date | undefined;
+    max?: string | number | Date | undefined;
+    step?: number | "any" | undefined;
+    input: HTMLTextAreaElement;
+    sizeAdjuster: HTMLTextAreaElement;
+    hasFocus: boolean;
+    name: string;
+    value: string;
+    size: "small" | "medium" | "large";
+    filled: boolean;
+    placeholder: string;
+    rows: number;
+    resize: "none" | "vertical" | "auto";
+    disabled: boolean;
+    readonly: boolean;
+    form: string;
+    required: boolean;
+    minlength: number;
+    maxlength: number;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    firstUpdated(): void;
+    private handleChange;
+    private handleBlur;
+    private handleFocus;
+    private handleInput;
+    private handleInvalid;
+    /** Sets focus on the textarea. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the textarea. */
+    blur(): void;
+    /** Selects all the text in the textarea. */
+    select(): void;
+    /** Gets or sets the textarea's scroll position. */
+    scrollPosition(position?: {
+        top?: number;
+        left?: number;
+    }): {
+        top: number;
+        left: number;
+    } | undefined;
+    /** Sets the start and end positions of the text selection (0-based). */
+    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: "forward" | "backward" | "none"): void;
+    /** Replaces a range of text with a new string. */
+    setRangeText(replacement: string, start?: number, end?: number, selectMode?: "select" | "start" | "end" | "preserve"): void;
+    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+    checkValidity(): boolean;
+    /** Gets the associated form, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message: string): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/textarea/textarea.d.ts

@@ -0,0 +1,8 @@
+import { default as PboTextarea } from './textarea.component.js';
+export * from './textarea.component.js';
+export default PboTextarea;
+declare global {
+    interface HTMLElementTagNameMap {
+        "pbo-textarea": PboTextarea;
+    }
+}

package/dist/src/components/textarea/textarea.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/dist/src/components/type-form/type-form.component.d.ts

@@ -0,0 +1,48 @@
+import { CSSResultGroup } from 'lit';
+import { default as PairboElement } from '../../internal/pairbo-element.js';
+import { default as PboSelector } from '../selector/selector.component.js';
+import { default as PboTextarea } from '../textarea/textarea.component.js';
+import { default as PboRadioGroup } from '../radio-group/radio-group.component.js';
+import { default as PboButton } from '../button/button.component.js';
+/**
+ * @summary Short summary of the component's intended use.
+ * @status experimental
+ *
+ * @dependency pbo-example
+ *
+ * @event pbo-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class PboTypeForm extends PairboElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        "pbo-selector": typeof PboSelector;
+        "pbo-textarea": typeof PboTextarea;
+        "pbo-color-radio-group": typeof PboRadioGroup;
+        "pbo-radio-group": typeof PboRadioGroup;
+        "pbo-radio-button": typeof PboRadioGroup;
+        "pbo-button": typeof PboButton;
+    };
+    greetingText: PboTextarea;
+    fontSelector: PboSelector;
+    textColor: PboRadioGroup;
+    textAlignment: PboRadioGroup;
+    private formData;
+    cardInnerImageUrl: string;
+    get form(): {
+        font: any;
+        text: string;
+        color: string;
+        alignment: string;
+    };
+    private handleFormChange;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/type-form/type-form.d.ts

@@ -0,0 +1,8 @@
+import { default as PboTypeForm } from './type-form.component.js';
+export * from './type-form.component.js';
+export default PboTypeForm;
+declare global {
+    interface HTMLElementTagNameMap {
+        "pbo-typing-form": PboTypeForm;
+    }
+}

package/dist/src/components/type-form/type-form.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/dist/src/events/events.d.ts

@@ -0,0 +1 @@
+export type { PboCategoryCardSelectEvent } from './pbo-category-card-select.js';

package/dist/src/events/pbo-category-card-select.d.ts

@@ -0,0 +1,8 @@
+export type PboCategoryCardSelectEvent = CustomEvent<{
+    cardId: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "pbo-category-card-selected": PboCategoryCardSelectEvent;
+    }
+}

package/dist/src/internal/form.d.ts

@@ -0,0 +1,43 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { PairboFormControl } from './pairbo-element';
+import { PboButton } from '../components/main';
+export declare const formCollections: WeakMap<HTMLFormElement, Set<PairboFormControl>>;
+export interface FormControlControllerOptions {
+    form: (input: PairboFormControl) => HTMLFormElement | null;
+    name: (input: PairboFormControl) => string;
+    defaultValue: (input: PairboFormControl) => unknown;
+    value: (input: PairboFormControl) => unknown | unknown[];
+    disabled: (input: PairboFormControl) => boolean;
+    reportValidity: (input: PairboFormControl) => boolean;
+    checkValidity: (input: PairboFormControl) => boolean;
+    setValue: (input: PairboFormControl, value: unknown) => void;
+    assumeInteractionOn: string[];
+}
+export declare class FormControlController implements ReactiveController {
+    host: PairboFormControl & ReactiveControllerHost;
+    form?: HTMLFormElement | null;
+    options: FormControlControllerOptions;
+    constructor(host: PairboFormControl & ReactiveControllerHost, options?: Partial<FormControlControllerOptions>);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    private attachForm;
+    private detachForm;
+    private handleFormData;
+    private handleFormSubmit;
+    private handleFormReset;
+    private handleInteraction;
+    private checkFormValidity;
+    private reportFormValidity;
+    private setUserInteracted;
+    private doAction;
+    getForm(): HTMLFormElement | null;
+    reset(submitter?: HTMLInputElement | PboButton): void;
+    submit(submitter?: HTMLInputElement | PboButton): void;
+    setValidity(isValid: boolean): void;
+    updateValidity(): void;
+    emitInvalidEvent(originalInvalidEvent?: Event): void;
+}
+export declare const validValidityState: ValidityState;
+export declare const valueMissingValidityState: ValidityState;
+export declare const customErrorValidityState: ValidityState;

package/{src/internal/pairbo-element.ts → dist/src/internal/pairbo-element.d.ts}

@@ -1,5 +1,4 @@
-import { LitElement } from "lit";
-
+import { LitElement } from 'lit';
 /**
  * Interface representing a Pairbo form control element.
  * Extends LitElement to provide form control functionality.
@@ -36,50 +35,26 @@ import { LitElement } from "lit";
  * @param {string} error - The custom error message to display
  */
 export interface PairboFormControl extends LitElement {
-  name: string;
-  value: unknown;
-  disabled?: boolean;
-  defaultValue?: unknown;
-  defaultChecked?: boolean;
-  form?: string;
-
-  pattern?: string;
-  min?: number | string | Date;
-  max?: number | string | Date;
-  step?: number | "any";
-  required?: boolean;
-  minlength?: number;
-  maxlength?: number;
-
-  readonly validity: ValidityState;
-  readonly validationMessage: string;
-
-  checkValidity: () => boolean;
-  getForm: () => HTMLFormElement | null;
-  reportValidity: () => boolean;
-  setCustomValidity: (error: string) => void;
+    name: string;
+    value: unknown;
+    disabled?: boolean;
+    defaultValue?: unknown;
+    defaultChecked?: boolean;
+    form?: string;
+    pattern?: string;
+    min?: number | string | Date;
+    max?: number | string | Date;
+    step?: number | "any";
+    required?: boolean;
+    minlength?: number;
+    maxlength?: number;
+    readonly validity: ValidityState;
+    readonly validationMessage: string;
+    checkValidity: () => boolean;
+    getForm: () => HTMLFormElement | null;
+    reportValidity: () => boolean;
+    setCustomValidity: (error: string) => void;
 }
-
 export default class PairboElement extends LitElement {
-  /* --------------------------- Emits custom events -------------------------- */
-  emit(name: string, options?: CustomEventInit<unknown> | undefined) {
-    /**
-     * Creates a new CustomEvent instance with specified event name and options.
-     * @property {boolean} bubbles - Whether the event can bubble up through the Dom
-     * @property {boolean} cancelable - Indicates whether the event is cancelable and therefore prevented as if the event never happened. To Cancel the event, call preventDefault() on the event.
-     * @property {boolean} composed - Indicates whether or not the event will propagate across the shadow Dom boundary into the standard DOM.
-     * @property {Object} detail - Returns any custom data event was created with. Typically used for synthetic events. For the custom event.
-     */
-    const event = new CustomEvent(name, {
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-      detail: {},
-      ...options,
-    });
-
-    this.dispatchEvent(event);
-
-    return event;
-  }
+    emit(name: string, options?: CustomEventInit<unknown> | undefined): CustomEvent<unknown>;
 }

package/dist/src/internal/slots.d.ts

@@ -0,0 +1,12 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare class HasSlotController implements ReactiveController {
+    host: ReactiveControllerHost & Element;
+    slotNames: string[];
+    constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]);
+    private hasDefaultSlot;
+    private hasNamedSlot;
+    test(slotName: string): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private handleSlotChange;
+}

package/dist/src/internal/watch.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+type NonUndefined<A> = A extends undefined ? never : A;
+/**
+ * Get the keys of the updates handler inside one class.
+ *
+ * keyof will only extract the keys which are non-never
+ *
+ * The modified object
+ * { [key in keyof T] -?: NonUndefined<T[key]> extends UpdateHandler ? key : never; }
+ *
+ * Get the keys in the object: [key in keyof T]
+ *
+ * Remove the undefined keys: -?
+ *
+ * Ternary operator A ? B : C - Check if the type is UpdateHandler: NonUndefined<T[Key]> extends UpdateHandler
+ *  If true, set the value of current key to the key name
+ *  Else set the value of current key to never
+ *  After that, we use the mapped type to get the keys of the object ExampleObject[keyof ExampleObject] will return an union of they key values, and the never value will be removed
+ **/
+type UpdateHandlerKeys<T extends Object> = {
+    [key in keyof T]-?: NonUndefined<T[key]> extends UpdateHandler ? key : never;
+}[keyof T];
+type Option = {
+    waitUntilFirstUpdate: boolean;
+};
+export declare function watch(propertyName: string | string[], options?: Option): <EleClass extends LitElement>(target: EleClass, decoratedFnName: UpdateHandlerKeys<EleClass>) => void;
+export {};

package/dist/src/styles/component.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/dist/src/styles/form-control.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/package.json

@@ -1,13 +1,7 @@
 {
   "name": "@pairbo/ui-kit",
-  "version": "0.0.01",
+  "version": "0.0.3",
   "description": "",
-  "exports": {
-    ".": {
-      "types": "./dist/src/components/main.d.ts",
-      "import": "./dist/pairbo.umd.js"
-    }
-  },
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -47,7 +41,8 @@
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.24.0",
     "vite": "^6.1.0",
-    "vite-plugin-dts": "^4.5.0"
+    "vite-plugin-dts": "^4.5.0",
+    "vite-plugin-static-copy": "^2.3.0"
   },
   "lint-staged": {
     "*.{ts,js}": [
@@ -55,6 +50,15 @@
       "prettier --write"
     ]
   },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/src/components/main.d.ts",
+      "import": "./dist/pairbo.umd.js"
+    }
+  },
   "dependencies": {
     "@splidejs/splide": "^4.1.4",
     "choices.js": "^11.0.3",

package/.husky/pre-commit

@@ -1 +0,0 @@
-npx --no-install lint-staged

package/.prettierignore

@@ -1,16 +0,0 @@
-*.hbs
-.cache
-.github
-cspell.json
-dist
-docs/search.json
-src/components/icon/icons
-src/react/index.ts
-node_modules
-package-lock.json
-tsconfig.json
-cdn
-_site
-eslint.config.mjs
-my-custom-element.ts
-vite.config.ts

package/.prettierrc.json

@@ -1,17 +0,0 @@
-{
-  "arrowParens": "avoid",
-  "bracketSpacing": true,
-  "htmlWhitespaceSensitivity": "css",
-  "insertPragma": false,
-  "bracketSameLine": false,
-  "jsxSingleQuote": false,
-  "printWidth": 120,
-  "proseWrap": "preserve",
-  "quoteProps": "as-needed",
-  "requirePragma": false,
-  "semi": true,
-  "singleQuote": false,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "useTabs": false
-}

package/cspell.json

@@ -1,9 +0,0 @@
-{
-  "words": [
-    "maxlength",
-    "minlength",
-    "pairbo",
-    "splide",
-    "splidejs"
-  ]
-}

package/dev.html

@@ -1,101 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Message Selector Demo</title>
-    <style>
-      body {
-        font-family: sans-serif;
-        padding: 1rem;
-      }
-
-      /* Style for the code snippet */
-      pre {
-        background: #f7f7f7;
-        padding: 1rem;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        overflow-x: auto;
-        margin-bottom: 2rem;
-      }
-
-      code {
-        font-family: monospace;
-      }
-
-      /* Style for the rendered custom element container */
-      .rendered {
-        margin-top: 2rem;
-        padding: 1rem;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-      }
-
-      .rendered > div.toggle-container {
-        margin-bottom: 1rem;
-      }
-    </style>
-  </head>
-
-  <body>
-    <!-- Display the literal string by escaping the angle brackets -->
-    <pre><code>&lt;pairbo-message-selector&gt;&lt;/pairbo-message-selector&gt;</code></pre>
-
-    <div class="rendered">
-      <div class="toggle-container">
-        <button>Toggle Message Selector</button>
-      </div>
-      <!-- Here the default custom element will be rendered -->
-      <pairbo-message-selector id="default"></pairbo-message-selector>
-    </div>
-
-    <pre><code>
-&lt;pairbo-message-selector 
-  giftLabel="This is a custom label🎁" 
-  premiumLabel="Let's have a premium card"
-  premiumDescription="TL;DR"
-  freeMessageSelected="Oh? How about a free message?" 
-&gt;&lt;/pairbo-message-selector&gt;
-    </code></pre>
-
-    <div class="rendered">
-      <div class="toggle-container">
-        <button>Toggle Message Selector</button>
-      </div>
-      <!-- Here the custom version of the custom element is rendered -->
-      <pairbo-message-selector
-        id="custom"
-        giftLabel="This is a custom label🎁"
-        premiumLabel="Let's have a premium card"
-        premiumDescription="TL;DR"
-        freeMessageSelected="Oh? How about a free message?"
-      >
-      </pairbo-message-selector>
-
-      <fabric-example></fabric-example>
-    </div>
-
-    <!-- Vite will transform and serve the TS file on the fly -->
-    <script type="module" src="/src/components/message-selector/message-selector.ts"></script>
-    <script type="module" src="/src/components/fabric-example/fabric-example.ts"></script>
-
-    <script>
-      // Add an event listener to each toggle button.
-      document.querySelectorAll(".toggle-container button").forEach(button => {
-        button.addEventListener("click", event => {
-          // Find the nearest container with class "rendered"
-          const container = event.target.closest(".rendered");
-          if (container) {
-            // Find the custom element within that container.
-            const messageSelector = container.querySelector("pairbo-message-selector");
-            // If the custom element has the toggleMessageSelector method, call it.
-            if (messageSelector && typeof messageSelector.toggleMessageSelector === "function") {
-              messageSelector.toggleMessageSelector();
-            }
-          }
-        });
-      });
-    </script>
-  </body>
-</html>

package/docs/README.md

@@ -1 +0,0 @@
-# Heading

package/docs/_includes/component.njk

@@ -1,16 +0,0 @@
-{%extends 'default.njk'%}
-
-{% block content%}
-  <!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <meta charset="UTF-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <title>{{ title }}</title>
-    </head>
-    <body>
-      {{ content | safe }}
-      <script type="module" src="/dist/my-custom-element.umd.js"></script>
-    </body>
-  </html>
-{% endblock %}

package/docs/_includes/default.njk

@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html
-  lang="en"
-  data-layout="{{ layout }}"
-  data-shoelace-version="{{ meta.version }}"
->
-  <header></header>
-  <body>
-    {% set baseURL = "---Test base url---" %}
-    <aside id="sidebar" data-preserve-scroll>
-    This is the default template with the toc sidebar
-      <nav>
-        {% include 'sidebar.njk' %}
-      </nav>
-    </aside>
-
-    {# Content #}
-    <main>
-      <a id="main-content"></a>
-      <article id="content" class="content{% if toc %} content--with-toc{% endif %}">
-        {% if toc %}
-          <div class="content__toc">
-            <ul>
-              <li class="top">
-                <a href="#">{{ meta.title }}</a>
-              </li>
-            </ul>
-          </div>
-        {% endif %}
-
-        <div class="content__body">
-          {% block content %}
-            {{ content | safe }}
-          {% endblock %}
-        </div>
-      </article>
-    </main>
-  </body>
-</html>

package/docs/_includes/sidebar.njk

@@ -1,16 +0,0 @@
-<ul>
-  <li>
-    <a href="/">Home Page</a>
-  </li>
-  <li>
-    <a href="/fabric-example">Fabric Example</a>
-  </li>
-  <li>
-    <h2>Components</h2>
-    <ul>
-      <li>
-        <a href="/components/message-selector">Alert</a>
-      </li>
-    </ul>
-  </li>
-</ul>