@leavittsoftware/web 8.7.2 → 8.7.3

package/titanium/search-input/filled-search-input.js

@@ -0,0 +1,111 @@
+import { __decorate } from "tslib";
+import '@material/web/textfield/filled-text-field';
+import '@material/web/icon/icon';
+import '@material/web/iconbutton/icon-button';
+import { redispatchEvent } from '@material/web/internal/events/redispatch-event';
+import { LitElement, html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+let TitaniumFilledSearchInput = class TitaniumFilledSearchInput extends LitElement {
+    #value_accessor_storage = '';
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #placeholder_accessor_storage = 'Search';
+    get placeholder() { return this.#placeholder_accessor_storage; }
+    set placeholder(value) { this.#placeholder_accessor_storage = value; }
+    #autocomplete_accessor_storage = 'off';
+    get autocomplete() { return this.#autocomplete_accessor_storage; }
+    set autocomplete(value) { this.#autocomplete_accessor_storage = value; }
+    #spellcheck_accessor_storage = false;
+    get spellcheck() { return this.#spellcheck_accessor_storage; }
+    set spellcheck(value) { this.#spellcheck_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #textField_accessor_storage;
+    get textField() { return this.#textField_accessor_storage; }
+    set textField(value) { this.#textField_accessor_storage = value; }
+    static { this.styles = css `
+    :host {
+      display: block;
+      max-width: 640px;
+      width: 100%;
+
+      --md-filled-text-field-container-color: var(--md-sys-color-surface-container-high);
+      --md-filled-text-field-container-shape: 24px;
+      --md-filled-field-container-shape: 24px;
+
+      --md-filled-text-field-active-indicator-height: 0;
+      --md-filled-text-field-error-active-indicator-height: 0;
+      --md-filled-text-field-hover-active-indicator-height: 0;
+      --md-filled-text-field-focus-active-indicator-height: 0;
+      --md-filled-text-field-disabled-active-indicator-height: 0;
+
+      --md-filled-text-field-bottom-space: 12px;
+      --md-filled-text-field-top-space: 12px;
+    }
+
+    md-filled-text-field {
+      width: 100%;
+    }
+
+    [hidden] {
+      display: none !important;
+    }
+  `; }
+    render() {
+        return html `
+      <md-filled-text-field
+        type="search"
+        .autocomplete=${this.autocomplete}
+        .spellcheck=${this.spellcheck}
+        .disabled=${this.disabled}
+        .value=${this.value}
+        placeholder=${this.placeholder}
+        @input=${(e) => {
+            this.value = e.target.value;
+            this.dispatchEvent(new Event('input', { composed: true }));
+        }}
+        @blur=${(e) => redispatchEvent(this, e)}
+        @focus=${(e) => redispatchEvent(this, e)}
+        @change=${(e) => redispatchEvent(this, e)}
+        @invalid=${(e) => redispatchEvent(this, e)}
+      >
+        <md-icon slot="leading-icon">search</md-icon>
+        <md-icon-button
+          slot="trailing-icon"
+          ?hidden=${!this.value}
+          @click=${() => {
+            this.value = '';
+            this.textField?.focus?.();
+            this.dispatchEvent(new Event('input', { composed: true }));
+        }}
+        >
+          <md-icon>close</md-icon>
+        </md-icon-button>
+      </md-filled-text-field>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TitaniumFilledSearchInput.prototype, "value", null);
+__decorate([
+    property({ type: String })
+], TitaniumFilledSearchInput.prototype, "placeholder", null);
+__decorate([
+    property({ type: String })
+], TitaniumFilledSearchInput.prototype, "autocomplete", null);
+__decorate([
+    property({ type: Boolean })
+], TitaniumFilledSearchInput.prototype, "spellcheck", null);
+__decorate([
+    property({ type: Boolean })
+], TitaniumFilledSearchInput.prototype, "disabled", null);
+__decorate([
+    query('md-filled-text-field')
+], TitaniumFilledSearchInput.prototype, "textField", null);
+TitaniumFilledSearchInput = __decorate([
+    customElement('titanium-filled-search-input')
+], TitaniumFilledSearchInput);
+export default TitaniumFilledSearchInput;
+//# sourceMappingURL=filled-search-input.js.map

package/titanium/search-input/filled-search-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-search-input.js","sourceRoot":"","sources":["filled-search-input.ts"],"names":[],"mappings":";AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,yBAAyB,CAAC;AACjC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,gDAAgD,CAAC;AAEjF,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAKpD,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,UAAU;IAC1B,0BAAgB,EAAE,CAAC;IAAnB,IAAA,KAAK,2CAAc;IAAnB,IAAA,KAAK,iDAAc;IACnB,gCAAsB,QAAQ,CAAC;IAA/B,IAAA,WAAW,iDAAoB;IAA/B,IAAA,WAAW,uDAAoB;IAC/B,iCAAuB,KAAK,CAAC;IAA7B,IAAA,YAAY,kDAAiB;IAA7B,IAAA,YAAY,wDAAiB;IAC5B,+BAAsB,KAAK,CAAC;IAA5B,IAAA,UAAU,gDAAkB;IAA5B,IAAA,UAAU,sDAAkB;IAC5B,6BAAoB,KAAK,CAAC;IAA1B,IAAA,QAAQ,8CAAkB;IAA1B,IAAA,QAAQ,oDAAkB;IAEhB,4BAA6B;IAA7B,IAAA,SAAS,+CAAoB;IAA7B,IAAA,SAAS,qDAAoB;aAEtE,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BlB,AA3BY,CA2BX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;wBAGS,IAAI,CAAC,YAAY;sBACnB,IAAI,CAAC,UAAU;oBACjB,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,KAAK;sBACL,IAAI,CAAC,WAAW;iBACrB,CAAC,CAA8B,EAAE,EAAE;YAC1C,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;YAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC7D,CAAC;gBACO,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;iBAC9B,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;kBAC9B,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;mBAC9B,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;;;;;oBAK9B,CAAC,IAAI,CAAC,KAAK;mBACZ,GAAG,EAAE;YACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC;YAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC7D,CAAC;;;;;KAKN,CAAC;IACJ,CAAC;;AArEoC;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAA6B;AACnB;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAyC;AAC/B;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAAuC;AAC5B;IAArC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DAAsC;AAC5B;IAArC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDAAoC;AAEhB;IAA/C,KAAK,CAAC,sBAAsB,CAAC;0DAA+C;AAP1D,yBAAyB;IAD7C,aAAa,CAAC,8BAA8B,CAAC;GACzB,yBAAyB,CAuE7C;eAvEoB,yBAAyB"}

package/titanium/search-input/search-input.d.ts

@@ -0,0 +1,29 @@
+import { PropertyValues } from 'lit';
+import '@material/web/iconbutton/icon-button';
+import '@material/web/icon/icon';
+import { ExtendableOutlinedTextField } from '../extendable-outlined-text-field/extendable-outlined-text-field';
+/**
+ * A styled input with built-in search and clear icons. .
+ *
+ * @element titanium-search-input
+ *
+ * @cssprop {Length} --titanium-search-input-expanded-width - Width when input expands
+ *
+ */
+export declare class TitaniumSearchInput extends ExtendableOutlinedTextField {
+    /**
+     *  Whether or not the input should hide the clear button
+     */
+    accessor hideClearButton: boolean;
+    /**
+     *  Whether the input should prevent collapse.
+     */
+    accessor preventCollapse: boolean;
+    protected accessor hasValue: boolean;
+    accessor autocomplete: string;
+    accessor spellcheck: boolean;
+    updated(changedProps: PropertyValues<this>): Promise<void>;
+    static styles: import("lit").CSSResult;
+    protected renderMainSlot(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=search-input.d.ts.map

package/titanium/search-input/search-input.js

@@ -0,0 +1,123 @@
+import { __decorate } from "tslib";
+import { css, html, nothing } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import '@material/web/iconbutton/icon-button';
+import '@material/web/icon/icon';
+import { ExtendableOutlinedTextField } from '../extendable-outlined-text-field/extendable-outlined-text-field';
+/**
+ * A styled input with built-in search and clear icons. .
+ *
+ * @element titanium-search-input
+ *
+ * @cssprop {Length} --titanium-search-input-expanded-width - Width when input expands
+ *
+ */
+let TitaniumSearchInput = class TitaniumSearchInput extends ExtendableOutlinedTextField {
+    #hideClearButton_accessor_storage = false;
+    /**
+     *  Whether or not the input should hide the clear button
+     */
+    get hideClearButton() { return this.#hideClearButton_accessor_storage; }
+    set hideClearButton(value) { this.#hideClearButton_accessor_storage = value; }
+    #preventCollapse_accessor_storage = false;
+    /**
+     *  Whether the input should prevent collapse.
+     */
+    get preventCollapse() { return this.#preventCollapse_accessor_storage; }
+    set preventCollapse(value) { this.#preventCollapse_accessor_storage = value; }
+    #hasValue_accessor_storage = true;
+    get hasValue() { return this.#hasValue_accessor_storage; }
+    set hasValue(value) { this.#hasValue_accessor_storage = value; }
+    #autocomplete_accessor_storage = 'off';
+    get autocomplete() { return this.#autocomplete_accessor_storage; }
+    set autocomplete(value) { this.#autocomplete_accessor_storage = value; }
+    #spellcheck_accessor_storage = false;
+    get spellcheck() { return this.#spellcheck_accessor_storage; }
+    set spellcheck(value) { this.#spellcheck_accessor_storage = value; }
+    async updated(changedProps) {
+        if (changedProps.has('value')) {
+            this.hasValue = !!this.value;
+        }
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      cursor: pointer;
+      overflow: hidden;
+    }
+
+    md-outlined-text-field {
+      width: 48px;
+      --md-outlined-field-outline-width: 0;
+      --md-outlined-field-hover-outline-width: 0;
+      --md-outlined-field-disabled-outline-width: 0;
+
+      -webkit-transition: width 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1); /* Safari */
+      transition: width 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
+      --md-outlined-text-field-bottom-space: 11px;
+      --md-outlined-text-field-top-space: 11px;
+    }
+
+    :host([has-value]) md-icon-button[search],
+    :host([prevent-collapse]) md-icon-button[search],
+    md-outlined-text-field:focus-within md-icon-button[search] {
+      pointer-events: none;
+    }
+
+    :host([has-value]) md-outlined-text-field,
+    :host([prevent-collapse]) md-outlined-text-field,
+    md-outlined-text-field:focus-within {
+      --md-outlined-field-outline-width: initial;
+      --md-outlined-field-disabled-outline-width: initial;
+      --md-outlined-field-hover-outline-width: initial;
+      --md-outlined-text-field-container-shape: initial;
+
+      width: var(--titanium-search-input-expanded-width, 258px);
+    }
+  `; }
+    renderMainSlot() {
+        return html `
+      <slot></slot>
+      <md-icon-button search ?disabled=${this.disabled} @click=${() => this.focus()} @focus=${() => this.focus()} slot="leading-icon">
+        <md-icon search>search</md-icon></md-icon-button
+      >
+
+      ${!this.hasValue
+            ? nothing
+            : html `<md-icon-button
+            slot="trailing-icon"
+            ?disabled=${!this.value || this.disabled}
+            @click=${() => {
+                if (this.disabled) {
+                    return;
+                }
+                this.input.focus();
+                this.value = '';
+                this.dispatchEvent(new Event('input'));
+            }}
+          >
+            <md-icon>close</md-icon></md-icon-button
+          >`}
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: 'hide-clear-button' })
+], TitaniumSearchInput.prototype, "hideClearButton", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'prevent-collapse' })
+], TitaniumSearchInput.prototype, "preventCollapse", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'has-value' })
+], TitaniumSearchInput.prototype, "hasValue", null);
+__decorate([
+    property({ reflect: true, type: String })
+], TitaniumSearchInput.prototype, "autocomplete", null);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], TitaniumSearchInput.prototype, "spellcheck", null);
+TitaniumSearchInput = __decorate([
+    customElement('titanium-search-input')
+], TitaniumSearchInput);
+export { TitaniumSearchInput };
+//# sourceMappingURL=search-input.js.map

package/titanium/search-input/search-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-input.js","sourceRoot":"","sources":["search-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,sCAAsC,CAAC;AAC9C,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,2BAA2B,EAAE,MAAM,kEAAkE,CAAC;AAE/G;;;;;;;GAOG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,2BAA2B;IAII,oCAA2B,KAAK,CAAC;IAHvG;;OAEG;IACmE,IAAA,eAAe,qDAAkB;IAAjC,IAAA,eAAe,2DAAkB;IAKnB,oCAA2B,KAAK,CAAC;IAHrH;;OAEG;IACiF,IAAA,eAAe,qDAAkB;IAAjC,IAAA,eAAe,2DAAkB;IAE9B,6BAAoB,IAAI,CAAC;IAAzB,IAAA,QAAQ,8CAAiB;IAAzB,IAAA,QAAQ,oDAAiB;IAE5D,iCAAuB,KAAK,CAAC;IAA7B,IAAA,YAAY,kDAAiB;IAA7B,IAAA,YAAY,wDAAiB;IAE5B,+BAAsB,KAAK,CAAC;IAA5B,IAAA,UAAU,gDAAkB;IAA5B,IAAA,UAAU,sDAAkB;IAEjF,KAAK,CAAC,OAAO,CAAC,YAAkC;QAC9C,IAAI,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAC/B,CAAC;IACH,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmClB,AAnCY,CAmCX;IAEiB,cAAc;QAC/B,OAAO,IAAI,CAAA;;yCAE0B,IAAI,CAAC,QAAQ,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;;;;QAIxG,CAAC,IAAI,CAAC,QAAQ;YACd,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;wBAEU,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ;qBAC/B,GAAG,EAAE;gBACZ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,OAAO;gBACT,CAAC;gBACD,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;gBACnB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;gBAChB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;YACzC,CAAC;;;YAGD;KACP,CAAC;IACJ,CAAC;;AAhFqE;IAArE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;0DAA2C;AAKnB;IAAnF,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;0DAA2C;AAE9B;IAAtF,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;mDAA6C;AAE5D;IAAnD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAuC;AAE5B;IAApD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDAAsC;AAftE,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CAqF/B"}

package/titanium/service-worker-notifier/service-worker-notifier.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+export declare class TitanuimServiceWorkerNotifier extends LitElement {
+    #private;
+    accessor notificationsStatus: string;
+    accessor scriptUrl: string;
+    connectedCallback(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=service-worker-notifier.d.ts.map

package/titanium/service-worker-notifier/service-worker-notifier.js

@@ -0,0 +1,58 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { ShowSnackbarEvent } from '../../titanium/snackbar/show-snackbar-event';
+let TitanuimServiceWorkerNotifier = class TitanuimServiceWorkerNotifier extends LitElement {
+    #notificationsStatus_accessor_storage;
+    get notificationsStatus() { return this.#notificationsStatus_accessor_storage; }
+    set notificationsStatus(value) { this.#notificationsStatus_accessor_storage = value; }
+    #scriptUrl_accessor_storage = 'service-worker.js';
+    get scriptUrl() { return this.#scriptUrl_accessor_storage; }
+    set scriptUrl(value) { this.#scriptUrl_accessor_storage = value; }
+    #newWorker;
+    #refreshing = false;
+    async connectedCallback() {
+        if ('serviceWorker' in navigator) {
+            const reg = await navigator.serviceWorker.getRegistration();
+            if (reg) {
+                reg.addEventListener('updatefound', () => {
+                    this.#newWorker = reg.installing;
+                    this.#newWorker?.addEventListener('statechange', () => {
+                        if (this.#newWorker?.state === 'installed' && navigator.serviceWorker.controller) {
+                            this.#showUpdatedSnackbar();
+                        }
+                    });
+                });
+                if (reg.waiting && navigator.serviceWorker.controller) {
+                    this.#newWorker = reg.waiting;
+                    this.#showUpdatedSnackbar();
+                }
+            }
+            navigator.serviceWorker.addEventListener('controllerchange', () => {
+                if (this.#refreshing) {
+                    return;
+                }
+                window.location.reload();
+                this.#refreshing = true;
+            });
+        }
+    }
+    async #showUpdatedSnackbar() {
+        await this.dispatchEvent(new ShowSnackbarEvent('Site has been updated', { actionText: 'RELOAD' }));
+        this.#newWorker?.postMessage({ type: 'SKIP_WAITING' });
+    }
+    render() {
+        return html ``;
+    }
+};
+__decorate([
+    property({ type: String })
+], TitanuimServiceWorkerNotifier.prototype, "notificationsStatus", null);
+__decorate([
+    property({ type: String })
+], TitanuimServiceWorkerNotifier.prototype, "scriptUrl", null);
+TitanuimServiceWorkerNotifier = __decorate([
+    customElement('titanium-service-worker-notifier')
+], TitanuimServiceWorkerNotifier);
+export { TitanuimServiceWorkerNotifier };
+//# sourceMappingURL=service-worker-notifier.js.map

package/titanium/service-worker-notifier/service-worker-notifier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"service-worker-notifier.js","sourceRoot":"","sources":["service-worker-notifier.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAGzE,IAAM,6BAA6B,GAAnC,MAAM,6BAA8B,SAAQ,UAAU;IACtB,sCAA4B;IAA5B,IAAA,mBAAmB,yDAAS;IAA5B,IAAA,mBAAmB,+DAAS;IAC5B,8BAAoB,mBAAmB,CAAC;IAAxC,IAAA,SAAS,+CAA+B;IAAxC,IAAA,SAAS,qDAA+B;IAE7E,UAAU,CAAuB;IACjC,WAAW,GAAG,KAAK,CAAC;IAEpB,KAAK,CAAC,iBAAiB;QACrB,IAAI,eAAe,IAAI,SAAS,EAAE,CAAC;YACjC,MAAM,GAAG,GAAG,MAAM,SAAS,CAAC,aAAa,CAAC,eAAe,EAAE,CAAC;YAC5D,IAAI,GAAG,EAAE,CAAC;gBACR,GAAG,CAAC,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE;oBACvC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,UAAU,CAAC;oBACjC,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE;wBACpD,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,KAAK,WAAW,IAAI,SAAS,CAAC,aAAa,CAAC,UAAU,EAAE,CAAC;4BACjF,IAAI,CAAC,oBAAoB,EAAE,CAAC;wBAC9B,CAAC;oBACH,CAAC,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;gBAEH,IAAI,GAAG,CAAC,OAAO,IAAI,SAAS,CAAC,aAAa,CAAC,UAAU,EAAE,CAAC;oBACtD,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC;oBAC9B,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC9B,CAAC;YACH,CAAC;YAED,SAAS,CAAC,aAAa,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,EAAE;gBAChE,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;oBACrB,OAAO;gBACT,CAAC;gBACD,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACzB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YAC1B,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,KAAK,CAAC,oBAAoB;QACxB,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,uBAAuB,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;QACnG,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAC;IACzD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;CACF,CAAA;AA3CsC;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wEAAsC;AAC5B;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAkD;AAFlE,6BAA6B;IADzC,aAAa,CAAC,kCAAkC,CAAC;GACrC,6BAA6B,CA4CzC"}

package/titanium/show-hide/show-hide.d.ts

@@ -0,0 +1,41 @@
+import { LitElement, PropertyValues } from 'lit';
+import '@material/web/button/outlined-button';
+import '@material/web/button/filled-button';
+/**
+ * Titanium Show Hide
+ *
+ * @element titanium-show-hide
+ *
+ * @slot - main slot for content. Please note that component is assuming that the slotted content is not deeply nested.
+ * Please place your items directly in the titanium-show-hide element default slot for this component to function properly.
+ *
+ * @slot [button] - slot for button to show/hide content. If you do not provide a button slot the component will create a default button.
+ *
+ * @cssprop [--titanium-show-hide-flex-direction=column] - flex direction for the parent of the slotted in content
+ * @cssprop [--titanium-show-hide-flex-wrap=wrap] - flex wrap for the parent of the slotted in content
+ * @cssprop [--titanium-show-hide-gap=8px] - flex direction of the for the parent of the slotted in content
+ */
+export default class TitaniumShowHide extends LitElement {
+    #private;
+    /**
+     * This will be the height of the content you want visible when collapsed.
+     * An example would be if you have a list of items where each item is 20px in height
+     * and you want to show only the first 2 items pass in 48px (height of 2 items + gap).
+     */
+    accessor collapseHeight: number;
+    accessor disableFade: boolean;
+    accessor collapsed: boolean;
+    protected accessor hasHiddenItems: boolean;
+    accessor hiddenItemCount: number;
+    /**
+     * Swaps out outlined button for a filled button when true
+     */
+    accessor filled: boolean;
+    protected accessor itemsContainer: HTMLElement;
+    protected accessor collapsedContainer: HTMLElement;
+    updated(changedProps: PropertyValues<this>): void;
+    firstUpdated(): void;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult;
+}
+//# sourceMappingURL=show-hide.d.ts.map

package/titanium/show-hide/show-hide.js

@@ -0,0 +1,171 @@
+import { __decorate } from "tslib";
+import { css, LitElement } from 'lit';
+import { literal, html } from 'lit/static-html.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import '@material/web/button/outlined-button';
+import '@material/web/button/filled-button';
+/**
+ * Titanium Show Hide
+ *
+ * @element titanium-show-hide
+ *
+ * @slot - main slot for content. Please note that component is assuming that the slotted content is not deeply nested.
+ * Please place your items directly in the titanium-show-hide element default slot for this component to function properly.
+ *
+ * @slot [button] - slot for button to show/hide content. If you do not provide a button slot the component will create a default button.
+ *
+ * @cssprop [--titanium-show-hide-flex-direction=column] - flex direction for the parent of the slotted in content
+ * @cssprop [--titanium-show-hide-flex-wrap=wrap] - flex wrap for the parent of the slotted in content
+ * @cssprop [--titanium-show-hide-gap=8px] - flex direction of the for the parent of the slotted in content
+ */
+let TitaniumShowHide = class TitaniumShowHide extends LitElement {
+    #collapseHeight_accessor_storage = 120;
+    /**
+     * This will be the height of the content you want visible when collapsed.
+     * An example would be if you have a list of items where each item is 20px in height
+     * and you want to show only the first 2 items pass in 48px (height of 2 items + gap).
+     */
+    get collapseHeight() { return this.#collapseHeight_accessor_storage; }
+    set collapseHeight(value) { this.#collapseHeight_accessor_storage = value; }
+    #disableFade_accessor_storage = false;
+    get disableFade() { return this.#disableFade_accessor_storage; }
+    set disableFade(value) { this.#disableFade_accessor_storage = value; }
+    #collapsed_accessor_storage = true;
+    get collapsed() { return this.#collapsed_accessor_storage; }
+    set collapsed(value) { this.#collapsed_accessor_storage = value; }
+    #hasHiddenItems_accessor_storage = false;
+    get hasHiddenItems() { return this.#hasHiddenItems_accessor_storage; }
+    set hasHiddenItems(value) { this.#hasHiddenItems_accessor_storage = value; }
+    #hiddenItemCount_accessor_storage = 0;
+    get hiddenItemCount() { return this.#hiddenItemCount_accessor_storage; }
+    set hiddenItemCount(value) { this.#hiddenItemCount_accessor_storage = value; }
+    #filled_accessor_storage = false;
+    /**
+     * Swaps out outlined button for a filled button when true
+     */
+    get filled() { return this.#filled_accessor_storage; }
+    set filled(value) { this.#filled_accessor_storage = value; }
+    #itemsContainer_accessor_storage;
+    get itemsContainer() { return this.#itemsContainer_accessor_storage; }
+    set itemsContainer(value) { this.#itemsContainer_accessor_storage = value; }
+    #collapsedContainer_accessor_storage;
+    get collapsedContainer() { return this.#collapsedContainer_accessor_storage; }
+    set collapsedContainer(value) { this.#collapsedContainer_accessor_storage = value; }
+    updated(changedProps) {
+        if (changedProps.has('collapsed')) {
+            this.dispatchEvent(new Event('collapsed-changed'));
+        }
+        if (changedProps.has('hiddenItemCount')) {
+            this.dispatchEvent(new Event('hidden-item-count-changed'));
+        }
+    }
+    firstUpdated() {
+        const resizeObserver = new ResizeObserver(() => {
+            // Look at the reserved space in the container and see how many items we can show without exceeding the collapse height.
+            // We then display the count of the remaining hidden items on the button
+            const items = this.itemsContainer.children?.[0]?.assignedElements();
+            this.hiddenItemCount = items.filter((o) => !this.#isWithin(this.collapsedContainer, o)).length;
+            this.hasHiddenItems = !!this.hiddenItemCount;
+        });
+        resizeObserver.observe(this.itemsContainer);
+    }
+    #isWithin(container, element) {
+        const containerRect = container.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        return (elementRect.top >= containerRect.top &&
+            elementRect.bottom <= containerRect.top + this.collapseHeight &&
+            elementRect.left >= containerRect.left &&
+            elementRect.right <= containerRect.right);
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+
+      items-container,
+      collapsed-box {
+        display: block;
+      }
+
+      :host([collapsed]) collapsed-box {
+        overflow: hidden;
+      }
+
+      :host([collapsed][has-hidden-items]:not([disable-fade])) collapsed-box {
+        -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
+        mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
+      }
+
+      items-container {
+        display: flex;
+        flex-direction: var(--titanium-show-hide-flex-direction, column);
+        flex-wrap: var(--titanium-show-hide-flex-wrap, wrap);
+        gap: var(--titanium-show-hide-gap, 8px);
+      }
+
+      md-outlined-button,
+      md-filled-button {
+        max-width: 160px;
+        width: 100%;
+        margin-top: 12px;
+        align-self: center;
+      }
+
+      [hidden] {
+        display: none;
+      }
+    `,
+    ]; }
+    render() {
+        /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+        return html `
+      <style>
+        :host([collapsed]) collapsed-box {
+          max-height: ${this.collapseHeight}px;
+        }
+      </style>
+      <collapsed-box>
+        <items-container part="items-container">
+          <slot></slot>
+        </items-container>
+      </collapsed-box>
+      <slot name="button" @click=${() => (this.collapsed = !this.collapsed)} ?hidden=${!this.hasHiddenItems}>
+        <${this.filled ? literal `md-filled-button` : literal `md-outlined-button`} part="button">
+          ${this.collapsed ? `Show more (${this.hiddenItemCount})` : 'Show less'}
+        </${this.filled ? literal `md-filled-button` : literal `md-outlined-button`}>
+      </slot>
+    `;
+        /* eslint-enable lit/binding-positions, lit/no-invalid-html */
+    }
+};
+__decorate([
+    property({ type: Number, attribute: 'collapse-height' })
+], TitaniumShowHide.prototype, "collapseHeight", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'disable-fade' })
+], TitaniumShowHide.prototype, "disableFade", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'collapsed' })
+], TitaniumShowHide.prototype, "collapsed", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'has-hidden-items' })
+], TitaniumShowHide.prototype, "hasHiddenItems", null);
+__decorate([
+    property({ type: Number })
+], TitaniumShowHide.prototype, "hiddenItemCount", null);
+__decorate([
+    property({ type: Boolean, attribute: 'filled' })
+], TitaniumShowHide.prototype, "filled", null);
+__decorate([
+    query('items-container')
+], TitaniumShowHide.prototype, "itemsContainer", null);
+__decorate([
+    query('collapsed-box')
+], TitaniumShowHide.prototype, "collapsedContainer", null);
+TitaniumShowHide = __decorate([
+    customElement('titanium-show-hide')
+], TitaniumShowHide);
+export default TitaniumShowHide;
+//# sourceMappingURL=show-hide.js.map

package/titanium/show-hide/show-hide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"show-hide.js","sourceRoot":"","sources":["show-hide.ts"],"names":[],"mappings":"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"}