@fluid-topics/ft-size-watcher 0.3.11 → 0.3.13

package/build/ft-size-watcher.css.d.ts

@@ -0,0 +1,3 @@
+export declare const FtSizeWatcherCssVariables: {};
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=ft-size-watcher.css.d.ts.map

package/build/ft-size-watcher.css.js

@@ -0,0 +1,24 @@
+import { css } from "lit";
+export const FtSizeWatcherCssVariables = {};
+//language=css
+export const styles = css `
+    .ft-size-watcher--pixel {
+        width: 0;
+        height: 0;
+        overflow: hidden;
+    }
+
+    .ft-size-watcher--pixel.ft-size-watcher--local {
+        width: 100%;
+    }
+
+    .ft-size-watcher--watcher {
+        height: 1px;
+        width: 100vw;
+    }
+
+    .ft-size-watcher--local .ft-size-watcher--watcher {
+        width: 100%;
+    }
+`;
+//# sourceMappingURL=ft-size-watcher.css.js.map

package/build/ft-size-watcher.d.ts

@@ -1,16 +1,6 @@
 import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
-export declare enum FtSizeCategory {
-    S = "S",
-    M = "M",
-    L = "L",
-    XL = "XL",
-    XXL = "XXL"
-}
-export interface FtSizeProperties {
-    size: number;
-    category: FtSizeCategory;
-}
+import { FtSizeCategory, FtSizeProperties } from "./ft-size-watcher.properties";
 export declare class FtSizeChangeEvent extends CustomEvent<FtSizeProperties> {
     constructor(size: number, category: FtSizeCategory);
 }

package/build/ft-size-watcher.js

@@ -4,17 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html } from "lit";
+import { html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { Debouncer, FtLitElement } from "@fluid-topics/ft-wc-utils";
-export var FtSizeCategory;
-(function (FtSizeCategory) {
-    FtSizeCategory["S"] = "S";
-    FtSizeCategory["M"] = "M";
-    FtSizeCategory["L"] = "L";
-    FtSizeCategory["XL"] = "XL";
-    FtSizeCategory["XXL"] = "XXL";
-})(FtSizeCategory || (FtSizeCategory = {}));
+import { FtSizeCategory } from "./ft-size-watcher.properties";
+import { styles } from "./ft-size-watcher.css";
 export class FtSizeChangeEvent extends CustomEvent {
     constructor(size, category) {
         super("change", { detail: { size, category } });
@@ -69,27 +63,7 @@ export class FtSizeWatcher extends FtLitElement {
     }
 }
 FtSizeWatcher.elementDefinitions = {};
-// language=CSS
-FtSizeWatcher.styles = css `
-        .ft-size-watcher--pixel {
-            width: 0;
-            height: 0;
-            overflow: hidden;
-        }
-
-        .ft-size-watcher--pixel.ft-size-watcher--local {
-            width: 100%;
-        }
-
-        .ft-size-watcher--watcher {
-            height: 1px;
-            width: 100vw;
-        }
-
-        .ft-size-watcher--local .ft-size-watcher--watcher {
-            width: 100%;
-        }
-    `;
+FtSizeWatcher.styles = styles;
 __decorate([
     property({ type: Number })
 ], FtSizeWatcher.prototype, "debounceTimeout", void 0);

package/build/ft-size-watcher.light.js

@@ -1,24 +1,24 @@
-!function(t,e,i,s){var h,r=function(t,e,i,s){for(var h,r=arguments.length,c=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(h=t[a])&&(c=(r<3?h(c):r>3?h(e,i,c):h(e,i))||c);return r>3&&c&&Object.defineProperty(e,i,c),c};t.FtSizeCategory=void 0,(h=t.FtSizeCategory||(t.FtSizeCategory={})).S="S",h.M="M",h.L="L",h.XL="XL",h.XXL="XXL";class c extends CustomEvent{constructor(t,e){super("change",{detail:{size:t,category:e}})}}class a extends e.FtLitElement{constructor(){super(...arguments),this.debounceTimeout=100,this.local=!1,this.size=0,this.category=t.FtSizeCategory.S,this.resizeObserver=new ResizeObserver((()=>this.updateSize())),this.debouncer=new e.Debouncer}render(){return i.html`
-            <div class="ft-size-watcher--pixel ${this.local?"ft-size-watcher--local":""}">
-                <div class="ft-size-watcher--watcher"></div>
-            </div>
-        `}contentAvailableCallback(t){super.contentAvailableCallback(t),this.watcher&&this.resizeObserver.observe(this.watcher),this.updateSize()}updateSize(){this.debouncer.run((()=>{this.watcher&&this.size!==this.watcher.clientWidth&&(this.size=this.watcher.clientWidth,this.size<768?this.category=t.FtSizeCategory.S:this.size<976?this.category=t.FtSizeCategory.M:this.size<1024?this.category=t.FtSizeCategory.L:this.size<1440?this.category=t.FtSizeCategory.XL:this.category=t.FtSizeCategory.XXL,this.dispatchEvent(new c(this.size,this.category)))}),this.debounceTimeout)}}a.elementDefinitions={},a.styles=i.css`
-        .ft-size-watcher--pixel {
-            width: 0;
-            height: 0;
-            overflow: hidden;
-        }
+!function(t,e,i,s){var h;t.FtSizeCategory=void 0,(h=t.FtSizeCategory||(t.FtSizeCategory={})).S="S",h.M="M",h.L="L",h.XL="XL",h.XXL="XXL";const r=i.css`
+    .ft-size-watcher--pixel {
+        width: 0;
+        height: 0;
+        overflow: hidden;
+    }
 
-        .ft-size-watcher--pixel.ft-size-watcher--local {
-            width: 100%;
-        }
+    .ft-size-watcher--pixel.ft-size-watcher--local {
+        width: 100%;
+    }
 
-        .ft-size-watcher--watcher {
-            height: 1px;
-            width: 100vw;
-        }
+    .ft-size-watcher--watcher {
+        height: 1px;
+        width: 100vw;
+    }
 
-        .ft-size-watcher--local .ft-size-watcher--watcher {
-            width: 100%;
-        }
-    `,r([s.property({type:Number})],a.prototype,"debounceTimeout",void 0),r([s.property({type:Boolean})],a.prototype,"local",void 0),r([s.property({type:Number,reflect:!0})],a.prototype,"size",void 0),r([s.property({type:String,reflect:!0})],a.prototype,"category",void 0),r([s.query(".ft-size-watcher--watcher")],a.prototype,"watcher",void 0),e.customElement("ft-size-watcher")(a),t.FtSizeChangeEvent=c,t.FtSizeWatcher=a,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators);
+    .ft-size-watcher--local .ft-size-watcher--watcher {
+        width: 100%;
+    }
+`;var c=function(t,e,i,s){for(var h,r=arguments.length,c=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(h=t[a])&&(c=(r<3?h(c):r>3?h(e,i,c):h(e,i))||c);return r>3&&c&&Object.defineProperty(e,i,c),c};class a extends CustomEvent{constructor(t,e){super("change",{detail:{size:t,category:e}})}}class l extends e.FtLitElement{constructor(){super(...arguments),this.debounceTimeout=100,this.local=!1,this.size=0,this.category=t.FtSizeCategory.S,this.resizeObserver=new ResizeObserver((()=>this.updateSize())),this.debouncer=new e.Debouncer}render(){return i.html`
+            <div class="ft-size-watcher--pixel ${this.local?"ft-size-watcher--local":""}">
+                <div class="ft-size-watcher--watcher"></div>
+            </div>
+        `}contentAvailableCallback(t){super.contentAvailableCallback(t),this.watcher&&this.resizeObserver.observe(this.watcher),this.updateSize()}updateSize(){this.debouncer.run((()=>{this.watcher&&this.size!==this.watcher.clientWidth&&(this.size=this.watcher.clientWidth,this.size<768?this.category=t.FtSizeCategory.S:this.size<976?this.category=t.FtSizeCategory.M:this.size<1024?this.category=t.FtSizeCategory.L:this.size<1440?this.category=t.FtSizeCategory.XL:this.category=t.FtSizeCategory.XXL,this.dispatchEvent(new a(this.size,this.category)))}),this.debounceTimeout)}}l.elementDefinitions={},l.styles=r,c([s.property({type:Number})],l.prototype,"debounceTimeout",void 0),c([s.property({type:Boolean})],l.prototype,"local",void 0),c([s.property({type:Number,reflect:!0})],l.prototype,"size",void 0),c([s.property({type:String,reflect:!0})],l.prototype,"category",void 0),c([s.query(".ft-size-watcher--watcher")],l.prototype,"watcher",void 0),e.customElement("ft-size-watcher")(l),t.FtSizeChangeEvent=a,t.FtSizeWatcher=l,t.FtSizeWatcherCssVariables={},t.styles=r,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators);

package/build/ft-size-watcher.min.js

@@ -53,7 +53,7 @@ var g;y.finalized=!0,y.elementProperties=new Map,y.elementStyles=[],y.shadowRoot
      * Copyright 2017 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
      */
-var it,et;null==tt||tt(P,Z),(null!==(g=globalThis.litHtmlVersions)&&void 0!==g?g:globalThis.litHtmlVersions=[]).push("2.2.7");class st extends y{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,i;const e=super.createRenderRoot();return null!==(t=(i=this.renderOptions).renderBefore)&&void 0!==t||(i.renderBefore=e.firstChild),e}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,i,e)=>{var s,o;const n=null!==(s=null==e?void 0:e.renderBefore)&&void 0!==s?s:i;let r=n._$litPart$;if(void 0===r){const t=null!==(o=null==e?void 0:e.renderBefore)&&void 0!==o?o:null;n._$litPart$=r=new Z(i.insertBefore(M(),t),t,void 0,null!=e?e:{})}return r._$AI(t),r})(i,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return z}}st.finalized=!0,st._$litElement$=!0,null===(it=globalThis.litElementHydrateSupport)||void 0===it||it.call(globalThis,{LitElement:st});const ot=globalThis.litElementPolyfillSupport;null==ot||ot({LitElement:st}),(null!==(et=globalThis.litElementVersions)&&void 0!==et?et:globalThis.litElementVersions=[]).push("3.2.2");class nt{static create(t,i,e){let s=t=>h(null!=t?t:e),o=c`var(${h(t)}, ${s(e)})`;return o.name=t,o.category=i,o.defaultValue=e,o.defaultCssValue=s,o.get=i=>c`var(${h(t)}, ${s(i)})`,o.breadcrumb=()=>[],o.lastResortDefaultValue=()=>e,o}static extend(t,i,e){let s=t=>i.get(null!=t?t:e),o=c`var(${h(t)}, ${s(e)})`;return o.name=t,o.category=i.category,o.fallbackVariable=i,o.defaultValue=e,o.defaultCssValue=s,o.get=i=>c`var(${h(t)}, ${s(i)})`,o.breadcrumb=()=>[i.name,...i.breadcrumb()],o.lastResortDefaultValue=()=>e,o}static external(t,i){let e=i=>t.fallbackVariable?t.fallbackVariable.get(null!=i?i:t.defaultValue):h(null!=i?i:t.defaultValue),s=c`var(${h(t.name)}, ${e(t.defaultValue)})`;return s.name=t.name,s.category=t.category,s.fallbackVariable=t.fallbackVariable,s.defaultValue=t.defaultValue,s.context=i,s.defaultCssValue=e,s.get=i=>c`var(${h(t.name)}, ${e(i)})`,s.breadcrumb=()=>t.fallbackVariable?[t.fallbackVariable.name,...t.fallbackVariable.breadcrumb()]:[],s.lastResortDefaultValue=()=>{var i,e;return null!==(i=t.defaultValue)&&void 0!==i?i:null===(e=t.fallbackVariable)||void 0===e?void 0:e.lastResortDefaultValue()},s}}nt.create("--ft-color-primary","COLOR","#2196F3"),nt.create("--ft-color-primary-variant","COLOR","#1976D2"),nt.create("--ft-color-secondary","COLOR","#FFCC80"),nt.create("--ft-color-secondary-variant","COLOR","#F57C00"),nt.create("--ft-color-surface","COLOR","#FFFFFF"),nt.create("--ft-color-content","COLOR","rgba(0, 0, 0, 0.87)"),nt.create("--ft-color-error","COLOR","#B00020"),nt.create("--ft-color-outline","COLOR","rgba(0, 0, 0, 0.14)"),nt.create("--ft-color-opacity-high","NUMBER","1"),nt.create("--ft-color-opacity-medium","NUMBER","0.74"),nt.create("--ft-color-opacity-disabled","NUMBER","0.38"),nt.create("--ft-color-on-primary","COLOR","#FFFFFF"),nt.create("--ft-color-on-primary-high","COLOR","#FFFFFF"),nt.create("--ft-color-on-primary-medium","COLOR","rgba(255, 255, 255, 0.74)"),nt.create("--ft-color-on-primary-disabled","COLOR","rgba(255, 255, 255, 0.38)"),nt.create("--ft-color-on-secondary","COLOR","#FFFFFF"),nt.create("--ft-color-on-secondary-high","COLOR","#FFFFFF"),nt.create("--ft-color-on-secondary-medium","COLOR","rgba(255, 255, 255, 0.74)"),nt.create("--ft-color-on-secondary-disabled","COLOR","rgba(255, 255, 255, 0.38)"),nt.create("--ft-color-on-surface","COLOR","rgba(0, 0, 0, 0.87)"),nt.create("--ft-color-on-surface-high","COLOR","rgba(0, 0, 0, 0.87)"),nt.create("--ft-color-on-surface-medium","COLOR","rgba(0, 0, 0, 0.60)"),nt.create("--ft-color-on-surface-disabled","COLOR","rgba(0, 0, 0, 0.38)"),nt.create("--ft-opacity-content-on-surface-disabled","NUMBER","0"),nt.create("--ft-opacity-content-on-surface-enable","NUMBER","0"),nt.create("--ft-opacity-content-on-surface-hover","NUMBER","0.04"),nt.create("--ft-opacity-content-on-surface-focused","NUMBER","0.12"),nt.create("--ft-opacity-content-on-surface-pressed","NUMBER","0.10"),nt.create("--ft-opacity-content-on-surface-selected","NUMBER","0.08"),nt.create("--ft-opacity-content-on-surface-dragged","NUMBER","0.08"),nt.create("--ft-opacity-primary-on-surface-disabled","NUMBER","0"),nt.create("--ft-opacity-primary-on-surface-enable","NUMBER","0"),nt.create("--ft-opacity-primary-on-surface-hover","NUMBER","0.04"),nt.create("--ft-opacity-primary-on-surface-focused","NUMBER","0.12"),nt.create("--ft-opacity-primary-on-surface-pressed","NUMBER","0.10"),nt.create("--ft-opacity-primary-on-surface-selected","NUMBER","0.08"),nt.create("--ft-opacity-primary-on-surface-dragged","NUMBER","0.08"),nt.create("--ft-opacity-surface-on-primary-disabled","NUMBER","0"),nt.create("--ft-opacity-surface-on-primary-enable","NUMBER","0"),nt.create("--ft-opacity-surface-on-primary-hover","NUMBER","0.04"),nt.create("--ft-opacity-surface-on-primary-focused","NUMBER","0.12"),nt.create("--ft-opacity-surface-on-primary-pressed","NUMBER","0.10"),nt.create("--ft-opacity-surface-on-primary-selected","NUMBER","0.08"),nt.create("--ft-opacity-surface-on-primary-dragged","NUMBER","0.08"),nt.create("--ft-elevation-00","UNKNOWN","0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0)"),nt.create("--ft-elevation-01","UNKNOWN","0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-elevation-02","UNKNOWN","0px 4px 10px 0px rgba(0, 0, 0, 0.06), 0px 2px 5px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-elevation-03","UNKNOWN","0px 6px 13px 0px rgba(0, 0, 0, 0.06), 0px 3px 7px 0px rgba(0, 0, 0, 0.14), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-elevation-04","UNKNOWN","0px 8px 16px 0px rgba(0, 0, 0, 0.06), 0px 4px 9px 0px rgba(0, 0, 0, 0.14), 0px 2px 3px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-elevation-06","UNKNOWN","0px 12px 22px 0px rgba(0, 0, 0, 0.06), 0px 6px 13px 0px rgba(0, 0, 0, 0.14), 0px 4px 5px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-elevation-08","UNKNOWN","0px 16px 28px 0px rgba(0, 0, 0, 0.06), 0px 8px 17px 0px rgba(0, 0, 0, 0.14), 0px 6px 7px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-elevation-12","UNKNOWN","0px 22px 40px 0px rgba(0, 0, 0, 0.06), 0px 12px 23px 0px rgba(0, 0, 0, 0.14), 0px 10px 11px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-elevation-16","UNKNOWN","0px 28px 52px 0px rgba(0, 0, 0, 0.06), 0px 16px 29px 0px rgba(0, 0, 0, 0.14), 0px 14px 15px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-elevation-24","UNKNOWN","0px 40px 76px 0px rgba(0, 0, 0, 0.06), 0px 24px 41px 0px rgba(0, 0, 0, 0.14), 0px 22px 23px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-border-radius-S","SIZE","4px"),nt.create("--ft-border-radius-M","SIZE","8px"),nt.create("--ft-border-radius-L","SIZE","12px"),nt.create("--ft-border-radius-XL","SIZE","16px"),nt.create("--ft-title-font","UNKNOWN","Ubuntu, system-ui, sans-serif"),nt.create("--ft-content-font","UNKNOWN","'Open Sans', system-ui, sans-serif"),nt.create("--ft-transition-duration","UNKNOWN","250ms"),nt.create("--ft-transition-timing-function","UNKNOWN","ease-in-out");var rt,lt,at=function(t,i,e,s){for(var o,n=arguments.length,r=n<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,l=t.length-1;l>=0;l--)(o=t[l])&&(r=(n<3?o(r):n>3?o(i,e,r):o(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};class ht extends(
+var it,et;null==tt||tt(P,Z),(null!==(g=globalThis.litHtmlVersions)&&void 0!==g?g:globalThis.litHtmlVersions=[]).push("2.2.7");class st extends y{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,i;const e=super.createRenderRoot();return null!==(t=(i=this.renderOptions).renderBefore)&&void 0!==t||(i.renderBefore=e.firstChild),e}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,i,e)=>{var s,o;const n=null!==(s=null==e?void 0:e.renderBefore)&&void 0!==s?s:i;let r=n._$litPart$;if(void 0===r){const t=null!==(o=null==e?void 0:e.renderBefore)&&void 0!==o?o:null;n._$litPart$=r=new Z(i.insertBefore(M(),t),t,void 0,null!=e?e:{})}return r._$AI(t),r})(i,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return z}}st.finalized=!0,st._$litElement$=!0,null===(it=globalThis.litElementHydrateSupport)||void 0===it||it.call(globalThis,{LitElement:st});const ot=globalThis.litElementPolyfillSupport;null==ot||ot({LitElement:st}),(null!==(et=globalThis.litElementVersions)&&void 0!==et?et:globalThis.litElementVersions=[]).push("3.2.2");class nt{static create(t,i,e){let s=t=>h(null!=t?t:e),o=c`var(${h(t)}, ${s(e)})`;return o.name=t,o.category=i,o.defaultValue=e,o.defaultCssValue=s,o.get=i=>c`var(${h(t)}, ${s(i)})`,o.breadcrumb=()=>[],o.lastResortDefaultValue=()=>e,o}static extend(t,i,e){let s=t=>i.get(null!=t?t:e),o=c`var(${h(t)}, ${s(e)})`;return o.name=t,o.category=i.category,o.fallbackVariable=i,o.defaultValue=e,o.defaultCssValue=s,o.get=i=>c`var(${h(t)}, ${s(i)})`,o.breadcrumb=()=>[i.name,...i.breadcrumb()],o.lastResortDefaultValue=()=>e,o}static external(t,i){let e=i=>t.fallbackVariable?t.fallbackVariable.get(null!=i?i:t.defaultValue):h(null!=i?i:t.defaultValue),s=c`var(${h(t.name)}, ${e(t.defaultValue)})`;return s.name=t.name,s.category=t.category,s.fallbackVariable=t.fallbackVariable,s.defaultValue=t.defaultValue,s.context=i,s.defaultCssValue=e,s.get=i=>c`var(${h(t.name)}, ${e(i)})`,s.breadcrumb=()=>t.fallbackVariable?[t.fallbackVariable.name,...t.fallbackVariable.breadcrumb()]:[],s.lastResortDefaultValue=()=>{var i,e;return null!==(i=t.defaultValue)&&void 0!==i?i:null===(e=t.fallbackVariable)||void 0===e?void 0:e.lastResortDefaultValue()},s}}nt.create("--ft-color-primary","COLOR","#2196F3"),nt.create("--ft-color-primary-variant","COLOR","#1976D2"),nt.create("--ft-color-secondary","COLOR","#FFCC80"),nt.create("--ft-color-secondary-variant","COLOR","#F57C00"),nt.create("--ft-color-surface","COLOR","#FFFFFF"),nt.create("--ft-color-content","COLOR","rgba(0, 0, 0, 0.87)"),nt.create("--ft-color-error","COLOR","#B00020"),nt.create("--ft-color-outline","COLOR","rgba(0, 0, 0, 0.14)"),nt.create("--ft-color-opacity-high","NUMBER","1"),nt.create("--ft-color-opacity-medium","NUMBER","0.74"),nt.create("--ft-color-opacity-disabled","NUMBER","0.38"),nt.create("--ft-color-on-primary","COLOR","#FFFFFF"),nt.create("--ft-color-on-primary-high","COLOR","#FFFFFF"),nt.create("--ft-color-on-primary-medium","COLOR","rgba(255, 255, 255, 0.74)"),nt.create("--ft-color-on-primary-disabled","COLOR","rgba(255, 255, 255, 0.38)"),nt.create("--ft-color-on-secondary","COLOR","#FFFFFF"),nt.create("--ft-color-on-secondary-high","COLOR","#FFFFFF"),nt.create("--ft-color-on-secondary-medium","COLOR","rgba(255, 255, 255, 0.74)"),nt.create("--ft-color-on-secondary-disabled","COLOR","rgba(255, 255, 255, 0.38)"),nt.create("--ft-color-on-surface","COLOR","rgba(0, 0, 0, 0.87)"),nt.create("--ft-color-on-surface-high","COLOR","rgba(0, 0, 0, 0.87)"),nt.create("--ft-color-on-surface-medium","COLOR","rgba(0, 0, 0, 0.60)"),nt.create("--ft-color-on-surface-disabled","COLOR","rgba(0, 0, 0, 0.38)"),nt.create("--ft-opacity-content-on-surface-disabled","NUMBER","0"),nt.create("--ft-opacity-content-on-surface-enable","NUMBER","0"),nt.create("--ft-opacity-content-on-surface-hover","NUMBER","0.04"),nt.create("--ft-opacity-content-on-surface-focused","NUMBER","0.12"),nt.create("--ft-opacity-content-on-surface-pressed","NUMBER","0.10"),nt.create("--ft-opacity-content-on-surface-selected","NUMBER","0.08"),nt.create("--ft-opacity-content-on-surface-dragged","NUMBER","0.08"),nt.create("--ft-opacity-primary-on-surface-disabled","NUMBER","0"),nt.create("--ft-opacity-primary-on-surface-enable","NUMBER","0"),nt.create("--ft-opacity-primary-on-surface-hover","NUMBER","0.04"),nt.create("--ft-opacity-primary-on-surface-focused","NUMBER","0.12"),nt.create("--ft-opacity-primary-on-surface-pressed","NUMBER","0.10"),nt.create("--ft-opacity-primary-on-surface-selected","NUMBER","0.08"),nt.create("--ft-opacity-primary-on-surface-dragged","NUMBER","0.08"),nt.create("--ft-opacity-surface-on-primary-disabled","NUMBER","0"),nt.create("--ft-opacity-surface-on-primary-enable","NUMBER","0"),nt.create("--ft-opacity-surface-on-primary-hover","NUMBER","0.04"),nt.create("--ft-opacity-surface-on-primary-focused","NUMBER","0.12"),nt.create("--ft-opacity-surface-on-primary-pressed","NUMBER","0.10"),nt.create("--ft-opacity-surface-on-primary-selected","NUMBER","0.08"),nt.create("--ft-opacity-surface-on-primary-dragged","NUMBER","0.08"),nt.create("--ft-elevation-00","UNKNOWN","0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0)"),nt.create("--ft-elevation-01","UNKNOWN","0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-elevation-02","UNKNOWN","0px 4px 10px 0px rgba(0, 0, 0, 0.06), 0px 2px 5px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-elevation-03","UNKNOWN","0px 6px 13px 0px rgba(0, 0, 0, 0.06), 0px 3px 7px 0px rgba(0, 0, 0, 0.14), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-elevation-04","UNKNOWN","0px 8px 16px 0px rgba(0, 0, 0, 0.06), 0px 4px 9px 0px rgba(0, 0, 0, 0.14), 0px 2px 3px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-elevation-06","UNKNOWN","0px 12px 22px 0px rgba(0, 0, 0, 0.06), 0px 6px 13px 0px rgba(0, 0, 0, 0.14), 0px 4px 5px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-elevation-08","UNKNOWN","0px 16px 28px 0px rgba(0, 0, 0, 0.06), 0px 8px 17px 0px rgba(0, 0, 0, 0.14), 0px 6px 7px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-elevation-12","UNKNOWN","0px 22px 40px 0px rgba(0, 0, 0, 0.06), 0px 12px 23px 0px rgba(0, 0, 0, 0.14), 0px 10px 11px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-elevation-16","UNKNOWN","0px 28px 52px 0px rgba(0, 0, 0, 0.06), 0px 16px 29px 0px rgba(0, 0, 0, 0.14), 0px 14px 15px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-elevation-24","UNKNOWN","0px 40px 76px 0px rgba(0, 0, 0, 0.06), 0px 24px 41px 0px rgba(0, 0, 0, 0.14), 0px 22px 23px 0px rgba(0, 0, 0, 0.06)"),nt.create("--ft-border-radius-S","SIZE","4px"),nt.create("--ft-border-radius-M","SIZE","8px"),nt.create("--ft-border-radius-L","SIZE","12px"),nt.create("--ft-border-radius-XL","SIZE","16px"),nt.create("--ft-title-font","UNKNOWN","Ubuntu, system-ui, sans-serif"),nt.create("--ft-content-font","UNKNOWN","'Open Sans', system-ui, sans-serif"),nt.create("--ft-transition-duration","UNKNOWN","250ms"),nt.create("--ft-transition-timing-function","UNKNOWN","ease-in-out");var rt,lt,at,ht=function(t,i,e,s){for(var o,n=arguments.length,r=n<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,l=t.length-1;l>=0;l--)(o=t[l])&&(r=(n<3?o(r):n>3?o(i,e,r):o(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};class ct extends(
 /**
      * @license
      * Copyright 2021 Google LLC
@@ -64,7 +64,7 @@ function(t){return class extends t{createRenderRoot(){const t=this.constructor,{
                 <style>${t}</style>
             `))}
             ${this.getTemplate()}
-        `}updated(t){super.updated(t),setTimeout((()=>{var i;this.contentAvailableCallback(t),(null===(i=this.exportpartsPrefix)||void 0===i?void 0:i.trim())?this.setExportpartsAttribute([this.exportpartsPrefix]):null!=this.exportpartsPrefixes&&this.exportpartsPrefixes.length>0&&this.setExportpartsAttribute(this.exportpartsPrefixes)}),0)}setExportpartsAttribute(t){var i,e,s,o,n,r;const l=t=>null!=t&&t.trim().length>0,a=t.filter(l).map((t=>t.trim()));if(0===a.length)return void this.removeAttribute("exportparts");const h=new Set;for(let t of null!==(e=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelectorAll("[part],[exportparts]"))&&void 0!==e?e:[]){const i=null!==(o=null===(s=t.getAttribute("part"))||void 0===s?void 0:s.split(" "))&&void 0!==o?o:[],e=null!==(r=null===(n=t.getAttribute("exportparts"))||void 0===n?void 0:n.split(",").map((t=>t.split(":")[1])))&&void 0!==r?r:[];new Array(...i,...e).filter(l).map((t=>t.trim())).forEach((t=>h.add(t)))}if(0===h.size)return void this.removeAttribute("exportparts");const c=[...h.values()].flatMap((t=>a.map((i=>`${t}:${i}--${t}`))));this.setAttribute("exportparts",[...this.part,...c].join(", "))}contentAvailableCallback(t){}}at([s()],ht.prototype,"exportpartsPrefix",void 0),at([function(t,i){const e=()=>JSON.parse(JSON.stringify(t));return s({type:Object,converter:{fromAttribute:t=>{if(null==t)return e();try{return JSON.parse(t)}catch{return e()}},toAttribute:t=>JSON.stringify(t)},...null!=i?i:{}})}([])],ht.prototype,"exportpartsPrefixes",void 0),c`
+        `}updated(t){super.updated(t),setTimeout((()=>{var i;this.contentAvailableCallback(t),(null===(i=this.exportpartsPrefix)||void 0===i?void 0:i.trim())?this.setExportpartsAttribute([this.exportpartsPrefix]):null!=this.exportpartsPrefixes&&this.exportpartsPrefixes.length>0&&this.setExportpartsAttribute(this.exportpartsPrefixes)}),0)}setExportpartsAttribute(t){var i,e,s,o,n,r;const l=t=>null!=t&&t.trim().length>0,a=t.filter(l).map((t=>t.trim()));if(0===a.length)return void this.removeAttribute("exportparts");const h=new Set;for(let t of null!==(e=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelectorAll("[part],[exportparts]"))&&void 0!==e?e:[]){const i=null!==(o=null===(s=t.getAttribute("part"))||void 0===s?void 0:s.split(" "))&&void 0!==o?o:[],e=null!==(r=null===(n=t.getAttribute("exportparts"))||void 0===n?void 0:n.split(",").map((t=>t.split(":")[1])))&&void 0!==r?r:[];new Array(...i,...e).filter(l).map((t=>t.trim())).forEach((t=>h.add(t)))}if(0===h.size)return void this.removeAttribute("exportparts");const c=[...h.values()].flatMap((t=>a.map((i=>`${t}:${i}--${t}`))));this.setAttribute("exportparts",[...this.part,...c].join(", "))}contentAvailableCallback(t){}}ht([s()],ct.prototype,"exportpartsPrefix",void 0),ht([function(t,i){const e=()=>JSON.parse(JSON.stringify(t));return s({type:Object,converter:{fromAttribute:t=>{if(null==t)return e();try{return JSON.parse(t)}catch{return e()}},toAttribute:t=>JSON.stringify(t)},...null!=i?i:{}})}([])],ct.prototype,"exportpartsPrefixes",void 0),c`
     .ft-no-text-select {
         -webkit-touch-callout: none;
         -webkit-user-select: none;
@@ -73,33 +73,33 @@ function(t){return class extends t{createRenderRoot(){const t=this.constructor,{
         -ms-user-select: none;
         user-select: none;
     }
-`,navigator.vendor&&navigator.vendor.match(/apple/i)||(null===(lt=null===(rt=window.safari)||void 0===rt?void 0:rt.pushNotification)||void 0===lt||lt.toString());var ct,ut,dt=function(t,i,e,s){for(var o,n=arguments.length,r=n<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,l=t.length-1;l>=0;l--)(o=t[l])&&(r=(n<3?o(r):n>3?o(i,e,r):o(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};t.FtSizeCategory=void 0,(ct=t.FtSizeCategory||(t.FtSizeCategory={})).S="S",ct.M="M",ct.L="L",ct.XL="XL",ct.XXL="XXL";class pt extends CustomEvent{constructor(t,i){super("change",{detail:{size:t,category:i}})}}class ft extends ht{constructor(){super(...arguments),this.debounceTimeout=100,this.local=!1,this.size=0,this.category=t.FtSizeCategory.S,this.resizeObserver=new ResizeObserver((()=>this.updateSize())),this.debouncer=new i}render(){return _`
-            <div class="ft-size-watcher--pixel ${this.local?"ft-size-watcher--local":""}">
-                <div class="ft-size-watcher--watcher"></div>
-            </div>
-        `}contentAvailableCallback(t){super.contentAvailableCallback(t),this.watcher&&this.resizeObserver.observe(this.watcher),this.updateSize()}updateSize(){this.debouncer.run((()=>{this.watcher&&this.size!==this.watcher.clientWidth&&(this.size=this.watcher.clientWidth,this.size<768?this.category=t.FtSizeCategory.S:this.size<976?this.category=t.FtSizeCategory.M:this.size<1024?this.category=t.FtSizeCategory.L:this.size<1440?this.category=t.FtSizeCategory.XL:this.category=t.FtSizeCategory.XXL,this.dispatchEvent(new pt(this.size,this.category)))}),this.debounceTimeout)}}ft.elementDefinitions={},ft.styles=c`
-        .ft-size-watcher--pixel {
-            width: 0;
-            height: 0;
-            overflow: hidden;
-        }
+`,navigator.vendor&&navigator.vendor.match(/apple/i)||(null===(lt=null===(rt=window.safari)||void 0===rt?void 0:rt.pushNotification)||void 0===lt||lt.toString()),t.FtSizeCategory=void 0,(at=t.FtSizeCategory||(t.FtSizeCategory={})).S="S",at.M="M",at.L="L",at.XL="XL",at.XXL="XXL";const ut=c`
+    .ft-size-watcher--pixel {
+        width: 0;
+        height: 0;
+        overflow: hidden;
+    }
 
-        .ft-size-watcher--pixel.ft-size-watcher--local {
-            width: 100%;
-        }
+    .ft-size-watcher--pixel.ft-size-watcher--local {
+        width: 100%;
+    }
 
-        .ft-size-watcher--watcher {
-            height: 1px;
-            width: 100vw;
-        }
+    .ft-size-watcher--watcher {
+        height: 1px;
+        width: 100vw;
+    }
 
-        .ft-size-watcher--local .ft-size-watcher--watcher {
-            width: 100%;
-        }
-    `,dt([s({type:Number})],ft.prototype,"debounceTimeout",void 0),dt([s({type:Boolean})],ft.prototype,"local",void 0),dt([s({type:Number,reflect:!0})],ft.prototype,"size",void 0),dt([s({type:String,reflect:!0})],ft.prototype,"category",void 0),dt([
+    .ft-size-watcher--local .ft-size-watcher--watcher {
+        width: 100%;
+    }
+`;var dt,pt=function(t,i,e,s){for(var o,n=arguments.length,r=n<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,l=t.length-1;l>=0;l--)(o=t[l])&&(r=(n<3?o(r):n>3?o(i,e,r):o(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};class ft extends CustomEvent{constructor(t,i){super("change",{detail:{size:t,category:i}})}}class vt extends ct{constructor(){super(...arguments),this.debounceTimeout=100,this.local=!1,this.size=0,this.category=t.FtSizeCategory.S,this.resizeObserver=new ResizeObserver((()=>this.updateSize())),this.debouncer=new i}render(){return _`
+            <div class="ft-size-watcher--pixel ${this.local?"ft-size-watcher--local":""}">
+                <div class="ft-size-watcher--watcher"></div>
+            </div>
+        `}contentAvailableCallback(t){super.contentAvailableCallback(t),this.watcher&&this.resizeObserver.observe(this.watcher),this.updateSize()}updateSize(){this.debouncer.run((()=>{this.watcher&&this.size!==this.watcher.clientWidth&&(this.size=this.watcher.clientWidth,this.size<768?this.category=t.FtSizeCategory.S:this.size<976?this.category=t.FtSizeCategory.M:this.size<1024?this.category=t.FtSizeCategory.L:this.size<1440?this.category=t.FtSizeCategory.XL:this.category=t.FtSizeCategory.XXL,this.dispatchEvent(new ft(this.size,this.category)))}),this.debounceTimeout)}}vt.elementDefinitions={},vt.styles=ut,pt([s({type:Number})],vt.prototype,"debounceTimeout",void 0),pt([s({type:Boolean})],vt.prototype,"local",void 0),pt([s({type:Number,reflect:!0})],vt.prototype,"size",void 0),pt([s({type:String,reflect:!0})],vt.prototype,"category",void 0),pt([
 /**
      * @license
      * Copyright 2017 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
      */
-function(t,i){return(({finisher:t,descriptor:i})=>(e,s)=>{var o;if(void 0===s){const s=null!==(o=e.originalKey)&&void 0!==o?o:e.key,n=null!=i?{kind:"method",placement:"prototype",key:s,descriptor:i(e.key)}:{...e,key:s};return null!=t&&(n.finisher=function(i){t(i,s)}),n}{const o=e.constructor;void 0!==i&&Object.defineProperty(e,s,i(s)),null==t||t(o,s)}})({descriptor:e=>{const s={get(){var i,e;return null!==(e=null===(i=this.renderRoot)||void 0===i?void 0:i.querySelector(t))&&void 0!==e?e:null},enumerable:!0,configurable:!0};if(i){const i="symbol"==typeof e?Symbol():"__"+e;s.get=function(){var e,s;return void 0===this[i]&&(this[i]=null!==(s=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(t))&&void 0!==s?s:null),this[i]}}return s}})}(".ft-size-watcher--watcher")],ft.prototype,"watcher",void 0),(ut="ft-size-watcher",t=>{window.customElements.get(ut)||window.customElements.define(ut,t)})(ft),t.FtSizeChangeEvent=pt,t.FtSizeWatcher=ft,Object.defineProperty(t,"i",{value:!0})}({});
+function(t,i){return(({finisher:t,descriptor:i})=>(e,s)=>{var o;if(void 0===s){const s=null!==(o=e.originalKey)&&void 0!==o?o:e.key,n=null!=i?{kind:"method",placement:"prototype",key:s,descriptor:i(e.key)}:{...e,key:s};return null!=t&&(n.finisher=function(i){t(i,s)}),n}{const o=e.constructor;void 0!==i&&Object.defineProperty(e,s,i(s)),null==t||t(o,s)}})({descriptor:e=>{const s={get(){var i,e;return null!==(e=null===(i=this.renderRoot)||void 0===i?void 0:i.querySelector(t))&&void 0!==e?e:null},enumerable:!0,configurable:!0};if(i){const i="symbol"==typeof e?Symbol():"__"+e;s.get=function(){var e,s;return void 0===this[i]&&(this[i]=null!==(s=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(t))&&void 0!==s?s:null),this[i]}}return s}})}(".ft-size-watcher--watcher")],vt.prototype,"watcher",void 0),(dt="ft-size-watcher",t=>{window.customElements.get(dt)||window.customElements.define(dt,t)})(vt),t.FtSizeChangeEvent=ft,t.FtSizeWatcher=vt,t.FtSizeWatcherCssVariables={},t.styles=ut,Object.defineProperty(t,"i",{value:!0})}({});

package/build/ft-size-watcher.properties.d.ts

@@ -0,0 +1,12 @@
+export declare enum FtSizeCategory {
+    S = "S",
+    M = "M",
+    L = "L",
+    XL = "XL",
+    XXL = "XXL"
+}
+export interface FtSizeProperties {
+    size: number;
+    category: FtSizeCategory;
+}
+//# sourceMappingURL=ft-size-watcher.properties.d.ts.map

package/build/ft-size-watcher.properties.js

@@ -0,0 +1,9 @@
+export var FtSizeCategory;
+(function (FtSizeCategory) {
+    FtSizeCategory["S"] = "S";
+    FtSizeCategory["M"] = "M";
+    FtSizeCategory["L"] = "L";
+    FtSizeCategory["XL"] = "XL";
+    FtSizeCategory["XXL"] = "XXL";
+})(FtSizeCategory || (FtSizeCategory = {}));
+//# sourceMappingURL=ft-size-watcher.properties.js.map

package/build/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./ft-size-watcher";
+export * from "./ft-size-watcher.css";
+export * from "./ft-size-watcher.properties";
 //# sourceMappingURL=index.d.ts.map

package/build/index.js

@@ -1,5 +1,7 @@
 import { customElement } from "@fluid-topics/ft-wc-utils";
 import { FtSizeWatcher } from "./ft-size-watcher";
 export * from "./ft-size-watcher";
+export * from "./ft-size-watcher.css";
+export * from "./ft-size-watcher.properties";
 customElement("ft-size-watcher")(FtSizeWatcher);
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-size-watcher",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "description": "Pixel component used to get viewport size",
   "keywords": [
     "Lit"
@@ -19,8 +19,8 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-wc-utils": "0.3.11",
+    "@fluid-topics/ft-wc-utils": "0.3.13",
     "lit": "2.2.8"
   },
-  "gitHead": "35c790329a8e7f9902aad2ea8d41386e5c0b36c9"
+  "gitHead": "84b5fc920bc5d2bdb646b5da8815ad51caaf228e"
 }