@pairbo/ui-kit 0.2.4 → 0.2.5

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

@@ -1,5 +1,6 @@
 import { CSSResultGroup } from 'lit';
 import { default as PairboElement, PairboFormControl } from '../../internal/pairbo-element.js';
+import { default as PboSpinner } from '../spinner/spinner.component.js';
 /**
  * @summary Short summary of the component's intended use.
  * @documentation https://shoelace.style/components/button
@@ -20,9 +21,13 @@ export default class PboButton extends PairboElement implements PairboFormContro
     reportValidity: () => boolean;
     setCustomValidity: (error: string) => void;
     static styles: CSSResultGroup;
+    static dependencies: {
+        "pbo-spinner": typeof PboSpinner;
+    };
     private readonly formControlController;
     private readonly hasSlotController;
     button: HTMLButtonElement | HTMLLinkElement;
+    spinner: PboSpinner;
     disabled: boolean;
     href: string;
     name: string;
@@ -33,6 +38,7 @@ export default class PboButton extends PairboElement implements PairboFormContro
     circle: boolean;
     type: "submit" | "reset" | "button";
     colorBlock: boolean;
+    loading: boolean;
     isIconButton: boolean;
     get validity(): ValidityState;
     get validationMessage(): string;

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

@@ -2,6 +2,7 @@ import { TemplateResult, CSSResultGroup } from 'lit';
 import { default as PairboElement } from '../../internal/pairbo-element.js';
 import { default as FabricExample } from '../fabric-example/fabric-example.component.js';
 import { PboDrawer, PboTypeCanvas } from '../main.js';
+import { default as PboImage } from '../image/image.component.js';
 /**
  * @summary Short summary of the component's intended use.
  * @status experimental
@@ -21,6 +22,7 @@ export default class PboEditorCardSlider extends PairboElement {
     static styles: CSSResultGroup;
     static dependencies: {
         "fabric-example": typeof FabricExample;
+        "pbo-image": typeof PboImage;
     };
     card: Card | null;
     focusIndex: number;

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

@@ -5,6 +5,8 @@ export default class PboEditorSelector extends PairboElement {
     private readonly hasSlotController;
     size: "medium" | "large" | "small";
     label: string;
+    disabled: boolean;
+    handleDisabledChanged(): void;
     get value(): any;
     choiceEl: HTMLSelectElement;
     private _choices?;

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

@@ -1,5 +1,6 @@
 import { CSSResultGroup } from 'lit';
 import { default as PairboElement } from '../../internal/pairbo-element.js';
+import { default as PboButton } from '../button/button.component.js';
 /**
  * @summary Short summary of the component's intended use.
  * @status experimental
@@ -17,11 +18,17 @@ import { default as PairboElement } from '../../internal/pairbo-element.js';
  */
 export default class PboHandwrittenForm extends PairboElement {
     static styles: CSSResultGroup;
-    imageInput: HTMLInputElement;
-    handwrittenForm: HTMLFormElement;
     card: Card | null;
     submitHandwrittenForm: SubmitHandwrittenForm;
     getProcessedImg: GetProcessedImg;
+    isSubmitLoading: boolean;
+    isSubmitDisabled: boolean;
+    imageInput: HTMLInputElement;
+    handwrittenForm: HTMLFormElement;
+    uploadButton: PboButton;
+    saveButton: PboButton;
+    reuploadButton: PboButton;
+    isImageProcessing: boolean;
     sourceImg: File | null;
     processedImg: {
         fileUrl: string | null;
@@ -37,8 +44,13 @@ export default class PboHandwrittenForm extends PairboElement {
         cardWidth: number | null;
     };
     showPicker(): void;
+    setButtonsDisabled(disable: boolean): void;
+    setButtonsLoading(loading: boolean): void;
+    handleSubmitLoadingChange(): void;
+    handleSubmitDisabledChange(): void;
     handleSourceImgChange(oldFile: File | null, newFile: File | null): void;
     handleProcessImageChange(oldFileUrl: string | null, newFileUrl: string | null): void;
+    handleImageProcessingChange(): void;
     get formData(): HandwrittenFormData;
     setDimensions(dimensions: {
         top: number | null;

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

@@ -0,0 +1,32 @@
+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 PboImage extends PairboElement {
+    static styles: CSSResultGroup;
+    skeletonHeight: string;
+    skeletonWidth: string;
+    src: string;
+    alt: string;
+    placeholder: string;
+    private loaded;
+    private imgEl;
+    handleSrcChange(): void;
+    private handleError;
+    private handleOnLoad;
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

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

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

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

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

@@ -19,3 +19,5 @@ export { default as PboEditorSelector } from './editor-selector/editor-selector.
 export { default as PboHandwrittenForm } from './handwritten-form/handwritten-form.js';
 export { default as PboHandwrittenCanvas } from './handwritten-canvas/handwritten-canvas.js';
 export { default as PboGiftOption } from './gift-options/gift-options.js';
+export { default as PboSpinner } from './spinner/spinner.js';
+export { default as PboImage } from './image/image.js';

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

@@ -8,11 +8,13 @@ export default class PboSelector extends LitElement {
     static styles: CSSResultGroup;
     private readonly hasSlotController;
     fonts: FontOption[];
+    disabled: boolean;
     size: "medium" | "large" | "small";
     label: string;
     get value(): any;
     choiceEl: HTMLSelectElement;
     private _choices?;
+    handleDisabledChanged(): void;
     firstUpdated(): void;
     private _initializeChoices;
     render(): import('lit-html').TemplateResult<1>;

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

@@ -0,0 +1,6 @@
+import { CSSResultGroup } from 'lit';
+import { default as PairboElement } from '../../internal/pairbo-element.js';
+export default class PboSpinner extends PairboElement {
+    static styles: CSSResultGroup;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

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

package/dist/src/components/spinner/spinner.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

@@ -29,15 +29,6 @@ export default class PboTypeForm extends PairboElement {
         "pbo-radio-button": typeof PboRadioGroup;
         "pbo-button": typeof PboButton;
     };
-    greetingText: PboTextarea;
-    fontSelector: PboSelector;
-    textColor: PboRadioGroup;
-    textAlignment: PboRadioGroup;
-    typingForm: HTMLFormElement;
-    textArea: PboTextarea;
-    windowHeight: number;
-    private resizeTimeout;
-    charsNum: number;
     static readonly CTA_STATES: {
         danger: {
             type: string;
@@ -48,13 +39,27 @@ export default class PboTypeForm extends PairboElement {
             message: string;
         };
     };
+    private resizeTimeout;
+    cardInnerImageUrl: string;
+    card: Card | null;
+    submitTypeForm: SubmitTypeForm;
+    loading: boolean;
+    disabled: boolean;
+    greetingText: PboTextarea;
+    fontSelector: PboSelector;
+    textColor: PboRadioGroup;
+    textAlignment: PboRadioGroup;
+    typingForm: HTMLFormElement;
+    textArea: PboTextarea;
+    ctaButtons: NodeListOf<PboButton>;
+    windowHeight: number;
+    charsNum: number;
     ctaButtonState: {
         type: string;
         message: string;
     };
-    cardInnerImageUrl: string;
-    card: Card | null;
-    submitTypeForm: SubmitTypeForm;
+    isLoadingChanged(): void;
+    disabledChanged(): void;
     protected firstUpdated(): void;
     get formData(): TypeFormData;
     private handleFormChange;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pairbo/ui-kit",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "",
   "type": "module",
   "readme": "./README-NPM.md",