@sutton-signwriting/sgnw-components/dist/components/fsw-palette.js

a javascript package of web components for use with the SignWriting script.

/*!
 * The Sutton SignWriting Web Components
 */
import{proxyCustomElement as t,HTMLElement as s,h as e,Host as i,transformTag as a}from"@stencil/core/internal/client";import{c as l,H as h,C as r,A as c,a as o,b as n,d as p}from"./icons.js";import{i as f,p as w,a as m,h as u}from"./global.js";import{d}from"./fsw-button2.js";import{d as b}from"./fsw-palette-symbol2.js";const g=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.orientation="vertical",this.major=10,this.minor=3,this.total=30,this.size="small",this.alphabet=f,this.group=null,this.base=null,this.more=!1,this.hasMore=!1,this.lower=!1,this.hasLower=!1,this.palette=[]}parseSizeProp(t){switch(t){case"large":this.major=16,this.minor=6;break;case"medium":this.major=10,this.minor=6;break;default:this.major=10,this.minor=3}this.total=this.major*this.minor}watchGroup(){null==this.group&&null!=this.base?this.base=null:this.setPalette()}watchBase(){this.setPalette()}watchMore(){this.setPalette()}watchLower(){this.setPalette()}getPaletteAll(){let t=Object.keys(this.alphabet);return"large"==this.size&&(t=w(t,10,16)),t=m(t,this.total),this.more=!1,this.hasMore=!1,this.lower=!1,this.hasLower=!1,t}getPaletteGroup(){let t=this.alphabet[this.group];return"large"==this.size&&(t=w(t,10,16)),t=m(t,this.total),t.length>this.total?(this.hasMore=!0,t=this.more?t.slice(this.total,2*this.total):t.slice(0,this.total)):(this.more=!1,this.hasMore=!1),this.lower=!1,this.hasLower=!1,t}getPaletteBase(){const t=this.base.slice(0,4);let s;const e=t+"18",i=t+"30";let a=0,h=16,r=0,c=6;"large"!=this.size&&(this.hasLower=u(l.key2id(t+"08"))||u(l.key2id(e)),this.lower?a=8:h=8),"small"==this.size&&(this.hasMore=u(l.key2id(i)),this.more?r=3:c=3);let o=[];for(var n=r;n<c;n++)for(var p=a;p<h;p++)s=t+n+p.toString(16),o.push(s);return"large"!=this.size&&(o=w(o,8,10)),o}setPalette(){let t;switch(!0){case!this.group:t=this.getPaletteAll();break;case!!this.group&&!!this.base:t=this.getPaletteBase();break;case!!this.group:t=this.getPaletteGroup()}this.palette=[...t]}paletteSymbolClickHandler(t){switch(!0){case!this.group:this.group=t.detail;break;case!!this.group&&!!this.base:break;case!!this.group:this.base=t.detail,this.more=!1}}componentWillLoad(){"string"==typeof this.alphabet&&(this.alphabet=JSON.parse(this.alphabet)),this.parseSizeProp(this.size),this.setPalette()}render(){return e(i,{key:"daf9f849406f889c8e248bbd31ad959399b146d6",class:this.orientation+" "+this.size},e("nav",{key:"44db475c1b05e9eba9b3c6140d76db96e43918e0"},e("fsw-button",{key:"127f68408c406871a8e0cb6a2a50c3ab2f7c021f",svg:h,onClick:()=>{this.group=null}}),this.group?e("fsw-button",{svg:r,onClick:()=>{this.base?(this.base=null,this.more=null):this.group=null}}):e("div",null),this.hasMore?e("fsw-button",{svg:this.more?c:o,onClick:()=>{this.more=!this.more}}):"small"==this.size?e("div",null):null,this.hasLower?e("fsw-button",{svg:this.lower?n:p,onClick:()=>{this.lower=!this.lower}}):"large"!=this.size?e("div",null):null),e("main",{key:"3994c70708d811621084a62e4a0532a1f489022d"},this.palette.map((t=>e("fsw-palette-symbol",{symbol:t})))))}get el(){return this}static get watchers(){return{size:[{parseSizeProp:0}],group:[{watchGroup:0}],base:[{watchBase:0}],more:[{watchMore:0}],lower:[{watchLower:0}]}}static get style(){return".sc-fsw-palette-h{width:100%;height:100%;display:flex}.sc-fsw-palette-h nav.sc-fsw-palette{height:100%;width:100%;flex:0 0 10%;display:flex;align-items:center}.sc-fsw-palette-h nav.sc-fsw-palette fsw-button.sc-fsw-palette,.sc-fsw-palette-h nav.sc-fsw-palette div.sc-fsw-palette{flex:25%;height:100%;width:100%;margin:1%}.sc-fsw-palette-h main.sc-fsw-palette{flex:0 0 90%;width:100%;height:100%;display:grid}.horizontal.sc-fsw-palette-h{flex-direction:row}.horizontal.sc-fsw-palette-h nav.sc-fsw-palette{flex-direction:column}.horizontal.small.sc-fsw-palette-h main.sc-fsw-palette{grid-template-columns:repeat(10,1fr)}.horizontal.medium.sc-fsw-palette-h main.sc-fsw-palette{grid-template-columns:repeat(10,1fr)}.horizontal.large.sc-fsw-palette-h main.sc-fsw-palette{grid-template-columns:repeat(16,1fr)}.vertical.sc-fsw-palette-h{flex-direction:column}.vertical.sc-fsw-palette-h nav.sc-fsw-palette{flex-direction:row}.vertical.sc-fsw-palette-h main.sc-fsw-palette{grid-auto-flow:column}.vertical.small.sc-fsw-palette-h main.sc-fsw-palette{grid-template-rows:repeat(10,1fr)}.vertical.medium.sc-fsw-palette-h main.sc-fsw-palette{grid-template-rows:repeat(10,1fr)}.vertical.large.sc-fsw-palette-h main.sc-fsw-palette{grid-template-rows:repeat(16,1fr)}"}},[2,"fsw-palette",{orientation:[1],size:[1],alphabet:[1],group:[1537],base:[1537],more:[1540],lower:[1540],palette:[32]},[[0,"paletteSymbolClick","paletteSymbolClickHandler"]],{size:[{parseSizeProp:0}],group:[{watchGroup:0}],base:[{watchBase:0}],more:[{watchMore:0}],lower:[{watchLower:0}]}]),v=g,k=function(){"undefined"!=typeof customElements&&["fsw-palette","fsw-button","fsw-palette-symbol"].forEach((t=>{switch(t){case"fsw-palette":customElements.get(a(t))||customElements.define(a(t),g);break;case"fsw-button":customElements.get(a(t))||d();break;case"fsw-palette-symbol":customElements.get(a(t))||b()}}))};export{v as FswPalette,k as defineCustomElement}