@sutton-signwriting/sgnw-components/dist/components/sgnw-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 n,A as r,a as c,b as o,d as g}from"./icons.js";import{b as p,p as w,a as m,h as u}from"./global.js";import{d}from"./sgnw-button2.js";import{d as b}from"./sgnw-palette-symbol2.js";const f=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=p,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=l.swu2key(this.base).slice(0,4);let s;const e=t+"18",i=t+"30";let a=0,h=16,n=0,r=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?n=3:r=3);let c=[];for(var o=n;o<r;o++)for(var g=a;g<h;g++)s=t+o+g.toString(16),c.push(l.key2swu(s));return"large"!=this.size&&(c=w(c,8,10)),c}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:"6c40b2b9b9df3bb46a8cef15c8f18707ca69f10f",class:this.orientation+" "+this.size},e("nav",{key:"562325db4ea158cea1dba3f577a4d4a35de01ccd"},e("sgnw-button",{key:"2bc045419eb5257d45d92a3ae3af7601219f04cf",svg:h,onClick:()=>{this.group=null}}),this.group?e("sgnw-button",{svg:n,onClick:()=>{this.base?(this.base=null,this.more=null):this.group=null}}):e("div",null),this.hasMore?e("sgnw-button",{svg:this.more?r:c,onClick:()=>{this.more=!this.more}}):"small"==this.size?e("div",null):null,this.hasLower?e("sgnw-button",{svg:this.lower?o:g,onClick:()=>{this.lower=!this.lower}}):"large"!=this.size?e("div",null):null),e("main",{key:"6726d7c52afdfe5ff4edc034296488042b9b4bf1"},this.palette.map((t=>e("sgnw-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-sgnw-palette-h{width:100%;height:100%;display:flex}.sc-sgnw-palette-h nav.sc-sgnw-palette{height:100%;width:100%;flex:0 0 10%;display:flex;align-items:center}.sc-sgnw-palette-h nav.sc-sgnw-palette fsw-button.sc-sgnw-palette,.sc-sgnw-palette-h nav.sc-sgnw-palette div.sc-sgnw-palette{flex:25%;height:100%;width:100%;margin:1%}.sc-sgnw-palette-h main.sc-sgnw-palette{flex:0 0 90%;width:100%;height:100%;display:grid}.horizontal.sc-sgnw-palette-h{flex-direction:row}.horizontal.sc-sgnw-palette-h nav.sc-sgnw-palette{flex-direction:column}.horizontal.small.sc-sgnw-palette-h main.sc-sgnw-palette{grid-template-columns:repeat(10,1fr)}.horizontal.medium.sc-sgnw-palette-h main.sc-sgnw-palette{grid-template-columns:repeat(10,1fr)}.horizontal.large.sc-sgnw-palette-h main.sc-sgnw-palette{grid-template-columns:repeat(16,1fr)}.vertical.sc-sgnw-palette-h{flex-direction:column}.vertical.sc-sgnw-palette-h nav.sc-sgnw-palette{flex-direction:row}.vertical.sc-sgnw-palette-h main.sc-sgnw-palette{grid-auto-flow:column}.vertical.small.sc-sgnw-palette-h main.sc-sgnw-palette{grid-template-rows:repeat(10,1fr)}.vertical.medium.sc-sgnw-palette-h main.sc-sgnw-palette{grid-template-rows:repeat(10,1fr)}.vertical.large.sc-sgnw-palette-h main.sc-sgnw-palette{grid-template-rows:repeat(16,1fr)}"}},[2,"sgnw-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=f,k=function(){"undefined"!=typeof customElements&&["sgnw-palette","sgnw-button","sgnw-palette-symbol"].forEach((t=>{switch(t){case"sgnw-palette":customElements.get(a(t))||customElements.define(a(t),f);break;case"sgnw-button":customElements.get(a(t))||d();break;case"sgnw-palette-symbol":customElements.get(a(t))||b()}}))};export{v as SgnwPalette,k as defineCustomElement}