@pairbo/ui-kit 0.0.1 → 0.0.3

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

@@ -0,0 +1,32 @@
+import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://shoelace.style/components/button
+ * @status experimental
+ *
+ * @dependency sl-example
+ *
+ * @event sl-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 PboButton extends LitElement {
+    static styles: CSSResultGroup;
+    private readonly hasSlotController;
+    href: string;
+    name: string;
+    value: string;
+    variant: "default" | "primary" | "success" | "neutral" | "warning" | "danger" | "text";
+    outline: boolean;
+    size: "small" | "medium" | "large";
+    circle: boolean;
+    private isButton;
+    private isLink;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult;
+}

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

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

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

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

package/dist/src/components/button-group/button-group.component.d.ts

@@ -0,0 +1,23 @@
+import { LitElement, CSSResultGroup } from 'lit';
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://shoelace.style/components/button-group
+ * @status experimental
+ *
+ * @dependency sl-example
+ *
+ * @event sl-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 PboButtonGroup extends LitElement {
+    static styles: CSSResultGroup;
+    /** An example attribute. */
+    attr: string;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/button-group/button-group.d.ts

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

package/dist/src/components/button-group/button-group.styles.d.ts

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

package/dist/src/components/card-selection/card-selection.component.d.ts

@@ -0,0 +1,23 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { default as PairboElement } 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 PboCardSelection extends PairboElement {
+    static styles: CSSResultGroup;
+    categories: Category[];
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/card-selection/card-selection.d.ts

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

package/dist/src/components/card-selection/card-selection.styles.d.ts

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

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

@@ -0,0 +1,13 @@
+import { CSSResultGroup } from 'lit';
+import { default as PairboElement } from '../../internal/pairbo-element.js';
+export default class PboCategory extends PairboElement {
+    static styles: CSSResultGroup;
+    imageCarousel: HTMLDivElement;
+    private imageSplide;
+    private slides;
+    cards: Card[];
+    protected firstUpdated: () => void;
+    disconnectedCallback: () => void;
+    clickHandler: (event: MouseEvent) => void;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

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

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

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

package/dist/src/components/category-image/category-image.component.d.ts

@@ -0,0 +1,23 @@
+import { CSSResultGroup } from 'lit';
+import { default as PairboElement } 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 PboCategoryImage extends PairboElement {
+    static styles: CSSResultGroup;
+    /** An example attribute. */
+    attr: string;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/category-image/category-image.d.ts

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

package/dist/src/components/category-image/category-image.styles.d.ts

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

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

@@ -0,0 +1,28 @@
+import { CSSResultGroup } from 'lit';
+import { default as PairboElement } 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 PboModal extends PairboElement {
+    static styles: CSSResultGroup;
+    drawer: HTMLDivElement;
+    open: boolean;
+    private requestClose;
+    hide(): Promise<void>;
+    show(): Promise<undefined>;
+    handleOpenChange(): void;
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { default as PairboElement } from '../../internal/pairbo-element.js';
+import { default as FabricExample } from '../fabric-example/fabric-example.component.js';
+import { default as PboTypeForm } from '../type-form/type-form.component.js';
+import { default as PboEditorCardSlider } from '../image-slider/editor-card-slider.component.js';
+export default class PboEditor extends PairboElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        "editor-card-slider": typeof PboEditorCardSlider;
+        "fabric-example": typeof FabricExample;
+        "pbo-type-form": typeof PboTypeForm;
+    };
+    cardInnerImageUrl: string;
+    typingForm: PboTypeForm;
+    private handleTypingFormChange;
+    slider: PboEditorCardSlider;
+    card: Card | null;
+    private formData;
+    protected firstUpdated(): void;
+    isCardType(obj: any): obj is Card;
+    updated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

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

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

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

package/dist/src/components/fabric-example/fabric-example.component.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+import { ITextEvents, SerializedTextboxProps, Textbox, TextboxProps, TOptions } from 'fabric';
+export default class FabricExample extends LitElement {
+    backgroundUrl: string;
+    message: string;
+    alignment: "left" | "center" | "right";
+    fontFamily: string;
+    color: string;
+    private _fabricContainer;
+    private _canvas?;
+    private _canvasElement?;
+    private _textbox?;
+    private _backgroundImg;
+    private _natureSize;
+    private _scale;
+    private _lineHeight;
+    private _fontSize;
+    constructor();
+    static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    formatTextbox(textbox: Textbox<TOptions<TextboxProps>, SerializedTextboxProps, ITextEvents>): void;
+    firstUpdated(): void;
+    adjustCanvasElements(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/fabric-example/fabric-example.d.ts

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

package/dist/src/components/fabric-example/fabric-example.styles.d.ts

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

package/dist/src/components/image-slider/editor-card-slider.component.d.ts

@@ -0,0 +1,41 @@
+import { CSSResultGroup } from 'lit';
+import { default as PairboElement } from '../../internal/pairbo-element.js';
+import { default as Splide } from '@splidejs/splide';
+import { default as FabricExample } from '../fabric-example/fabric-example.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 PboEditorCardSlider extends PairboElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        "fabric-example": typeof FabricExample;
+    };
+    card: Card | null;
+    focusIndex: number;
+    livePreviewProps: {
+        font: string;
+        text: string;
+        color: string;
+        alignment: string;
+    };
+    thumbnailCarousel: HTMLDivElement;
+    mainCarousel: HTMLDivElement;
+    thumbnailElements: NodeListOf<HTMLDivElement>;
+    thumbnailSplide: Splide;
+    mainSplide: Splide;
+    protected firstUpdated(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/image-slider/editor-card-slider.d.ts

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

package/dist/src/components/image-slider/editor-card-slider.styles.d.ts

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

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

@@ -0,0 +1,15 @@
+export { default as MessageSelector } from './message-selector/message-selector.component.js';
+export { default as FabricExample } from './fabric-example/fabric-example.component.js';
+export { default as PboSelector } from './selector/selector.component.js';
+export { default as PboButton } from './button/button.js';
+export { default as PboButtonGroup } from './button-group/button-group.js';
+export { default as PboRadioButton } from './radio-button/radio-button.js';
+export { default as PboRadioGroup } from './radio-group/radio-group.js';
+export { default as PboTextarea } from './textarea/textarea.js';
+export { default as PboEditor } from './editor/editor.js';
+export { default as PboTypeForm } from './type-form/type-form.js';
+export { default as PboEditorCardSlider } from './image-slider/editor-card-slider.js';
+export { default as PboCategory } from './category/category.js';
+export { default as PboDrawer } from './drawer/drawer.js';
+export { default as PboPageManager } from './page-manager/page-manager.js';
+export { default as PboCardSelection } from './card-selection/card-selection.js';

package/dist/src/components/message-selector/message-selector.component.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/**
+ * A component for selecting messages.
+ *
+ * @element pairbo-message-selector
+ */
+export default class PairboMessageSelector extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static properties: {
+        giftLabel: {
+            type: StringConstructor;
+        };
+        premiumLabel: {
+            type: StringConstructor;
+        };
+        premiumDescription: {
+            type: StringConstructor;
+        };
+        noteLabel: {
+            type: StringConstructor;
+        };
+        giftSelected: {
+            type: BooleanConstructor;
+        };
+        premiumSelected: {
+            type: BooleanConstructor;
+        };
+        freeMessageSelected: {
+            type: BooleanConstructor;
+        };
+    };
+    constructor();
+    toggleMessageSelector(): void;
+    private _onGiftChange;
+    private _onPremiumChange;
+    private _onFreeMessageChange;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/message-selector/message-selector.d.ts

@@ -0,0 +1,8 @@
+import { default as PairboMessageSelector } from './message-selector.component.js';
+export * from './message-selector.component.js';
+export default PairboMessageSelector;
+declare global {
+    interface HTMLElementTagNameMap {
+        "pairbo-message-selector": PairboMessageSelector;
+    }
+}

package/dist/src/components/message-selector/message-selector.styles.d.ts

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

package/dist/src/components/message-selector/message-selector.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/page-manager/page-manager.component.d.ts

@@ -0,0 +1,41 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { default as PairboElement } from '../../internal/pairbo-element.js';
+import { default as PboCardSelection } from '../card-selection/card-selection.component.js';
+import { default as PboEditor } from '../editor/editor.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 PboPageManager extends PairboElement {
+    static styles: CSSResultGroup;
+    cardSelectionEl: PboCardSelection;
+    editorEl: PboEditor;
+    currentPage: "selection" | "editor";
+    selectedCard: string | null;
+    categories: Category[];
+    selectedCardId: string | null;
+    selectedCardDetails: {
+        cover_url: string;
+        id: string;
+    } | null;
+    private goToEditor;
+    private goToSelector;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    updated(changedProperties: PropertyValues<this>): void;
+    findCardInCategoryById(cardId: string): Card | null;
+    private handleCardSelected;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/page-manager/page-manager.d.ts

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

package/dist/src/components/page-manager/page-manager.styles.d.ts

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

package/dist/src/components/radio-button/radio-button.component.d.ts

@@ -0,0 +1,37 @@
+import { LitElement, CSSResultGroup } from 'lit';
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://shoelace.style/components/radio-button
+ * @status experimental
+ *
+ * @dependency sl-example
+ *
+ * @event sl-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 PboRadioButton extends LitElement {
+    static styles: CSSResultGroup;
+    private readonly hasSlotController;
+    input: HTMLInputElement;
+    hiddenInput: HTMLInputElement;
+    protected hasFocus: boolean;
+    checked: boolean;
+    value: string;
+    disabled: boolean;
+    size: "small" | "medium" | "large";
+    circle: boolean;
+    connectedCallback(): void;
+    private handleBlur;
+    private handleClick;
+    private handleFocus;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    private isColorString;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/radio-button/radio-button.d.ts

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

package/dist/src/components/radio-button/radio-button.styles.d.ts

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

package/dist/src/components/radio-group/radio-group.component.d.ts

@@ -0,0 +1,56 @@
+import { CSSResultGroup } from 'lit';
+import { default as PairboElement, PairboFormControl } from '../../internal/pairbo-element.js';
+import { FormControlController } from '../../internal/form.js';
+import { default as PboButtonGroup } from '../button-group/button-group.component.js';
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://shoelace.style/components/radio-group
+ * @status experimental
+ *
+ * @dependency sl-example
+ *
+ * @event sl-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 PboRadioGroup extends PairboElement implements PairboFormControl {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        "pbo-button-group": typeof PboButtonGroup;
+    };
+    protected readonly formControlController: FormControlController;
+    private readonly hasSlotController;
+    private customValidityMessage;
+    private validationTimeout;
+    private _value;
+    defaultSlot: HTMLSlotElement;
+    validationInput: HTMLInputElement;
+    private hasButtonGroup;
+    private errorMessage;
+    defaultValue: string;
+    required: boolean;
+    name: string;
+    get value(): string;
+    set value(value: string);
+    disabled: boolean;
+    form: string;
+    get validity(): ValidityState;
+    validationMessage: string;
+    checkValidity(): boolean;
+    getForm(): HTMLFormElement | null;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    private getAllRadios;
+    private updateCheckedRadio;
+    private handleRadioClick;
+    private handleKeyDown;
+    private syncRadios;
+    private handleInvalid;
+    handleValueChange(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/radio-group/radio-group.d.ts

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

package/dist/src/components/radio-group/radio-group.styles.d.ts

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

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

@@ -0,0 +1,18 @@
+import { LitElement, CSSResultGroup } from 'lit';
+interface FontOption {
+    value: string;
+    label: string;
+    font: string;
+}
+export default class PboSelector extends LitElement {
+    static styles: CSSResultGroup;
+    fonts: FontOption[];
+    get value(): any;
+    choiceEl: HTMLSelectElement;
+    private _choices?;
+    firstUpdated(): void;
+    updated: (changedProperties: Map<string, any>) => void;
+    private _initializeChoices;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};

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

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

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

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