tinkiet 0.2.64 → 0.2.66

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 (3) hide show
  1. package/drawer/drawer.scss.js +2 -2
  2. package/package.json +1 -1
  3. package/umd/tinkiet.min.js +1 -1
package/drawer/drawer.scss.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--drawer-width:256px;display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:scroll;position:absolute;top:0;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}:host([left]) .drawer{right:0;transform:translateX(100%)}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:scroll;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width)}:host([open][over]) .container{padding-left:0}:host([open][over]) .overlay{display:block}@media (max-width:var(--drawer-trigger-width,400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}";
2
- var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--drawer-width:256px;display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:scroll;position:absolute;top:0;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}:host([left]) .drawer{right:0;transform:translateX(100%)}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:scroll;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width)}:host([open][over]) .container{padding-left:0}:host([open][over]) .overlay{display:block}@media (max-width:var(--drawer-trigger-width,400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}";
1
+ var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:scroll;position:absolute;top:0;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width,256px);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:scroll;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .container{overflow:hidden}:host([left]) .drawer{right:0;transform:translateX(100%)}:host([open]:not([left])) .drawer{transform:none}:host([open]:not([left])) .container{padding-left:var(--drawer-width)}:host([open][left]) .drawer{transform:none}:host([open][left]) .container{padding-right:var(--drawer-width)}:host([open][over]:not([left])) .container{padding-left:0}:host([open][over]:not([left])) .overlay{display:block}:host([open][over][left]) .container{padding-right:0}:host([open][over][left]) .overlay{display:block}@media (max-width:var(--drawer-trigger-width,400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}";
2
+ var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:scroll;position:absolute;top:0;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width,256px);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:scroll;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .container{overflow:hidden}:host([left]) .drawer{right:0;transform:translateX(100%)}:host([open]:not([left])) .drawer{transform:none}:host([open]:not([left])) .container{padding-left:var(--drawer-width)}:host([open][left]) .drawer{transform:none}:host([open][left]) .container{padding-right:var(--drawer-width)}:host([open][over]:not([left])) .container{padding-left:0}:host([open][over]:not([left])) .overlay{display:block}:host([open][over][left]) .container{padding-right:0}:host([open][over][left]) .overlay{display:block}@media (max-width:var(--drawer-trigger-width,400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}";
3
3
 
4
4
  export { css_248z as default, stylesheet };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tinkiet",
3
- "version": "0.2.64",
3
+ "version": "0.2.66",
4
4
  "description": "Pragmatic UI Web Components",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
package/umd/tinkiet.min.js CHANGED
@@ -143,7 +143,7 @@ t.TkBadge=class extends t.TkBox{static get styles(){return[...t.TkBox.styles,l`$
143
143
  * @attr {Boolean} ripple - display ripple when active
144
144
  * @attr {Boolean} small - mini button
145
145
  */
146
- t.TkButton=class extends t.TkBox{constructor(){super(...arguments),this.href=null,this.type="button",this.disabled=!1}static get styles(){return[...t.TkBox.styles,l`${n("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));--color-darker:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--text:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));align-items:center;background-color:var(--color);border:1px solid var(--color);border-radius:var(--border-radius-medium,.25rem);box-sizing:border-box;color:var(--text);cursor:pointer;display:inline-flex;flex-direction:row;font-family:Roboto,sans-serif;height:2.5em;justify-content:center;letter-spacing:.8px;line-height:2.5em;padding:0 var(--spacing-m,1rem);position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;user-select:none;vertical-align:middle;white-space:nowrap}:host .content{align-items:center;display:flex;pointer-events:none}:host .before{align-items:center;display:flex}:host .before ::slotted(*){margin-right:var(--spacing-s,.5rem)}:host .after{align-items:center;display:flex}:host .after ::slotted(*){margin-left:var(--spacing-s,.5rem)}:host .badge-out{display:flex;pointer-events:none;position:absolute;right:-.8em;top:-.7em}:host .badge-in{display:flex;pointer-events:none;position:absolute;right:2px;top:2px}:host(:focus){outline:none}:host(:focus),:host(:hover){--color:var(--primary-light,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*1.15)))}:host(:active){--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)))}:host([inverted]){--color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));--text:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)))}:host([inverted]:focus),:host([inverted]:hover){--color:#0000001a}:host([inverted]:active){--color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)))}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)));--color-darker:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent]:focus),:host([accent]:hover){--color:var(--accent-light,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),calc(var(--accent-l, 72.7451%)*1.15)))}:host([accent]:active){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent][inverted]){--color:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)));--text:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent][inverted]:focus),:host([accent][inverted]:hover){--color:#0000001a}:host([accent][inverted]:active){--color:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)))}:host([outlined]){background:var(--background,#f7f7f7) radial-gradient(circle,#0000 1%,var(--background,#f7f7f7) 1%) center/15000%;color:var(--color)}:host([pill]){border-radius:var(--border-radius-pill,9999px)}:host([small]){font-size:.8em;height:28px;line-height:.9em;padding:0 var(--spacing-s,.5rem)}:host([small]) .before ::slotted(*){margin-right:var(--spacing-xs,.25rem)}:host([small]) .after ::slotted(*){margin-left:var(--spacing-xs,.25rem)}:host([fab]){align-items:center;border-radius:50%;box-shadow:var(--elevation-1,0 1px 2px var(--shadow));height:40px;justify-content:center;line-height:normal;overflow:hidden;padding:0;width:40px}:host([fab]):hover{box-shadow:var(--elevation-3,0 4px 8px var(--shadow))}:host([fab][small]){font-size:.75em;height:30px;width:30px}:host([flat]){box-shadow:none}:host([flat]):hover{box-shadow:none}:host([disabled]),:host([disabled][accent]){--text:var(--button-color-disabled,var(--shade-lighter));--color:var(--button-bg-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));box-shadow:none;cursor:default;pointer-events:none}")}`]}render(){return H`<div class="before"><slot name="before"></slot></div><div class="content"><slot></slot></div><div class="after"><slot name="after"></slot></div><div class="badge-in"><slot name="badge-in"></slot></div><div class="badge-out"><slot name="badge-out"></slot></div>${this.href?H`<a hidden id="ahref" href="${this.href}" target="${ht(this.target)}" rel="noreferrer"></a>`:""} <button id="${ct()}" hidden type="${ht(this.type)}"></button>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.onKeyDown.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.onKeyDown)}updated(t){this.tabIndex=this.disabled?-1:0,super.updated(t)}onKeyDown(t){"Space"!==t.code&&"Enter"!==t.code||(t.preventDefault(),t.stopPropagation(),this.click())}firstUpdated(){"submit"!=this.type&&"reset"!=this.type||this.appendChild(this.$button)}handleClick(t){this.querySelector("button")&&t.target==this.querySelector("button")||this.$ahref&&t.target==this.$ahref||(this.href?this.$ahref.click():"submit"!=this.type&&"reset"!=this.type||this.querySelector("button")?.dispatchEvent(new MouseEvent("click",{relatedTarget:this,composed:!0,bubbles:!0})))}},e([ot(),r("design:type",Object)],t.TkButton.prototype,"href",void 0),e([ot(),r("design:type",String)],t.TkButton.prototype,"target",void 0),e([ot(),r("design:type",String)],t.TkButton.prototype,"type",void 0),e([ot({type:Boolean}),r("design:type",Boolean)],t.TkButton.prototype,"disabled",void 0),e([nt("#ahref"),r("design:type",HTMLAnchorElement)],t.TkButton.prototype,"$ahref",void 0),e([nt("button"),r("design:type",HTMLButtonElement)],t.TkButton.prototype,"$button",void 0),t.TkButton=e([rt("tk-button")],t.TkButton);t.TkCheckbox=class extends tt{constructor(){super(...arguments),this.checked=!1}render(){return H`<tk-box direction="row" align-items="center"><div tabindex="0" class="checkbox"><svg id="checkmark" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 24 24"><path id="checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path><line id="indeterminate-path" fill="none" x1="0" y1="12.5" x2="24" y2="12.5"/></svg></div><span class="label"><slot></slot></span></tk-box><input id="${ct()}" slot="none" style="display:none" ?checked="${this.checked}" type="checkbox" name="${ht(this.name)}" value="${ht(this.value)}" aria-hidden="true" tabindex="-1">`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.onKeyDown.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.onKeyDown)}firstUpdated(){this.appendChild(this.$input)}onKeyDown(t){"Space"!==t.code&&"Enter"!==t.code||(t.preventDefault(),t.stopPropagation(),this.click())}handleClick(){this.checked=!this.checked,setTimeout((()=>this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))))}},t.TkCheckbox.styles=l`${n("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_checkbox-bg:var(--checkbox-bg,#0000);--_checkbox-color:var(--checkbox-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));display:inline-flex}:host .checkbox{align-items:center;background:var(--_checkbox-bg);border:var(--checkbox-border-config,.125rem solid) currentColor;border-radius:var(--checkbox-border-radius,.375rem);color:var(--_checkbox-color);display:inline-flex;height:var(--checkbox-size,1.25rem);justify-content:center;margin:0 5px;min-width:var(--checkbox-size,1.25rem);outline:none;position:relative;transition:var(--checkbox-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),border-color var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));-webkit-user-select:none;user-select:none;width:var(--checkbox-size,1.25rem)}:host .label{font-size:1.1em}:host(:not([disabled])){cursor:pointer}:host([checked]),:host([indeterminate]){--_checkbox-bg:var(--checkbox-bg-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--_checkbox-color:var(--checkbox-color-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([checked]:not([indeterminate])) #checkmark-path,:host([indeterminate]) #indeterminate-path{stroke-dashoffset:0}:host(:focus),:host(:hover){will-change:border,background}:host(:focus) #checkmark-path,:host(:hover) #checkmark-path{will-change:stroke-dashoffset}:host([disabled]){--_checkbox-bg:var(--checkbox-bg-disabled,#0000);--_checkbox-color:var(--checkbox-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));color:var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%)));pointer-events:none}:host([disabled][checked]),:host([disabled][indeterminate]){--_checkbox-bg:var(--checkbox-bg-disabled-checked,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_checkbox-color:var(--checkbox-color-disabled-checked,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}#checkmark{height:var(--checkbox-checkmark-size,.75rem);width:var(--checkbox-checkmark-size,.75rem)}#checkmark-path,#indeterminate-path{stroke-width:var(--checkbox-checkmark-path-width,.3rem);stroke:var(--checkbox-checkmark-stroke-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));stroke-dasharray:var(--checkbox-checkmark-path-dasharray,30);stroke-dashoffset:var(--checkbox-checkmark-path-dasharray,30);transition:var(--checkbox-checkmark-transition,stroke-dashoffset var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)))}#checkmark-path{transition-delay:var(--checkbox-checkmark-path-delay,50ms)}#ripple{transform:var(--checkbox-ripple-transform,translate(-50%,-50%) scale(1.8))}")}`,e([ot({attribute:!0,type:String}),r("design:type",String)],t.TkCheckbox.prototype,"name",void 0),e([ot({attribute:!0,type:String}),r("design:type",String)],t.TkCheckbox.prototype,"value",void 0),e([ot({attribute:!0,type:Boolean,reflect:!0}),r("design:type",Boolean)],t.TkCheckbox.prototype,"checked",void 0),e([nt("input"),r("design:type",HTMLInputElement)],t.TkCheckbox.prototype,"$input",void 0),t.TkCheckbox=e([rt("tk-checkbox")],t.TkCheckbox);t.TkDialog=class extends tt{constructor(){super(...arguments),this.modal=!1,this.open=!1,this.blurOverlay=!1}render(){return H`${this.open?H`<div class="overlay ${this.blurOverlay?"blur":""}" @click="${()=>this.modal?null:this.hide()}"></div><div class="container"><slot></slot></div>`:""}`}updated(t){t.has("open")&&this.open&&this.dispatchEvent(new Event("did-show")),t.has("open")&&!this.open&&this.dispatchEvent(new Event("did-close"))}show(){return this.open=!0,new Promise((t=>{this.resolve=t}))}hide(t=null){this.open=!1,this.resolve(t)}},t.TkDialog.styles=l`${n("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:none;outline:none;position:relative}:host([open]){align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--dialog-z-index,300)}:host([open]) .overlay{background-color:#00000080;bottom:0;left:0;position:absolute;right:0;top:0}:host([open]) .overlay.blur{backdrop-filter:blur(2px)}:host([open]) .container{animation:fade-in .3s forwards;border-radius:var(--border-radius-medium,.25rem);height:100%;margin:0;max-width:100%;overflow-y:auto;overscroll-behavior:contain;padding:1rem;position:fixed;width:fit-content;will-change:transform,opacity}@keyframes fade-in{0%{opacity:0}to{opacity:1}}")}`,e([ot({type:Boolean,attribute:!0}),r("design:type",Boolean)],t.TkDialog.prototype,"modal",void 0),e([ot({type:Boolean,attribute:!0,reflect:!0}),r("design:type",Boolean)],t.TkDialog.prototype,"open",void 0),e([ot({type:Boolean,attribute:"blur-overlay"}),r("design:type",Boolean)],t.TkDialog.prototype,"blurOverlay",void 0),t.TkDialog=e([rt("tk-dialog")],t.TkDialog);t.TkDrawer=class extends tt{constructor(){super(...arguments),this.open=!1,this.over=!1,this.left=!1}render(){return H`<div class="container"><slot name="drawer-container"></slot></div><div class="overlay" @click="${()=>this.open=!1}"></div><div class="drawer"><div class="drawer-header"><slot name="drawer-header"></slot></div><div class="drawer-content"><slot name="drawer-content"></slot></div><div class="drawer-footer"><slot name="drawer-footer"></slot></div></div>`}updated(t){t.has("open")&&this.open&&this.dispatchEvent(new Event("did-show")),t.has("open")&&!this.open&&this.dispatchEvent(new Event("did-close")),t.has("overQuery")&&this.overMediaQuery(),t.has("openQuery")&&window.matchMedia(this.openQuery).matches&&this.show()}overMediaQuery(){this.mql&&this.mql.removeEventListener("change",this.overMediaQueryListener.bind(this)),this.mql=window.matchMedia(this.overQuery),this.mql.matches?this.setAttribute("over",""):this.removeAttribute("over"),this.mql.addEventListener("change",this.overMediaQueryListener.bind(this))}overMediaQueryListener(t){t.matches?this.setAttribute("over",""):this.removeAttribute("over")}hideIfOver(){(this.overQuery&&this.mql?.matches||this.over)&&(this.open=!1)}show(){this.open=!0}hide(){this.open=!1}toggle(){this.open=!this.open}},t.TkDrawer.styles=l`${n("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--drawer-width:256px;display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:scroll;position:absolute;top:0;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}:host([left]) .drawer{right:0;transform:translateX(100%)}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:scroll;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width)}:host([open][over]) .container{padding-left:0}:host([open][over]) .overlay{display:block}@media (max-width:var(--drawer-trigger-width,400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}")}`,e([ot({type:Boolean,reflect:!0}),r("design:type",Boolean)],t.TkDrawer.prototype,"open",void 0),e([ot({type:Boolean,reflect:!0}),r("design:type",Boolean)],t.TkDrawer.prototype,"over",void 0),e([ot({type:String,attribute:"open-query"}),r("design:type",String)],t.TkDrawer.prototype,"openQuery",void 0),e([ot({type:String,attribute:"over-query"}),r("design:type",String)],t.TkDrawer.prototype,"overQuery",void 0),e([ot({type:Boolean,reflect:!0}),r("design:type",Boolean)],t.TkDrawer.prototype,"left",void 0),t.TkDrawer=e([rt("tk-drawer")],t.TkDrawer);
146
+ t.TkButton=class extends t.TkBox{constructor(){super(...arguments),this.href=null,this.type="button",this.disabled=!1}static get styles(){return[...t.TkBox.styles,l`${n("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));--color-darker:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--text:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));align-items:center;background-color:var(--color);border:1px solid var(--color);border-radius:var(--border-radius-medium,.25rem);box-sizing:border-box;color:var(--text);cursor:pointer;display:inline-flex;flex-direction:row;font-family:Roboto,sans-serif;height:2.5em;justify-content:center;letter-spacing:.8px;line-height:2.5em;padding:0 var(--spacing-m,1rem);position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;user-select:none;vertical-align:middle;white-space:nowrap}:host .content{align-items:center;display:flex;pointer-events:none}:host .before{align-items:center;display:flex}:host .before ::slotted(*){margin-right:var(--spacing-s,.5rem)}:host .after{align-items:center;display:flex}:host .after ::slotted(*){margin-left:var(--spacing-s,.5rem)}:host .badge-out{display:flex;pointer-events:none;position:absolute;right:-.8em;top:-.7em}:host .badge-in{display:flex;pointer-events:none;position:absolute;right:2px;top:2px}:host(:focus){outline:none}:host(:focus),:host(:hover){--color:var(--primary-light,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*1.15)))}:host(:active){--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)))}:host([inverted]){--color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));--text:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)))}:host([inverted]:focus),:host([inverted]:hover){--color:#0000001a}:host([inverted]:active){--color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)))}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)));--color-darker:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent]:focus),:host([accent]:hover){--color:var(--accent-light,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),calc(var(--accent-l, 72.7451%)*1.15)))}:host([accent]:active){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent][inverted]){--color:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)));--text:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent][inverted]:focus),:host([accent][inverted]:hover){--color:#0000001a}:host([accent][inverted]:active){--color:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)))}:host([outlined]){background:var(--background,#f7f7f7) radial-gradient(circle,#0000 1%,var(--background,#f7f7f7) 1%) center/15000%;color:var(--color)}:host([pill]){border-radius:var(--border-radius-pill,9999px)}:host([small]){font-size:.8em;height:28px;line-height:.9em;padding:0 var(--spacing-s,.5rem)}:host([small]) .before ::slotted(*){margin-right:var(--spacing-xs,.25rem)}:host([small]) .after ::slotted(*){margin-left:var(--spacing-xs,.25rem)}:host([fab]){align-items:center;border-radius:50%;box-shadow:var(--elevation-1,0 1px 2px var(--shadow));height:40px;justify-content:center;line-height:normal;overflow:hidden;padding:0;width:40px}:host([fab]):hover{box-shadow:var(--elevation-3,0 4px 8px var(--shadow))}:host([fab][small]){font-size:.75em;height:30px;width:30px}:host([flat]){box-shadow:none}:host([flat]):hover{box-shadow:none}:host([disabled]),:host([disabled][accent]){--text:var(--button-color-disabled,var(--shade-lighter));--color:var(--button-bg-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));box-shadow:none;cursor:default;pointer-events:none}")}`]}render(){return H`<div class="before"><slot name="before"></slot></div><div class="content"><slot></slot></div><div class="after"><slot name="after"></slot></div><div class="badge-in"><slot name="badge-in"></slot></div><div class="badge-out"><slot name="badge-out"></slot></div>${this.href?H`<a hidden id="ahref" href="${this.href}" target="${ht(this.target)}" rel="noreferrer"></a>`:""} <button id="${ct()}" hidden type="${ht(this.type)}"></button>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.onKeyDown.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.onKeyDown)}updated(t){this.tabIndex=this.disabled?-1:0,super.updated(t)}onKeyDown(t){"Space"!==t.code&&"Enter"!==t.code||(t.preventDefault(),t.stopPropagation(),this.click())}firstUpdated(){"submit"!=this.type&&"reset"!=this.type||this.appendChild(this.$button)}handleClick(t){this.querySelector("button")&&t.target==this.querySelector("button")||this.$ahref&&t.target==this.$ahref||(this.href?this.$ahref.click():"submit"!=this.type&&"reset"!=this.type||this.querySelector("button")?.dispatchEvent(new MouseEvent("click",{relatedTarget:this,composed:!0,bubbles:!0})))}},e([ot(),r("design:type",Object)],t.TkButton.prototype,"href",void 0),e([ot(),r("design:type",String)],t.TkButton.prototype,"target",void 0),e([ot(),r("design:type",String)],t.TkButton.prototype,"type",void 0),e([ot({type:Boolean}),r("design:type",Boolean)],t.TkButton.prototype,"disabled",void 0),e([nt("#ahref"),r("design:type",HTMLAnchorElement)],t.TkButton.prototype,"$ahref",void 0),e([nt("button"),r("design:type",HTMLButtonElement)],t.TkButton.prototype,"$button",void 0),t.TkButton=e([rt("tk-button")],t.TkButton);t.TkCheckbox=class extends tt{constructor(){super(...arguments),this.checked=!1}render(){return H`<tk-box direction="row" align-items="center"><div tabindex="0" class="checkbox"><svg id="checkmark" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 24 24"><path id="checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path><line id="indeterminate-path" fill="none" x1="0" y1="12.5" x2="24" y2="12.5"/></svg></div><span class="label"><slot></slot></span></tk-box><input id="${ct()}" slot="none" style="display:none" ?checked="${this.checked}" type="checkbox" name="${ht(this.name)}" value="${ht(this.value)}" aria-hidden="true" tabindex="-1">`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.onKeyDown.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.onKeyDown)}firstUpdated(){this.appendChild(this.$input)}onKeyDown(t){"Space"!==t.code&&"Enter"!==t.code||(t.preventDefault(),t.stopPropagation(),this.click())}handleClick(){this.checked=!this.checked,setTimeout((()=>this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))))}},t.TkCheckbox.styles=l`${n("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_checkbox-bg:var(--checkbox-bg,#0000);--_checkbox-color:var(--checkbox-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));display:inline-flex}:host .checkbox{align-items:center;background:var(--_checkbox-bg);border:var(--checkbox-border-config,.125rem solid) currentColor;border-radius:var(--checkbox-border-radius,.375rem);color:var(--_checkbox-color);display:inline-flex;height:var(--checkbox-size,1.25rem);justify-content:center;margin:0 5px;min-width:var(--checkbox-size,1.25rem);outline:none;position:relative;transition:var(--checkbox-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),border-color var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));-webkit-user-select:none;user-select:none;width:var(--checkbox-size,1.25rem)}:host .label{font-size:1.1em}:host(:not([disabled])){cursor:pointer}:host([checked]),:host([indeterminate]){--_checkbox-bg:var(--checkbox-bg-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--_checkbox-color:var(--checkbox-color-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([checked]:not([indeterminate])) #checkmark-path,:host([indeterminate]) #indeterminate-path{stroke-dashoffset:0}:host(:focus),:host(:hover){will-change:border,background}:host(:focus) #checkmark-path,:host(:hover) #checkmark-path{will-change:stroke-dashoffset}:host([disabled]){--_checkbox-bg:var(--checkbox-bg-disabled,#0000);--_checkbox-color:var(--checkbox-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));color:var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%)));pointer-events:none}:host([disabled][checked]),:host([disabled][indeterminate]){--_checkbox-bg:var(--checkbox-bg-disabled-checked,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_checkbox-color:var(--checkbox-color-disabled-checked,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}#checkmark{height:var(--checkbox-checkmark-size,.75rem);width:var(--checkbox-checkmark-size,.75rem)}#checkmark-path,#indeterminate-path{stroke-width:var(--checkbox-checkmark-path-width,.3rem);stroke:var(--checkbox-checkmark-stroke-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));stroke-dasharray:var(--checkbox-checkmark-path-dasharray,30);stroke-dashoffset:var(--checkbox-checkmark-path-dasharray,30);transition:var(--checkbox-checkmark-transition,stroke-dashoffset var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)))}#checkmark-path{transition-delay:var(--checkbox-checkmark-path-delay,50ms)}#ripple{transform:var(--checkbox-ripple-transform,translate(-50%,-50%) scale(1.8))}")}`,e([ot({attribute:!0,type:String}),r("design:type",String)],t.TkCheckbox.prototype,"name",void 0),e([ot({attribute:!0,type:String}),r("design:type",String)],t.TkCheckbox.prototype,"value",void 0),e([ot({attribute:!0,type:Boolean,reflect:!0}),r("design:type",Boolean)],t.TkCheckbox.prototype,"checked",void 0),e([nt("input"),r("design:type",HTMLInputElement)],t.TkCheckbox.prototype,"$input",void 0),t.TkCheckbox=e([rt("tk-checkbox")],t.TkCheckbox);t.TkDialog=class extends tt{constructor(){super(...arguments),this.modal=!1,this.open=!1,this.blurOverlay=!1}render(){return H`${this.open?H`<div class="overlay ${this.blurOverlay?"blur":""}" @click="${()=>this.modal?null:this.hide()}"></div><div class="container"><slot></slot></div>`:""}`}updated(t){t.has("open")&&this.open&&this.dispatchEvent(new Event("did-show")),t.has("open")&&!this.open&&this.dispatchEvent(new Event("did-close"))}show(){return this.open=!0,new Promise((t=>{this.resolve=t}))}hide(t=null){this.open=!1,this.resolve(t)}},t.TkDialog.styles=l`${n("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:none;outline:none;position:relative}:host([open]){align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--dialog-z-index,300)}:host([open]) .overlay{background-color:#00000080;bottom:0;left:0;position:absolute;right:0;top:0}:host([open]) .overlay.blur{backdrop-filter:blur(2px)}:host([open]) .container{animation:fade-in .3s forwards;border-radius:var(--border-radius-medium,.25rem);height:100%;margin:0;max-width:100%;overflow-y:auto;overscroll-behavior:contain;padding:1rem;position:fixed;width:fit-content;will-change:transform,opacity}@keyframes fade-in{0%{opacity:0}to{opacity:1}}")}`,e([ot({type:Boolean,attribute:!0}),r("design:type",Boolean)],t.TkDialog.prototype,"modal",void 0),e([ot({type:Boolean,attribute:!0,reflect:!0}),r("design:type",Boolean)],t.TkDialog.prototype,"open",void 0),e([ot({type:Boolean,attribute:"blur-overlay"}),r("design:type",Boolean)],t.TkDialog.prototype,"blurOverlay",void 0),t.TkDialog=e([rt("tk-dialog")],t.TkDialog);t.TkDrawer=class extends tt{constructor(){super(...arguments),this.open=!1,this.over=!1,this.left=!1}render(){return H`<div class="container"><slot name="drawer-container"></slot></div><div class="overlay" @click="${()=>this.open=!1}"></div><div class="drawer"><div class="drawer-header"><slot name="drawer-header"></slot></div><div class="drawer-content"><slot name="drawer-content"></slot></div><div class="drawer-footer"><slot name="drawer-footer"></slot></div></div>`}updated(t){t.has("open")&&this.open&&this.dispatchEvent(new Event("did-show")),t.has("open")&&!this.open&&this.dispatchEvent(new Event("did-close")),t.has("overQuery")&&this.overMediaQuery(),t.has("openQuery")&&window.matchMedia(this.openQuery).matches&&this.show()}overMediaQuery(){this.mql&&this.mql.removeEventListener("change",this.overMediaQueryListener.bind(this)),this.mql=window.matchMedia(this.overQuery),this.mql.matches?this.setAttribute("over",""):this.removeAttribute("over"),this.mql.addEventListener("change",this.overMediaQueryListener.bind(this))}overMediaQueryListener(t){t.matches?this.setAttribute("over",""):this.removeAttribute("over")}hideIfOver(){(this.overQuery&&this.mql?.matches||this.over)&&(this.open=!1)}show(){this.open=!0}hide(){this.open=!1}toggle(){this.open=!this.open}},t.TkDrawer.styles=l`${n("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:scroll;position:absolute;top:0;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width,256px);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:scroll;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .container{overflow:hidden}:host([left]) .drawer{right:0;transform:translateX(100%)}:host([open]:not([left])) .drawer{transform:none}:host([open]:not([left])) .container{padding-left:var(--drawer-width)}:host([open][left]) .drawer{transform:none}:host([open][left]) .container{padding-right:var(--drawer-width)}:host([open][over]:not([left])) .container{padding-left:0}:host([open][over]:not([left])) .overlay{display:block}:host([open][over][left]) .container{padding-right:0}:host([open][over][left]) .overlay{display:block}@media (max-width:var(--drawer-trigger-width,400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}")}`,e([ot({type:Boolean,reflect:!0}),r("design:type",Boolean)],t.TkDrawer.prototype,"open",void 0),e([ot({type:Boolean,reflect:!0}),r("design:type",Boolean)],t.TkDrawer.prototype,"over",void 0),e([ot({type:String,attribute:"open-query"}),r("design:type",String)],t.TkDrawer.prototype,"openQuery",void 0),e([ot({type:String,attribute:"over-query"}),r("design:type",String)],t.TkDrawer.prototype,"overQuery",void 0),e([ot({type:Boolean,reflect:!0}),r("design:type",Boolean)],t.TkDrawer.prototype,"left",void 0),t.TkDrawer=e([rt("tk-drawer")],t.TkDrawer);
147
147
  /**
148
148
  * @license
149
149
  * Copyright 2017 Google LLC