@pairbo/ui-kit 0.2.6 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/defaultTheme.css +1 -1
  2. package/dist/pboBridge.js +1 -1
  3. package/dist/src/components/button/button.component.d.ts +1 -0
  4. package/dist/src/components/card-selection/card-selection.component.d.ts +4 -1
  5. package/dist/src/components/category/category.component.d.ts +2 -2
  6. package/dist/src/components/drawer/drawer.component.d.ts +1 -1
  7. package/dist/src/components/editor/editor.component.d.ts +1 -3
  8. package/dist/src/components/editor-card-slider/editor-card-slider.component.d.ts +0 -2
  9. package/dist/src/components/editor-selector/editor-selector.component.d.ts +2 -0
  10. package/dist/src/components/fake-loading/fake-loading.component.d.ts +51 -0
  11. package/dist/src/components/fake-loading/fake-loading.d.ts +8 -0
  12. package/dist/src/components/gift-options/gift-options.component.d.ts +50 -13
  13. package/dist/src/components/handwritten-form/handwritten-form.component.d.ts +105 -8
  14. package/dist/src/components/image/image.component.d.ts +1 -0
  15. package/dist/src/components/main.d.ts +1 -1
  16. package/dist/src/components/page-manager/page-manager.component.d.ts +17 -6
  17. package/dist/src/components/selector/selector.component.d.ts +2 -0
  18. package/dist/src/components/type-canvas/type-canvas.component.d.ts +2 -1
  19. package/dist/src/components/type-form/type-form.component.d.ts +2 -0
  20. package/dist/src/core/pbo-bridge/PboBridge.d.ts +53 -15
  21. package/dist/src/core/pbo-bridge/types.d.ts +0 -15
  22. package/dist/src/themes/default-rem.css +525 -0
  23. package/dist/src/themes/default.css +37 -47
  24. package/dist/src/utilities/index.d.ts +1 -0
  25. package/dist/ui-kit.js +1395 -852
  26. package/package.json +3 -2
  27. package/dist/assets/page-manager.component-Dzd6xKY5.js +0 -307
  28. package/dist/src/components/fabric-example/fabric-example.component.d.ts +0 -31
  29. package/dist/src/components/fabric-example/fabric-example.d.ts +0 -8
  30. package/dist/src/components/fabric-example/fabric-example.test.d.ts +0 -0
  31. /package/dist/src/components/{fabric-example/fabric-example.styles.d.ts → fake-loading/fake-loading.styles.d.ts} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pairbo/ui-kit",
3
- "version": "0.2.6",
3
+ "version": "0.3.0",
4
4
  "description": "",
5
5
  "type": "module",
6
6
  "readme": "./README-NPM.md",
@@ -24,7 +24,8 @@
24
24
  "npm:version-patch": "npm version patch",
25
25
  "npm:public-publish": "npm publish --access public",
26
26
  "publishToNPM": "run-s npm:public-publish",
27
- "npm:publish": "node ./scripts/publish-cli.js"
27
+ "npm:publish": "node ./scripts/publish-cli.js",
28
+ "dev:watch": "vite build --watch"
28
29
  },
29
30
  "keywords": [],
30
31
  "author": "",
@@ -1,307 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2019 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */const z=globalThis,Z=z.ShadowRoot&&(z.ShadyCSS===void 0||z.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,G=Symbol(),tt=new WeakMap;let pt=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==G)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(Z&&t===void 0){const s=e!==void 0&&e.length===1;s&&(t=tt.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&tt.set(e,t))}return t}toString(){return this.cssText}};const _t=r=>new pt(typeof r=="string"?r:r+"",void 0,G),J=(r,...t)=>{const e=r.length===1?r[0]:t.reduce((s,i,o)=>s+(n=>{if(n._$cssResult$===!0)return n.cssText;if(typeof n=="number")return n;throw Error("Value passed to 'css' function must be a 'css' function result: "+n+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+r[o+1],r[0]);return new pt(e,r,G)},vt=(r,t)=>{if(Z)r.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const e of t){const s=document.createElement("style"),i=z.litNonce;i!==void 0&&s.setAttribute("nonce",i),s.textContent=e.cssText,r.appendChild(s)}},et=Z?r=>r:r=>r instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return _t(e)})(r):r;/**
6
- * @license
7
- * Copyright 2017 Google LLC
8
- * SPDX-License-Identifier: BSD-3-Clause
9
- */const{is:wt,defineProperty:At,getOwnPropertyDescriptor:Et,getOwnPropertyNames:St,getOwnPropertySymbols:Ct,getPrototypeOf:Pt}=Object,_=globalThis,st=_.trustedTypes,xt=st?st.emptyScript:"",D=_.reactiveElementPolyfillSupport,T=(r,t)=>r,F={toAttribute(r,t){switch(t){case Boolean:r=r?xt:null;break;case Object:case Array:r=r==null?r:JSON.stringify(r)}return r},fromAttribute(r,t){let e=r;switch(t){case Boolean:e=r!==null;break;case Number:e=r===null?null:Number(r);break;case Object:case Array:try{e=JSON.parse(r)}catch{e=null}}return e}},K=(r,t)=>!wt(r,t),it={attribute:!0,type:String,converter:F,reflect:!1,hasChanged:K};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),_.litPropertyMetadata??(_.litPropertyMetadata=new WeakMap);class C extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=it){if(e.state&&(e.attribute=!1),this._$Ei(),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);i!==void 0&&At(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:o}=Et(this.prototype,t)??{get(){return this[e]},set(n){this[e]=n}};return{get(){return i==null?void 0:i.call(this)},set(n){const l=i==null?void 0:i.call(this);o.call(this,n),this.requestUpdate(t,l,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??it}static _$Ei(){if(this.hasOwnProperty(T("elementProperties")))return;const t=Pt(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(T("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(T("properties"))){const e=this.properties,s=[...St(e),...Ct(e)];for(const i of s)this.createProperty(i,e[i])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[s,i]of e)this.elementProperties.set(s,i)}this._$Eh=new Map;for(const[e,s]of this.elementProperties){const i=this._$Eu(e,s);i!==void 0&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const i of s)e.unshift(et(i))}else t!==void 0&&e.push(et(t));return e}static _$Eu(t,e){const s=e.attribute;return s===!1?void 0:typeof s=="string"?s:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var t;this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),(t=this.constructor.l)==null||t.forEach(e=>e(this))}addController(t){var e;(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&((e=t.hostConnected)==null||e.call(t))}removeController(t){var e;(e=this._$EO)==null||e.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return vt(t,this.constructor.elementStyles),t}connectedCallback(){var t;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$EO)==null||t.forEach(e=>{var s;return(s=e.hostConnected)==null?void 0:s.call(e)})}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$EO)==null||t.forEach(e=>{var s;return(s=e.hostDisconnected)==null?void 0:s.call(e)})}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$EC(t,e){var o;const s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(i!==void 0&&s.reflect===!0){const n=(((o=s.converter)==null?void 0:o.toAttribute)!==void 0?s.converter:F).toAttribute(e,s.type);this._$Em=t,n==null?this.removeAttribute(i):this.setAttribute(i,n),this._$Em=null}}_$AK(t,e){var o;const s=this.constructor,i=s._$Eh.get(t);if(i!==void 0&&this._$Em!==i){const n=s.getPropertyOptions(i),l=typeof n.converter=="function"?{fromAttribute:n.converter}:((o=n.converter)==null?void 0:o.fromAttribute)!==void 0?n.converter:F;this._$Em=i,this[i]=l.fromAttribute(e,n.type),this._$Em=null}}requestUpdate(t,e,s){if(t!==void 0){if(s??(s=this.constructor.getPropertyOptions(t)),!(s.hasChanged??K)(this[t],e))return;this.P(t,e,s)}this.isUpdatePending===!1&&(this._$ES=this._$ET())}P(t,e,s){this._$AL.has(t)||this._$AL.set(t,e),s.reflect===!0&&this._$Em!==t&&(this._$Ej??(this._$Ej=new Set)).add(t)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var s;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[o,n]of this._$Ep)this[o]=n;this._$Ep=void 0}const i=this.constructor.elementProperties;if(i.size>0)for(const[o,n]of i)n.wrapped!==!0||this._$AL.has(o)||this[o]===void 0||this.P(o,this[o],n)}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),(s=this._$EO)==null||s.forEach(i=>{var o;return(o=i.hostUpdate)==null?void 0:o.call(i)}),this.update(e)):this._$EU()}catch(i){throw t=!1,this._$EU(),i}t&&this._$AE(e)}willUpdate(t){}_$AE(t){var e;(e=this._$EO)==null||e.forEach(s=>{var i;return(i=s.hostUpdated)==null?void 0:i.call(s)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Ej&&(this._$Ej=this._$Ej.forEach(e=>this._$EC(e,this[e]))),this._$EU()}updated(t){}firstUpdated(t){}}C.elementStyles=[],C.shadowRootOptions={mode:"open"},C[T("elementProperties")]=new Map,C[T("finalized")]=new Map,D==null||D({ReactiveElement:C}),(_.reactiveElementVersions??(_.reactiveElementVersions=[])).push("2.0.4");/**
10
- * @license
11
- * Copyright 2017 Google LLC
12
- * SPDX-License-Identifier: BSD-3-Clause
13
- */const O=globalThis,j=O.trustedTypes,rt=j?j.createPolicy("lit-html",{createHTML:r=>r}):void 0,ut="$lit$",b=`lit$${Math.random().toFixed(9).slice(2)}$`,gt="?"+b,Ut=`<${gt}>`,A=document,R=()=>A.createComment(""),k=r=>r===null||typeof r!="object"&&typeof r!="function",Y=Array.isArray,Tt=r=>Y(r)||typeof(r==null?void 0:r[Symbol.iterator])=="function",L=`[
14
- \f\r]`,U=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ot=/-->/g,nt=/>/g,v=RegExp(`>|${L}(?:([^\\s"'>=/]+)(${L}*=${L}*(?:[^
15
- \f\r"'\`<>=]|("|')|))|$)`,"g"),at=/'/g,lt=/"/g,ft=/^(?:script|style|textarea|title)$/i,Ot=r=>(t,...e)=>({_$litType$:r,strings:t,values:e}),W=Ot(1),E=Symbol.for("lit-noChange"),p=Symbol.for("lit-nothing"),dt=new WeakMap,w=A.createTreeWalker(A,129);function mt(r,t){if(!Y(r)||!r.hasOwnProperty("raw"))throw Error("invalid template strings array");return rt!==void 0?rt.createHTML(t):t}const Ht=(r,t)=>{const e=r.length-1,s=[];let i,o=t===2?"<svg>":t===3?"<math>":"",n=U;for(let l=0;l<e;l++){const a=r[l];let h,c,d=-1,m=0;for(;m<a.length&&(n.lastIndex=m,c=n.exec(a),c!==null);)m=n.lastIndex,n===U?c[1]==="!--"?n=ot:c[1]!==void 0?n=nt:c[2]!==void 0?(ft.test(c[2])&&(i=RegExp("</"+c[2],"g")),n=v):c[3]!==void 0&&(n=v):n===v?c[0]===">"?(n=i??U,d=-1):c[1]===void 0?d=-2:(d=n.lastIndex-c[2].length,h=c[1],n=c[3]===void 0?v:c[3]==='"'?lt:at):n===lt||n===at?n=v:n===ot||n===nt?n=U:(n=v,i=void 0);const y=n===v&&r[l+1].startsWith("/>")?" ":"";o+=n===U?a+Ut:d>=0?(s.push(h),a.slice(0,d)+ut+a.slice(d)+b+y):a+b+(d===-2?l:y)}return[mt(r,o+(r[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),s]};class I{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let o=0,n=0;const l=t.length-1,a=this.parts,[h,c]=Ht(t,e);if(this.el=I.createElement(h,s),w.currentNode=this.el.content,e===2||e===3){const d=this.el.content.firstChild;d.replaceWith(...d.childNodes)}for(;(i=w.nextNode())!==null&&a.length<l;){if(i.nodeType===1){if(i.hasAttributes())for(const d of i.getAttributeNames())if(d.endsWith(ut)){const m=c[n++],y=i.getAttribute(d).split(b),N=/([.?@])?(.*)/.exec(m);a.push({type:1,index:o,name:N[2],strings:y,ctor:N[1]==="."?kt:N[1]==="?"?It:N[1]==="@"?Mt:B}),i.removeAttribute(d)}else d.startsWith(b)&&(a.push({type:6,index:o}),i.removeAttribute(d));if(ft.test(i.tagName)){const d=i.textContent.split(b),m=d.length-1;if(m>0){i.textContent=j?j.emptyScript:"";for(let y=0;y<m;y++)i.append(d[y],R()),w.nextNode(),a.push({type:2,index:++o});i.append(d[m],R())}}}else if(i.nodeType===8)if(i.data===gt)a.push({type:2,index:o});else{let d=-1;for(;(d=i.data.indexOf(b,d+1))!==-1;)a.push({type:7,index:o}),d+=b.length-1}o++}}static createElement(t,e){const s=A.createElement("template");return s.innerHTML=t,s}}function P(r,t,e=r,s){var n,l;if(t===E)return t;let i=s!==void 0?(n=e._$Co)==null?void 0:n[s]:e._$Cl;const o=k(t)?void 0:t._$litDirective$;return(i==null?void 0:i.constructor)!==o&&((l=i==null?void 0:i._$AO)==null||l.call(i,!1),o===void 0?i=void 0:(i=new o(r),i._$AT(r,e,s)),s!==void 0?(e._$Co??(e._$Co=[]))[s]=i:e._$Cl=i),i!==void 0&&(t=P(r,i._$AS(r,t.values),i,s)),t}class Rt{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=((t==null?void 0:t.creationScope)??A).importNode(e,!0);w.currentNode=i;let o=w.nextNode(),n=0,l=0,a=s[0];for(;a!==void 0;){if(n===a.index){let h;a.type===2?h=new x(o,o.nextSibling,this,t):a.type===1?h=new a.ctor(o,a.name,a.strings,this,t):a.type===6&&(h=new Nt(o,this,t)),this._$AV.push(h),a=s[++l]}n!==(a==null?void 0:a.index)&&(o=w.nextNode(),n++)}return w.currentNode=A,i}p(t){let e=0;for(const s of this._$AV)s!==void 0&&(s.strings!==void 0?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class x{get _$AU(){var t;return((t=this._$AM)==null?void 0:t._$AU)??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=p,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=(i==null?void 0:i.isConnected)??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&(t==null?void 0:t.nodeType)===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=P(this,t,e),k(t)?t===p||t==null||t===""?(this._$AH!==p&&this._$AR(),this._$AH=p):t!==this._$AH&&t!==E&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):Tt(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==p&&k(this._$AH)?this._$AA.nextSibling.data=t:this.T(A.createTextNode(t)),this._$AH=t}$(t){var o;const{values:e,_$litType$:s}=t,i=typeof s=="number"?this._$AC(t):(s.el===void 0&&(s.el=I.createElement(mt(s.h,s.h[0]),this.options)),s);if(((o=this._$AH)==null?void 0:o._$AD)===i)this._$AH.p(e);else{const n=new Rt(i,this),l=n.u(this.options);n.p(e),this.T(l),this._$AH=n}}_$AC(t){let e=dt.get(t.strings);return e===void 0&&dt.set(t.strings,e=new I(t)),e}k(t){Y(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const o of t)i===e.length?e.push(s=new x(this.O(R()),this.O(R()),this,this.options)):s=e[i],s._$AI(o),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for((s=this._$AP)==null?void 0:s.call(this,!1,!0,e);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var e;this._$AM===void 0&&(this._$Cv=t,(e=this._$AP)==null||e.call(this,t))}}class B{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,o){this.type=1,this._$AH=p,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=o,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=p}_$AI(t,e=this,s,i){const o=this.strings;let n=!1;if(o===void 0)t=P(this,t,e,0),n=!k(t)||t!==this._$AH&&t!==E,n&&(this._$AH=t);else{const l=t;let a,h;for(t=o[0],a=0;a<o.length-1;a++)h=P(this,l[s+a],e,a),h===E&&(h=this._$AH[a]),n||(n=!k(h)||h!==this._$AH[a]),h===p?t=p:t!==p&&(t+=(h??"")+o[a+1]),this._$AH[a]=h}n&&!i&&this.j(t)}j(t){t===p?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class kt extends B{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===p?void 0:t}}class It extends B{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==p)}}class Mt extends B{constructor(t,e,s,i,o){super(t,e,s,i,o),this.type=5}_$AI(t,e=this){if((t=P(this,t,e,0)??p)===E)return;const s=this._$AH,i=t===p&&s!==p||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,o=t!==p&&(s===p||i);i&&this.element.removeEventListener(this.name,this,s),o&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e;typeof this._$AH=="function"?this._$AH.call(((e=this.options)==null?void 0:e.host)??this.element,t):this._$AH.handleEvent(t)}}class Nt{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){P(this,t)}}const Qt={I:x},V=O.litHtmlPolyfillSupport;V==null||V(I,x),(O.litHtmlVersions??(O.litHtmlVersions=[])).push("3.2.1");const zt=(r,t,e)=>{const s=(e==null?void 0:e.renderBefore)??t;let i=s._$litPart$;if(i===void 0){const o=(e==null?void 0:e.renderBefore)??null;s._$litPart$=i=new x(t.insertBefore(R(),o),o,void 0,e??{})}return i._$AI(r),i};/**
16
- * @license
17
- * Copyright 2017 Google LLC
18
- * SPDX-License-Identifier: BSD-3-Clause
19
- */let H=class extends C{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e;const t=super.createRenderRoot();return(e=this.renderOptions).renderBefore??(e.renderBefore=t.firstChild),t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=zt(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Do)==null||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Do)==null||t.setConnected(!1)}render(){return E}};var ct;H._$litElement$=!0,H.finalized=!0,(ct=globalThis.litElementHydrateSupport)==null||ct.call(globalThis,{LitElement:H});const q=globalThis.litElementPolyfillSupport;q==null||q({LitElement:H});(globalThis.litElementVersions??(globalThis.litElementVersions=[])).push("4.1.1");/**
20
- * @license
21
- * Copyright 2017 Google LLC
22
- * SPDX-License-Identifier: BSD-3-Clause
23
- */const $t=r=>(t,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(r,t)}):customElements.define(r,t)};/**
24
- * @license
25
- * Copyright 2017 Google LLC
26
- * SPDX-License-Identifier: BSD-3-Clause
27
- */const Ft={attribute:!0,type:String,converter:F,reflect:!1,hasChanged:K},jt=(r=Ft,t,e)=>{const{kind:s,metadata:i}=e;let o=globalThis.litPropertyMetadata.get(i);if(o===void 0&&globalThis.litPropertyMetadata.set(i,o=new Map),o.set(e.name,r),s==="accessor"){const{name:n}=e;return{set(l){const a=t.get.call(this);t.set.call(this,l),this.requestUpdate(n,a,r)},init(l){return l!==void 0&&this.P(n,void 0,r),l}}}if(s==="setter"){const{name:n}=e;return function(l){const a=this[n];t.call(this,l),this.requestUpdate(n,a,r)}}throw Error("Unsupported decorator location: "+s)};function f(r){return(t,e)=>typeof e=="object"?jt(r,t,e):((s,i,o)=>{const n=i.hasOwnProperty(o);return i.constructor.createProperty(o,n?{...s,wrapped:!0}:s),n?Object.getOwnPropertyDescriptor(i,o):void 0})(r,t,e)}/**
28
- * @license
29
- * Copyright 2017 Google LLC
30
- * SPDX-License-Identifier: BSD-3-Clause
31
- */function Q(r){return f({...r,state:!0,attribute:!1})}/**
32
- * @license
33
- * Copyright 2017 Google LLC
34
- * SPDX-License-Identifier: BSD-3-Clause
35
- */const Bt=(r,t,e)=>(e.configurable=!0,e.enumerable=!0,Reflect.decorate&&typeof t!="object"&&Object.defineProperty(r,t,e),e);/**
36
- * @license
37
- * Copyright 2017 Google LLC
38
- * SPDX-License-Identifier: BSD-3-Clause
39
- */function X(r,t){return(e,s,i)=>{const o=n=>{var l;return((l=n.renderRoot)==null?void 0:l.querySelector(r))??null};return Bt(e,s,{get(){return o(this)}})}}function M(r,t){const e={waitUntilFirstUpdate:!1,...t};return function(s,i){const o=Array.isArray(r)?r:[r],{update:n}=s;s.update=function(l){o.forEach(a=>{const h=a;if(l.has(h)){const c=l.get(h),d=this[h];c!==d&&(!e.waitUntilFirstUpdate||this.hasUpdated)&&this[i](c,d)}}),n.call(this,l)}}}const yt=J`
40
- :host {
41
- box-sizing: border-box;
42
- }
43
-
44
- :host *,
45
- :host *::before,
46
- :host *::after {
47
- box-sizing: inherit;
48
- }
49
-
50
- [hidden] {
51
- display: none !important;
52
- }
53
- `;/**
54
- * @license
55
- * Copyright 2017 Google LLC
56
- * SPDX-License-Identifier: BSD-3-Clause
57
- */const Dt={ATTRIBUTE:1,PROPERTY:3,BOOLEAN_ATTRIBUTE:4},Lt=r=>(...t)=>({_$litDirective$:r,values:t});class Vt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,s){this._$Ct=t,this._$AM=e,this._$Ci=s}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}/**
58
- * @license
59
- * Copyright 2018 Google LLC
60
- * SPDX-License-Identifier: BSD-3-Clause
61
- */const ht=Lt(class extends Vt{constructor(r){var t;if(super(r),r.type!==Dt.ATTRIBUTE||r.name!=="class"||((t=r.strings)==null?void 0:t.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(r){return" "+Object.keys(r).filter(t=>r[t]).join(" ")+" "}update(r,[t]){var s,i;if(this.st===void 0){this.st=new Set,r.strings!==void 0&&(this.nt=new Set(r.strings.join(" ").split(/\s/).filter(o=>o!=="")));for(const o in t)t[o]&&!((s=this.nt)!=null&&s.has(o))&&this.st.add(o);return this.render(t)}const e=r.element.classList;for(const o of this.st)o in t||(e.remove(o),this.st.delete(o));for(const o in t){const n=!!t[o];n===this.st.has(o)||(i=this.nt)!=null&&i.has(o)||(n?(e.add(o),this.st.add(o)):(e.remove(o),this.st.delete(o)))}return E}});class bt extends H{emit(t,e){const s=new CustomEvent(t,{bubbles:!0,cancelable:!0,composed:!0,detail:{},...e});return this.dispatchEvent(s),s}}const qt=J`
62
- :host {
63
- --size: 70%;
64
- --header-spacing: var(--pbo-spacing-large);
65
- --body-spacing: var(--pbo-spacing-large);
66
- --footer-spacing: var(--pbo-spacing-large);
67
- --panel-background-color: var(--pbo-panel-background-color);
68
- --overlay-background-color: var(--pbo-overlay-background-color);
69
- display: contents;
70
- }
71
-
72
- .drawer {
73
- top: 0;
74
- inset-inline-start: 0;
75
- width: 100%;
76
- height: 100%;
77
- pointer-events: none;
78
- overflow: hidden;
79
- }
80
-
81
- .drawer__overlay {
82
- display: block;
83
- position: fixed;
84
- top: 0;
85
- right: 0;
86
- bottom: 0;
87
- left: 0;
88
- background-color: var(--overlay-background-color);
89
- pointer-events: all;
90
- backdrop-filter: blur(1px);
91
- -webkit-backdrop-filter: blur(1px);
92
- }
93
-
94
- .drawer--contained .drawer__overlay {
95
- display: none;
96
- }
97
-
98
- .drawer__panel {
99
- position: absolute;
100
- flex-direction: column;
101
- z-index: 2;
102
- max-width: 100%;
103
- max-height: 100%;
104
- background-color: var(--panel-background-color);
105
- box-shadow: var(--pbo-shadow-x-large);
106
- overflow: auto;
107
- pointer-events: all;
108
- }
109
-
110
- .drawer--bottom .drawer__panel {
111
- top: auto;
112
- inset-inline-end: auto;
113
- bottom: 0;
114
- inset-inline-start: 0;
115
- width: 100%;
116
- height: var(--size);
117
- border-radius: var(--pbo-border-radius-large) var(--pbo-border-radius-large) 0 0;
118
- }
119
-
120
- .drawer--left .drawer__panel {
121
- top: auto;
122
- inset-inline-end: auto;
123
- left: 0;
124
- inset-inline-start: 0;
125
- height: 100%;
126
- width: var(--size);
127
- }
128
-
129
- .drawer--right .drawer__panel {
130
- top: auto;
131
- inset-inline-end: auto;
132
- right: 0;
133
- inset-inline-start: 0;
134
- height: 100%;
135
- width: var(--size);
136
- }
137
-
138
- .drawer--top .drawer__panel {
139
- top: auto;
140
- inset-inline-end: auto;
141
- top: 0;
142
- inset-inline-start: 0;
143
- width: 100%;
144
- height: var(--size);
145
- }
146
- `;var Wt=Object.defineProperty,Zt=Object.getOwnPropertyDescriptor,S=(r,t,e,s)=>{for(var i=s>1?void 0:s?Zt(t,e):t,o=r.length-1,n;o>=0;o--)(n=r[o])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&Wt(t,e,i),i};let $=class extends bt{constructor(){super(...arguments),this.open=!1,this.placement="bottom",this.radius=!0,this.contained=!1}requestClose(r){this.hide()}async hide(){this.open=!1,this.emit("pbo-after-drawer-closed")}async show(){this.open||(this.open=!0)}handleOpenChange(){this.open?this.drawer.hidden=!1:this.drawer.hidden=!0}firstUpdated(){this.drawer.hidden=!this.open}render(){return W`
147
- <div
148
- part="base"
149
- class=${ht({drawer:!0,"drawer--bottom":this.placement==="bottom","drawer--top":this.placement==="top","drawer--left":this.placement==="left","drawer--right":this.placement==="right","drawer--open":this.open,"drawer--contained":this.contained})}
150
- >
151
- <div part="overlay" class="drawer__overlay" @click=${()=>this.requestClose("overlay")}></div>
152
- <div
153
- part="panel"
154
- class="${ht({drawer__panel:!0})}"
155
- role="dialog"
156
- aria-modal="true"
157
- aria-hidden=${this.open?"false":"true"}
158
- tabindex="0"
159
- >
160
- <slot part="body" class="drawer__body"></slot>
161
- </div>
162
- </div>
163
- `}};$.styles=[yt,qt];S([X(".drawer")],$.prototype,"drawer",2);S([f({type:Boolean,reflect:!0})],$.prototype,"open",2);S([f({reflect:!0})],$.prototype,"placement",2);S([f({type:Boolean,reflect:!0})],$.prototype,"radius",2);S([f({type:Boolean,reflect:!0})],$.prototype,"contained",2);S([M("open",{waitUntilFirstUpdate:!0})],$.prototype,"handleOpenChange",1);$=S([$t("pbo-drawer")],$);const Gt=J`
164
- :host {
165
- display: block;
166
- width: 100%;
167
- height: 100%;
168
- }
169
-
170
- .body {
171
- overflow: scroll;
172
- }
173
-
174
- .back-button {
175
- display: flex;
176
- justify-content: start;
177
- }
178
-
179
- .close-button {
180
- display: flex;
181
- justify-content: end;
182
- }
183
-
184
- .header {
185
- height: 2.5rem;
186
- padding: 0 var(--pbo-spacing-large);
187
- user-select: none;
188
- position: sticky;
189
- top: 0;
190
- background-color: var(--pbo-color-gray-100);
191
- display: grid;
192
- grid-template-columns: 1fr auto 1fr;
193
- align-items: center;
194
- font-size: var(--pbo-font-size-2xl);
195
- }
196
-
197
- .title {
198
- font-size: var(--pbo-font-size-x-large);
199
- }
200
-
201
- .icon-button {
202
- all: unset; /* Removes default button styles (border, background, padding, etc.) */
203
- display: flex;
204
- align-items: center;
205
- justify-content: center;
206
- cursor: pointer;
207
- color: var(--pbo-color-gray-500); /* Default icon color */
208
- transition:
209
- transform 0.2s ease-in-out,
210
- color 0.2s ease-in-out;
211
- }
212
-
213
- /* Apply hover effect */
214
- .icon-button:hover {
215
- transform: scale(1.1); /* Slightly enlarges the icon */
216
- color: var(--pbo-color-gray-700); /* Changes icon color on hover */
217
- }
218
-
219
- .page-manager {
220
- position: relative;
221
- height: 100%;
222
- width: 100%;
223
- display: grid;
224
- grid-template-rows: min-content auto;
225
- grid-gap: 0;
226
- }
227
-
228
- .category-selection {
229
- display: grid;
230
- height: 100%;
231
- grid-template-columns: repeat(12, 1fr);
232
- padding: var(--pbo-spacing-small);
233
- }
234
- @media screen and (min-width: 640px) {
235
- .category-selection {
236
- padding: var(--pbo-spacing-medium);
237
- }
238
- }
239
-
240
- .category-selection pbo-card-selection {
241
- grid-column: 1 / span 12;
242
- }
243
-
244
- .editor {
245
- padding: var(--pbo-spacing-small);
246
- }
247
-
248
- @media screen and (min-width: 640px) {
249
- .editor {
250
- padding: var(--pbo-spacing-medium);
251
- }
252
- }
253
-
254
- @media screen and (min-width: 768px) {
255
- .category-selection pbo-card-selection {
256
- grid-column: 2 / span 10;
257
- }
258
- }
259
-
260
- @media screen and (min-width: 1280px) {
261
- .category-selection pbo-card-selection {
262
- grid-column: 4 / span 7;
263
- }
264
- }
265
- `;var Jt=Object.defineProperty,Kt=Object.getOwnPropertyDescriptor,g=(r,t,e,s)=>{for(var i=s>1?void 0:s?Kt(t,e):t,o=r.length-1,n;o>=0;o--)(n=r[o])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&Jt(t,e,i),i};let u=class extends bt{constructor(){super(...arguments),this.onClose=()=>{},this.currentPage="selection",this.categories=[],this.selectedCard=null,this.selectedCardId=null,this.selectedCardDetails=null,this.handleCardSelected=r=>{const{cardId:t}=r.detail,e=this.findCardInCategoryById(t);console.log(r),this.editorEl.card=e,this.goToEditor()}}handleSubmitTypeFormUpdate(){this.editorEl.submitTypeForm=async r=>{this.submitTypeForm&&(this.editorEl.typeForm.disabled=!0,this.editorEl.typeForm.loading=!0,await this.submitTypeForm(r),this.editorEl.typeForm.disabled=!1,this.editorEl.typeForm.loading=!1)}}handleSubmitHandwrittenFormUpdate(){this.editorEl.submitHandwrittenForm=async r=>{this.submitHandwrittenForm&&(this.editorEl.handwrittenForm.isSubmitDisabled=!0,this.editorEl.handwrittenForm.isSubmitLoading=!0,await this.submitHandwrittenForm(r),this.editorEl.handwrittenForm.isSubmitDisabled=!1,this.editorEl.handwrittenForm.isSubmitLoading=!1)}}handleGetProcessedImgUpdate(){this.editorEl.getProcessedImg=this.getProcessedImg}goToEditor(){this.currentPage="editor"}goToSelector(){this.currentPage="selection"}connectedCallback(){var r;super.connectedCallback(),(r=this.shadowRoot)==null||r.addEventListener("pbo-category-card-selected",this.handleCardSelected)}disconnectedCallback(){var r;super.disconnectedCallback(),(r=this.shadowRoot)==null||r.removeEventListener("pbo-category-card-selected",this.handleCardSelected)}firstUpdated(){this.cardSelectionEl.categories=this.categories}handleCategoriesUpdate(){console.log(this.categories),this.cardSelectionEl&&this.categories!==void 0&&this.categories.length>0&&(this.cardSelectionEl.categories=this.categories,this.requestUpdate())}findCardInCategoryById(r){console.log("Categories from findCardInCategoryById",this.categories);for(const t of this.categories){const e=t.cards.find(s=>s.pboId===r);if(console.log("card from findCardInCategoryById",e),e)return e}return null}render(){return W`
266
- <div part="base" class="page-manager">
267
- <div class="header">
268
- <div class="back-button">
269
- ${this.currentPage!=="selection"?W`<button @click=${this.goToSelector} class="icon-button">
270
- <svg
271
- xmlns="http://www.w3.org/2000/svg"
272
- height="24px"
273
- viewBox="0 -960 960 960"
274
- width="24px"
275
- fill="currentColor"
276
- >
277
- <path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" />
278
- </svg>
279
- </button>`:""}
280
- </div>
281
- <div class="title">${this.currentPage==="selection"?"SELECT CARD":"PERSONALIZE"}</div>
282
- <div class="close-button">
283
- <button @click=${this.onClose} class="icon-button">
284
- <svg
285
- xmlns="http://www.w3.org/2000/svg"
286
- height="24px"
287
- viewBox="0 -960 960 960"
288
- width="24px"
289
- fill="currentColor"
290
- >
291
- <path
292
- d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"
293
- />
294
- </svg>
295
- </button>
296
- </div>
297
- </div>
298
- <div class="body">
299
- <div class="category-selection" ?hidden=${this.currentPage!=="selection"}>
300
- <pbo-card-selection name="selection"></pbo-card-selection>
301
- </div>
302
- <div class="editor" ?hidden=${this.currentPage!=="editor"}>
303
- <pbo-editor name="editor" ?hidden=${this.currentPage!=="editor"}></pbo-editor>
304
- </div>
305
- </div>
306
- </div>
307
- `}};u.styles=[yt,Gt];g([X("pbo-card-selection")],u.prototype,"cardSelectionEl",2);g([X("pbo-editor")],u.prototype,"editorEl",2);g([f({type:Function})],u.prototype,"onClose",2);g([f({type:String,reflect:!0})],u.prototype,"currentPage",2);g([f()],u.prototype,"categories",2);g([f()],u.prototype,"submitTypeForm",2);g([f()],u.prototype,"submitHandwrittenForm",2);g([f()],u.prototype,"getProcessedImg",2);g([Q()],u.prototype,"selectedCard",2);g([Q()],u.prototype,"selectedCardId",2);g([Q()],u.prototype,"selectedCardDetails",2);g([M("submitTypeForm")],u.prototype,"handleSubmitTypeFormUpdate",1);g([M("submitHandwrittenForm")],u.prototype,"handleSubmitHandwrittenFormUpdate",1);g([M("getProcessedImg")],u.prototype,"handleGetProcessedImgUpdate",1);g([M("categories")],u.prototype,"handleCategoriesUpdate",1);u=g([$t("pbo-page-manager")],u);export{zt as B,p as E,bt as P,E as T,Qt as Z,X as a,Q as b,yt as c,_t as d,Bt as e,ht as f,Lt as g,Vt as h,J as i,Dt as j,$ as k,u as l,f as n,H as r,$t as t,M as w,W as x};
@@ -1,31 +0,0 @@
1
- import { LitElement, CSSResultGroup } from 'lit';
2
- import { ITextEvents, SerializedTextboxProps, Textbox, TextboxProps, TOptions } from 'fabric';
3
- export default class FabricExample extends LitElement {
4
- static styles: CSSResultGroup;
5
- backgroundUrl: string;
6
- message: string;
7
- alignment: "left" | "center" | "right";
8
- fontFamily: string;
9
- color: string;
10
- private _fabricContainer;
11
- private _canvas?;
12
- private _canvasElement?;
13
- private _textbox?;
14
- private _backgroundImg;
15
- private _natureSize;
16
- private _scale;
17
- private _lineHeight;
18
- private _fontSize;
19
- private _rect?;
20
- constructor();
21
- connectedCallback(): void;
22
- disconnectedCallback(): void;
23
- formatTextbox(textbox: Textbox<TOptions<TextboxProps>, SerializedTextboxProps, ITextEvents>): void;
24
- firstUpdated(): void;
25
- adjustCanvasElements(): void;
26
- handleMessageChange(_: string, message: string): void;
27
- handleAlignmentChange(_: string, alignment: string): void;
28
- handleFontFamilyChange(_: string, font: string): void;
29
- handleColorChange(_: string, color: string): void;
30
- render(): import('lit-html').TemplateResult<1>;
31
- }
@@ -1,8 +0,0 @@
1
- import { default as FabricExample } from './fabric-example.component.js';
2
- export * from './fabric-example.component.js';
3
- export default FabricExample;
4
- declare global {
5
- interface HTMLElementTagNameMap {
6
- "fabric-example": FabricExample;
7
- }
8
- }