@pictogrammers/components 0.4.2 → 0.4.3
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.
- package/package.json +1 -1
- package/pg/app/app.css +3 -1
- package/pg/app/app.html +3 -1
- package/pgApp.js +1 -1
package/package.json
CHANGED
package/pg/app/app.css
CHANGED
package/pg/app/app.html
CHANGED
package/pgApp.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{"use strict";var e={314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",o=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),o&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),o&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,o,r,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(o)for(var s=0;s<this.length;s++){var l=this[s][0];null!=l&&(a[l]=!0)}for(var c=0;c<e.length;c++){var d=[].concat(e[c]);o&&a[d[0]]||(void 0!==i&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=i),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),r&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=r):d[4]="".concat(r)),t.push(d))}},t}},601:e=>{e.exports=function(e){return e[1]}},801:(e,t,n)=>{n.d(t,{A:()=>l});var o=n(601),r=n.n(o),i=n(314),a=n.n(i)()(r());a.push([e.id,":host {\n display: contents;\n}\n\n[part=grid] {\n display: grid;\n grid-template-columns: auto 0.5rem 1fr;\n grid-template-rows: auto 1fr;\n height: 100%;\n}\n\n[part=header] {\n display: flex;\n grid-column: 1 / 4;\n grid-row: 1;\n border-bottom: 2px solid #453C4F;\n}\n\n[part=header] > button {\n display: flex;\n border: 0;\n padding: 0.5rem;\n background-color: transparent;\n border-right: 1px solid rgba(69, 60, 79, 0.5);\n outline: none;\n}\n\n[part=header] > button:hover {\n background-color: rgba(69, 60, 79, 0.10);\n}\n\n[part=header] > button:focus-visible {\n position: relative;\n}\n\n[part=header] > button:focus-visible::before {\n pointer-events: none;\n content: '';\n position: absolute;\n top: 3px;\n right: 3px;\n bottom: 3px;\n left: 3px;\n box-shadow: 0 0 0 3px var(--pg-focus-color, rgba(79, 143, 249, 0.5));\n}\n\n[part=header] > button.selected {\n --pg-icon-color: rgb(79, 143, 249);\n}\n\n[part=header] > button.selected:hover {\n background-color: #fff;\n}\n\n[part=side] {\n display: flex;\n flex-direction: column;\n grid-column: 1;\n grid-row: 2;\n min-width: 10rem;\n max-width: 20rem;\n}\n\
|
|
1
|
+
(()=>{"use strict";var e={314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",o=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),o&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),o&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,o,r,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(o)for(var s=0;s<this.length;s++){var l=this[s][0];null!=l&&(a[l]=!0)}for(var c=0;c<e.length;c++){var d=[].concat(e[c]);o&&a[d[0]]||(void 0!==i&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=i),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),r&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=r):d[4]="".concat(r)),t.push(d))}},t}},601:e=>{e.exports=function(e){return e[1]}},801:(e,t,n)=>{n.d(t,{A:()=>l});var o=n(601),r=n.n(o),i=n(314),a=n.n(i)()(r());a.push([e.id,":host {\n display: contents;\n}\n\n[part=grid] {\n display: grid;\n grid-template-columns: auto 0.5rem 1fr;\n grid-template-rows: auto 1fr;\n height: 100%;\n}\n\n[part=header] {\n display: flex;\n grid-column: 1 / 4;\n grid-row: 1;\n border-bottom: 2px solid #453C4F;\n}\n\n[part=header] > button {\n display: flex;\n border: 0;\n padding: 0.5rem;\n background-color: transparent;\n border-right: 1px solid rgba(69, 60, 79, 0.5);\n outline: none;\n}\n\n[part=header] > button:hover {\n background-color: rgba(69, 60, 79, 0.10);\n}\n\n[part=header] > button:focus-visible {\n position: relative;\n}\n\n[part=header] > button:focus-visible::before {\n pointer-events: none;\n content: '';\n position: absolute;\n top: 3px;\n right: 3px;\n bottom: 3px;\n left: 3px;\n box-shadow: 0 0 0 3px var(--pg-focus-color, rgba(79, 143, 249, 0.5));\n}\n\n[part=header] > button.selected {\n --pg-icon-color: rgb(79, 143, 249);\n}\n\n[part=header] > button.selected:hover {\n background-color: #fff;\n}\n\n[part=side] {\n display: flex;\n flex-direction: column;\n grid-column: 1;\n grid-row: 2;\n min-width: 10rem;\n max-width: 20rem;\n}\n\n[part=main] {\n display: flex;\n flex-direction: column;\n grid-column: 3;\n grid-row: 2;\n}\n\n[part=resize] {\n display: flex;\n grid-column: 2;\n grid-row: 2;\n border: 0;\n padding: 0;\n cursor: ew-resize;\n border-left: 1px solid #453C4F;\n border-right: 1px solid #453C4F;\n background-color: transparent;\n}\n\n[part=resize].dragging {\n background-color: var(--pg-focus-color, rgb(79, 143, 249, 0.5))\n}\n\n[part=home] {\n display: flex;\n flex-direction: column;\n grid-column: 1 / 4;\n grid-row: 2;\n background-color: #fff;\n position: relative;\n}\n\n[part=home]::before {\n content: ' ';\n position: absolute;\n top: -2px;\n width: 2.5rem;\n height: 2px;\n background-color: #fff;\n}\n\n[part=home].selected {\n background-color: #fff;\n}\n\n.hide {\n display: none;\n}",""]);var s=new CSSStyleSheet;s.replaceSync(a.toString());const l=s}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var i=t[o]={id:o,exports:{}};return e[o](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);Symbol("addObserver"),Symbol("removeObserver"),Symbol("getObservers"),Symbol("isProxy"),Symbol("getTarget");const o=new Map;window.observers=o;Error;Symbol("index");const r=Symbol("init"),i=Symbol("template"),a=Symbol("style"),s=Symbol("parent");function l(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function c(e={}){return function(t,n){if("class"!==n.kind)throw new Error("@Component() can only decorate a class");var o,c;Reflect.defineProperty(t,"name",{value:e.selector,writable:!1,configurable:!1}),!t.prototype[s]||t.prototype[s][t.prototype[s].length-1]instanceof Object.getPrototypeOf(t)?t.prototype instanceof HTMLElement&&(t.prototype[s]=[t.prototype],t.prototype[a]=e.style?[e.style]:[],t.prototype[i]=e.template||""):(t.prototype[s].push(t.prototype),t.prototype[a].push(e.style),t.prototype[i]=(o=t.prototype[i],(c=e.template||null)&&c.match(/<parent\/>/)?c.replace(/<parent\/>/,o):`${o}${c||""}`));const d=t.prototype.connectedCallback||(()=>{}),p=t.prototype.disconnectedCallback||(()=>{});t.prototype.connectedCallback=function(){if(this[r]||void 0!==e.template||void 0!==e.style)if(this[r]){if(this[r]&&e.style);else if(this[r]&&e.selector&&!e.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===e.useShadow)throw new Error("unsupported");{const e=document.createElement("template");e.innerHTML=t.prototype[i]||"";const n=document.importNode(e.content,!0),o=this.attachShadow({mode:"open"});o.adoptedStyleSheets=t.prototype[a].map((e=>{if(e instanceof CSSStyleSheet)return e;var t=new CSSStyleSheet;return t.replaceSync(e.toString()),t})),o.appendChild(n)}}else!1===e.useShadow||this.attachShadow({mode:"open"});const n=new Set;for(const e of this.shadowRoot.querySelectorAll("*"))-1!==e.localName.indexOf("-")&&n.add(e.localName);const o=Array.from(n.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),c=()=>{this[s].map((e=>{e.render&&e.render.call(this,t.observedAttributes?t.observedAttributes.reduce(((e,t)=>(e[l(t)]=!0,e)),{}):{})}))};0===o.length?(this[r]=!0,d.call(this),c()):Promise.all(o).then((()=>{this[r]=!0,d.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));c()}))},t.prototype.disconnectedCallback=function(){p.call(this)},t.prototype.attributeChangedCallback=function(e,t,n){this[l(e)]=n},n.addInitializer((function(){if(e.selector){if(window.customElements.get(e.selector))throw new Error(`@Component() ${n.name} duplicate selector '${e.selector}'`);window.customElements.define(e.selector,t)}}))}}Symbol("transmute");function d(){return function(e,t){const n=t.name,o=n.replace(/^\$/,"");t.addInitializer((function(){let e=null;Reflect.defineProperty(this,n,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${o}]`))}})}))}}Symbol("hasProxy");Symbol("meta");var p=n(801),u=function(e,t,n,o,r,i){function a(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=o.kind,c="getter"===l?"get":"setter"===l?"set":"value",d=!t&&e?o.static?e:e.prototype:null,p=t||(d?Object.getOwnPropertyDescriptor(d,o.name):{}),u=!1,h=n.length-1;h>=0;h--){var m={};for(var f in o)m[f]="access"===f?{}:o[f];for(var f in o.access)m.access[f]=o.access[f];m.addInitializer=function(e){if(u)throw new TypeError("Cannot add initializers after decoration has completed");i.push(a(e||null))};var g=(0,n[h])("accessor"===l?{get:p.get,set:p.set}:p[c],m);if("accessor"===l){if(void 0===g)continue;if(null===g||"object"!=typeof g)throw new TypeError("Object expected");(s=a(g.get))&&(p.get=s),(s=a(g.set))&&(p.set=s),(s=a(g.init))&&r.unshift(s)}else(s=a(g))&&("field"===l?r.unshift(s):p[c]=s)}d&&Object.defineProperty(d,o.name,p),u=!0},h=function(e,t,n){for(var o=arguments.length>2,r=0;r<t.length;r++)n=o?t[r].call(e,n):t[r].call(e);return o?n:void 0};(()=>{let e,t,n,o,r,i,a=[c({selector:"pg-app",style:p.A,template:'<div part="grid"> <header part="header"> <button part="logo"> <slot name="icon"></slot> </button> <slot name="top"></slot> </header> <div part="side"> <slot name="side"></slot> </div> <button part="resize"></button> <div part="main"> <slot name="main"></slot> </div> <div part="home" class="hide"> <slot name="home"></slot> </div> </div>'})],s=[],l=HTMLElement,m=[],f=[],g=[],b=[],v=[],y=[],w=[],S=[];(class extends l{static{t=this}static{const c="function"==typeof Symbol&&Symbol.metadata?Object.create(l[Symbol.metadata]??null):void 0;n=[d()],o=[d()],r=[d()],i=[d()],u(null,null,n,{kind:"field",name:"$logo",static:!1,private:!1,access:{has:e=>"$logo"in e,get:e=>e.$logo,set:(e,t)=>{e.$logo=t}},metadata:c},m,f),u(null,null,o,{kind:"field",name:"$home",static:!1,private:!1,access:{has:e=>"$home"in e,get:e=>e.$home,set:(e,t)=>{e.$home=t}},metadata:c},g,b),u(null,null,r,{kind:"field",name:"$side",static:!1,private:!1,access:{has:e=>"$side"in e,get:e=>e.$side,set:(e,t)=>{e.$side=t}},metadata:c},v,y),u(null,null,i,{kind:"field",name:"$resize",static:!1,private:!1,access:{has:e=>"$resize"in e,get:e=>e.$resize,set:(e,t)=>{e.$resize=t}},metadata:c},w,S),u(null,e={value:t},a,{kind:"class",name:t.name,metadata:c},null,s),t=e.value,c&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c}),h(t,s)}$logo=h(this,m,void 0);$home=(h(this,f),h(this,g,void 0));$side=(h(this,b),h(this,v,void 0));$resize=(h(this,y),h(this,w,void 0));connectedCallback(){this.$logo.addEventListener("click",this.#e.bind(this)),this.$resize.addEventListener("pointerdown",this.#t.bind(this))}#e(){this.$logo.classList.toggle("selected"),this.$home.classList.toggle("hide")}#t(e){const{clientX:t}=e;this.$resize.classList.add("dragging");const n=this.$side.getBoundingClientRect().width;let o=t;const r=e=>{const t=o-e.clientX,r=n-t;this.$side.style.width=`${r}px`},i=()=>{this.$resize.classList.remove("dragging"),document.removeEventListener("pointermove",r),document.removeEventListener("pointerup",i)};document.addEventListener("pointermove",r),document.addEventListener("pointerup",i)}constructor(){super(...arguments),h(this,S)}})})()})();
|