tinkiet 0.2.62 → 0.2.64
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/drawer/drawer.d.ts +1 -0
- package/drawer/drawer.js +5 -0
- package/drawer/drawer.scss.js +2 -2
- package/package.json +1 -1
- package/umd/tinkiet.min.d.ts +1 -0
- package/umd/tinkiet.min.js +3 -3
package/drawer/drawer.d.ts
CHANGED
package/drawer/drawer.js
CHANGED
|
@@ -8,6 +8,7 @@ let TkDrawer = class TkDrawer extends LitElement {
|
|
|
8
8
|
super(...arguments);
|
|
9
9
|
this.open = false;
|
|
10
10
|
this.over = false;
|
|
11
|
+
this.left = false;
|
|
11
12
|
}
|
|
12
13
|
render() {
|
|
13
14
|
return html `<div class="container"><slot name="drawer-container"></slot></div><div class="overlay" @click="${() => (this.open = false)}"></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>`;
|
|
@@ -66,6 +67,10 @@ __decorate([
|
|
|
66
67
|
property({ type: String, attribute: "over-query" }),
|
|
67
68
|
__metadata("design:type", String)
|
|
68
69
|
], TkDrawer.prototype, "overQuery", void 0);
|
|
70
|
+
__decorate([
|
|
71
|
+
property({ type: Boolean, reflect: true }),
|
|
72
|
+
__metadata("design:type", Boolean)
|
|
73
|
+
], TkDrawer.prototype, "left", void 0);
|
|
69
74
|
TkDrawer = __decorate([
|
|
70
75
|
customElement("tk-drawer")
|
|
71
76
|
], TkDrawer);
|
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}.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}.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{--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}}";
|
|
3
3
|
|
|
4
4
|
export { css_248z as default, stylesheet };
|
package/package.json
CHANGED
package/umd/tinkiet.min.d.ts
CHANGED
package/umd/tinkiet.min.js
CHANGED
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
* Copyright 2017 Google LLC
|
|
29
29
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
30
30
|
*/
|
|
31
|
-
var y;m.finalized=!0,m.elementProperties=new Map,m.elementStyles=[],m.shadowRootOptions={mode:"open"},null==v||v({ReactiveElement:m}),(null!==(d=globalThis.reactiveElementVersions)&&void 0!==d?d:globalThis.reactiveElementVersions=[]).push("1.3.0");const f=globalThis.trustedTypes,k=f?f.createPolicy("lit-html",{createHTML:t=>t}):void 0,x=`lit$${(Math.random()+"").slice(9)}$`,w="?"+x,T=`<${w}>`,$=document,_=(t="")=>$.createComment(t),S=t=>null===t||"object"!=typeof t&&"function"!=typeof t,z=Array.isArray,A=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,E=/-->/g,C=/>/g,B=/>|[ \n \r](?:([^\s"'>=/]+)([ \n \r]*=[ \n \r]*(?:[^ \n \r"'`<>=]|("|')|))|$)/g,L=/'/g,P=/"/g,N=/^(?:script|style|textarea|title)$/i,H=(t=>(e,...r)=>({_$litType$:t,strings:e,values:r}))(1),R=Symbol.for("lit-noChange"),U=Symbol.for("lit-nothing"),q=new WeakMap,I=$.createTreeWalker($,129,null,!1),M=(t,e)=>{const r=t.length-1,i=[];let o,a=2===e?"<svg>":"",s=A;for(let e=0;e<r;e++){const r=t[e];let n,l,h=-1,d=0;for(;d<r.length&&(s.lastIndex=d,l=s.exec(r),null!==l);)d=s.lastIndex,s===A?"!--"===l[1]?s=E:void 0!==l[1]?s=C:void 0!==l[2]?(N.test(l[2])&&(o=RegExp("</"+l[2],"g")),s=B):void 0!==l[3]&&(s=B):s===B?">"===l[0]?(s=null!=o?o:A,h=-1):void 0===l[1]?h=-2:(h=s.lastIndex-l[2].length,n=l[1],s=void 0===l[3]?B:'"'===l[3]?P:L):s===P||s===L?s=B:s===E||s===C?s=A:(s=B,o=void 0);const c=s===B&&t[e+1].startsWith("/>")?" ":"";a+=s===A?r+T:h>=0?(i.push(n),r.slice(0,h)+"$lit$"+r.slice(h)+x+c):r+x+(-2===h?(i.push(void 0),e):c)}const n=a+(t[r]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==k?k.createHTML(n):n,i]};class
|
|
31
|
+
var y;m.finalized=!0,m.elementProperties=new Map,m.elementStyles=[],m.shadowRootOptions={mode:"open"},null==v||v({ReactiveElement:m}),(null!==(d=globalThis.reactiveElementVersions)&&void 0!==d?d:globalThis.reactiveElementVersions=[]).push("1.3.0");const f=globalThis.trustedTypes,k=f?f.createPolicy("lit-html",{createHTML:t=>t}):void 0,x=`lit$${(Math.random()+"").slice(9)}$`,w="?"+x,T=`<${w}>`,$=document,_=(t="")=>$.createComment(t),S=t=>null===t||"object"!=typeof t&&"function"!=typeof t,z=Array.isArray,A=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,E=/-->/g,C=/>/g,B=/>|[ \n \r](?:([^\s"'>=/]+)([ \n \r]*=[ \n \r]*(?:[^ \n \r"'`<>=]|("|')|))|$)/g,L=/'/g,P=/"/g,N=/^(?:script|style|textarea|title)$/i,H=(t=>(e,...r)=>({_$litType$:t,strings:e,values:r}))(1),R=Symbol.for("lit-noChange"),U=Symbol.for("lit-nothing"),q=new WeakMap,I=$.createTreeWalker($,129,null,!1),M=(t,e)=>{const r=t.length-1,i=[];let o,a=2===e?"<svg>":"",s=A;for(let e=0;e<r;e++){const r=t[e];let n,l,h=-1,d=0;for(;d<r.length&&(s.lastIndex=d,l=s.exec(r),null!==l);)d=s.lastIndex,s===A?"!--"===l[1]?s=E:void 0!==l[1]?s=C:void 0!==l[2]?(N.test(l[2])&&(o=RegExp("</"+l[2],"g")),s=B):void 0!==l[3]&&(s=B):s===B?">"===l[0]?(s=null!=o?o:A,h=-1):void 0===l[1]?h=-2:(h=s.lastIndex-l[2].length,n=l[1],s=void 0===l[3]?B:'"'===l[3]?P:L):s===P||s===L?s=B:s===E||s===C?s=A:(s=B,o=void 0);const c=s===B&&t[e+1].startsWith("/>")?" ":"";a+=s===A?r+T:h>=0?(i.push(n),r.slice(0,h)+"$lit$"+r.slice(h)+x+c):r+x+(-2===h?(i.push(void 0),e):c)}const n=a+(t[r]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==k?k.createHTML(n):n,i]};class D{constructor({strings:t,_$litType$:e},r){let i;this.parts=[];let o=0,a=0;const s=t.length-1,n=this.parts,[l,h]=M(t,e);if(this.el=D.createElement(l,r),I.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(i=I.nextNode())&&n.length<s;){if(1===i.nodeType){if(i.hasAttributes()){const t=[];for(const e of i.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(x)){const r=h[a++];if(t.push(e),void 0!==r){const t=i.getAttribute(r.toLowerCase()+"$lit$").split(x),e=/([.?@])?(.*)/.exec(r);n.push({type:1,index:o,name:e[2],strings:t,ctor:"."===e[1]?K:"?"===e[1]?Y:"@"===e[1]?W:V})}else n.push({type:6,index:o})}for(const e of t)i.removeAttribute(e)}if(N.test(i.tagName)){const t=i.textContent.split(x),e=t.length-1;if(e>0){i.textContent=f?f.emptyScript:"";for(let r=0;r<e;r++)i.append(t[r],_()),I.nextNode(),n.push({type:2,index:++o});i.append(t[e],_())}}}else if(8===i.nodeType)if(i.data===w)n.push({type:2,index:o});else{let t=-1;for(;-1!==(t=i.data.indexOf(x,t+1));)n.push({type:7,index:o}),t+=x.length-1}o++}}static createElement(t,e){const r=$.createElement("template");return r.innerHTML=t,r}}function O(t,e,r=t,i){var o,a,s,n;if(e===R)return e;let l=void 0!==i?null===(o=r._$Cl)||void 0===o?void 0:o[i]:r._$Cu;const h=S(e)?void 0:e._$litDirective$;return(null==l?void 0:l.constructor)!==h&&(null===(a=null==l?void 0:l._$AO)||void 0===a||a.call(l,!1),void 0===h?l=void 0:(l=new h(t),l._$AT(t,r,i)),void 0!==i?(null!==(s=(n=r)._$Cl)&&void 0!==s?s:n._$Cl=[])[i]=l:r._$Cu=l),void 0!==l&&(e=O(t,l._$AS(t,e.values),l,i)),e}class j{constructor(t,e){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var e;const{el:{content:r},parts:i}=this._$AD,o=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:$).importNode(r,!0);I.currentNode=o;let a=I.nextNode(),s=0,n=0,l=i[0];for(;void 0!==l;){if(s===l.index){let e;2===l.type?e=new F(a,a.nextSibling,this,t):1===l.type?e=new l.ctor(a,l.name,l.strings,this,t):6===l.type&&(e=new G(a,this,t)),this.v.push(e),l=i[++n]}s!==(null==l?void 0:l.index)&&(a=I.nextNode(),s++)}return o}m(t){let e=0;for(const r of this.v)void 0!==r&&(void 0!==r.strings?(r._$AI(t,r,e),e+=r.strings.length-2):r._$AI(t[e])),e++}}class F{constructor(t,e,r,i){var o;this.type=2,this._$AH=U,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=r,this.options=i,this._$Cg=null===(o=null==i?void 0:i.isConnected)||void 0===o||o}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=O(this,t,e),S(t)?t===U||null==t||""===t?(this._$AH!==U&&this._$AR(),this._$AH=U):t!==this._$AH&&t!==R&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.k(t):(t=>{var e;return z(t)||"function"==typeof(null===(e=t)||void 0===e?void 0:e[Symbol.iterator])})(t)?this.S(t):this.$(t)}A(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.A(t))}$(t){this._$AH!==U&&S(this._$AH)?this._$AA.nextSibling.data=t:this.k($.createTextNode(t)),this._$AH=t}T(t){var e;const{values:r,_$litType$:i}=t,o="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=D.createElement(i.h,this.options)),i);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===o)this._$AH.m(r);else{const t=new j(o,this),e=t.p(this.options);t.m(r),this.k(e),this._$AH=t}}_$AC(t){let e=q.get(t.strings);return void 0===e&&q.set(t.strings,e=new D(t)),e}S(t){z(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let r,i=0;for(const o of t)i===e.length?e.push(r=new F(this.A(_()),this.A(_()),this,this.options)):r=e[i],r._$AI(o),i++;i<e.length&&(this._$AR(r&&r._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var r;for(null===(r=this._$AP)||void 0===r||r.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cg=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class V{constructor(t,e,r,i,o){this.type=1,this._$AH=U,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=o,r.length>2||""!==r[0]||""!==r[1]?(this._$AH=Array(r.length-1).fill(new String),this.strings=r):this._$AH=U}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,r,i){const o=this.strings;let a=!1;if(void 0===o)t=O(this,t,e,0),a=!S(t)||t!==this._$AH&&t!==R,a&&(this._$AH=t);else{const i=t;let s,n;for(t=o[0],s=0;s<o.length-1;s++)n=O(this,i[r+s],e,s),n===R&&(n=this._$AH[s]),a||(a=!S(n)||n!==this._$AH[s]),n===U?t=U:t!==U&&(t+=(null!=n?n:"")+o[s+1]),this._$AH[s]=n}a&&!i&&this.C(t)}C(t){t===U?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class K extends V{constructor(){super(...arguments),this.type=3}C(t){this.element[this.name]=t===U?void 0:t}}const Q=f?f.emptyScript:"";class Y extends V{constructor(){super(...arguments),this.type=4}C(t){t&&t!==U?this.element.setAttribute(this.name,Q):this.element.removeAttribute(this.name)}}class W extends V{constructor(t,e,r,i,o){super(t,e,r,i,o),this.type=5}_$AI(t,e=this){var r;if((t=null!==(r=O(this,t,e,0))&&void 0!==r?r:U)===R)return;const i=this._$AH,o=t===U&&i!==U||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,a=t!==U&&(i===U||o);o&&this.element.removeEventListener(this.name,this,i),a&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,r;"function"==typeof this._$AH?this._$AH.call(null!==(r=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==r?r:this.element,t):this._$AH.handleEvent(t)}}class G{constructor(t,e,r){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=r}get _$AU(){return this._$AM._$AU}_$AI(t){O(this,t)}}const Z=window.litHtmlPolyfillSupport;
|
|
32
32
|
/**
|
|
33
33
|
* @license
|
|
34
34
|
* Copyright 2017 Google LLC
|
|
35
35
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
36
36
|
*/
|
|
37
|
-
var X,J;null==Z||Z(
|
|
37
|
+
var X,J;null==Z||Z(D,F),(null!==(y=globalThis.litHtmlVersions)&&void 0!==y?y:globalThis.litHtmlVersions=[]).push("2.2.0");class tt extends m{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0}createRenderRoot(){var t,e;const r=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=r.firstChild),r}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Dt=((t,e,r)=>{var i,o;const a=null!==(i=null==r?void 0:r.renderBefore)&&void 0!==i?i:e;let s=a._$litPart$;if(void 0===s){const t=null!==(o=null==r?void 0:r.renderBefore)&&void 0!==o?o:null;a._$litPart$=s=new F(e.insertBefore(_(),t),t,void 0,null!=r?r:{})}return s._$AI(t),s})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!1)}render(){return R}}tt.finalized=!0,tt._$litElement$=!0,null===(X=globalThis.litElementHydrateSupport)||void 0===X||X.call(globalThis,{LitElement:tt});const et=globalThis.litElementPolyfillSupport;null==et||et({LitElement:tt}),(null!==(J=globalThis.litElementVersions)&&void 0!==J?J:globalThis.litElementVersions=[]).push("3.2.0");
|
|
38
38
|
/**
|
|
39
39
|
* @license
|
|
40
40
|
* Copyright 2017 Google LLC
|
|
@@ -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}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}.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),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{--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);
|
|
147
147
|
/**
|
|
148
148
|
* @license
|
|
149
149
|
* Copyright 2017 Google LLC
|