@leavittsoftware/web 8.7.2 → 8.8.0

package/titanium/chip/chip.js

@@ -0,0 +1,289 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon';
+import '@material/web/iconbutton/icon-button';
+import '@material/web/ripple/ripple';
+import '@material/web/focus/md-focus-ring';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
+import { ellipsis } from '@leavittsoftware/web/titanium/styles/ellipsis';
+let TitaniumChip = class TitaniumChip extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The URL that the link button points to.
+         */
+        this.href = '';
+        /**
+         * The filename to use when downloading the linked resource.
+         * If not specified, the browser will determine a filename.
+         * This is only applicable when the button is used as a link (`href` is set).
+         */
+        this.download = '';
+        /**
+         * Where to display the linked `href` URL for a link button. Common options
+         * include `_blank` to open in a new tab.
+         */
+        this.target = '';
+        this.#inputChipRemoveIcon_accessor_storage = 'close';
+        this.#disabled_accessor_storage = false;
+        this.#filled_accessor_storage = false;
+        this.#hasLeadingItems_accessor_storage = false;
+        this.#hasTrailingItems_accessor_storage = false;
+    }
+    #label_accessor_storage;
+    /**
+     *  Label / text of the chip
+     */
+    get label() { return this.#label_accessor_storage; }
+    set label(value) { this.#label_accessor_storage = value; }
+    #selected_accessor_storage;
+    /**
+     *  When true, the chip is selected
+     */
+    get selected() { return this.#selected_accessor_storage; }
+    set selected(value) { this.#selected_accessor_storage = value; }
+    #inputChip_accessor_storage;
+    /**
+     *  When true, trailing slot is replaced with a remove icon button
+     */
+    get inputChip() { return this.#inputChip_accessor_storage; }
+    set inputChip(value) { this.#inputChip_accessor_storage = value; }
+    #nonInteractive_accessor_storage;
+    /**
+     *  Prevents mouse events and disables the ripple effect
+     */
+    get nonInteractive() { return this.#nonInteractive_accessor_storage; }
+    set nonInteractive(value) { this.#nonInteractive_accessor_storage = value; }
+    #inputChipRemoveIcon_accessor_storage;
+    /**
+     *  Icon name of the remove icon chip
+     */
+    get inputChipRemoveIcon() { return this.#inputChipRemoveIcon_accessor_storage; }
+    set inputChipRemoveIcon(value) { this.#inputChipRemoveIcon_accessor_storage = value; }
+    #disabled_accessor_storage;
+    /**
+     *  Whether or not the input should be disabled
+     */
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #filled_accessor_storage;
+    get filled() { return this.#filled_accessor_storage; }
+    set filled(value) { this.#filled_accessor_storage = value; }
+    #hasLeadingItems_accessor_storage;
+    get hasLeadingItems() { return this.#hasLeadingItems_accessor_storage; }
+    set hasLeadingItems(value) { this.#hasLeadingItems_accessor_storage = value; }
+    #hasTrailingItems_accessor_storage;
+    get hasTrailingItems() { return this.#hasTrailingItems_accessor_storage; }
+    set hasTrailingItems(value) { this.#hasTrailingItems_accessor_storage = value; }
+    static { this.styles = [
+        ellipsis,
+        css `
+      :host {
+        display: grid;
+        height: 32px;
+        width: auto;
+
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+
+        text-align: left;
+      }
+
+      a,
+      button {
+        display: grid;
+        align-items: center;
+        align-content: center;
+
+        position: relative;
+
+        appearance: button;
+        cursor: pointer;
+
+        font: inherit;
+        margin: 0;
+        border: none;
+
+        box-sizing: border-box;
+        height: inherit;
+        text-align: inherit;
+
+        border: 1px solid var(--titanium-chip-outline-color, var(--md-sys-color-outline));
+        border-radius: 8px;
+        --md-focus-ring-shape: 8px;
+
+        color: inherit;
+        background: inherit;
+        width: inherit;
+
+        outline: none;
+
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+        letter-spacing: inherit;
+        text-decoration: none;
+
+        padding: 0 12px;
+      }
+
+      :host([filled]) a,
+      :host([filled]) button {
+        border: none;
+        background-color: var(--titanium-chip-filled-background-color, var(--md-sys-color-surface-container));
+        color: var(--titanium-chip-filled-color, var(--md-sys-color-on-surface));
+      }
+
+      :host([selected]) button,
+      :host([selected]) a,
+      :host([has-leading-items]) button,
+      :host([has-leading-items]) a {
+        grid: 'icon label' / auto 1fr;
+        padding-left: 8px;
+      }
+
+      :host([input-chip]) button,
+      :host([input-chip]) a,
+      :host([has-trailing-items]) button,
+      :host([has-trailing-items]) a {
+        grid: 'label trailing' / 1fr auto;
+        padding-right: 4px;
+      }
+
+      :host([selected][input-chip]) button,
+      :host([selected][input-chip]) a,
+      :host([selected][has-leading-items]) button,
+      :host([selected][has-leading-items]) a,
+      :host([has-leading-items][input-chip]) button,
+      :host([has-leading-items][input-chip]) a,
+      :host([has-trailing-items][has-leading-items]) button,
+      :host([has-trailing-items][has-leading-items]) a {
+        grid: 'icon label trailing' / auto 1fr auto;
+      }
+
+      main[label] {
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+        letter-spacing: inherit;
+        text-align: inherit;
+
+        padding: 6px 0;
+      }
+
+      md-icon[selected-check] {
+        padding-right: var(--titanium-chip-selected-with-leading-icon-leading-space, 8px);
+        --md-icon-size: 18px;
+      }
+
+      [name='icon']::slotted(md-icon) {
+        color: var(--md-sys-color-primary);
+        --md-icon-size: 18px;
+        padding-right: var(--titanium-chip-with-leading-icon-leading-space, 8px);
+      }
+
+      [name='icon']::slotted(profile-picture) {
+        padding-right: var(--titanium-chip-with-leading-icon-leading-space, 8px);
+      }
+
+      md-icon-button {
+        --md-icon-button-icon-size: 18px;
+        --md-icon-button-state-layer-height: 24px;
+        --md-icon-button-state-layer-width: 24px;
+        margin-left: 4px;
+      }
+
+      :host([selected]) button {
+        background: var(--titanium-chip-selected-container-color, var(--md-sys-color-secondary-container));
+        color: var(--titanium-chip-selected-text-color, var(--md-sys-color-on-secondary-container));
+        border-color: var(--titanium-chip-selected-outline-color, var(--md-sys-color-secondary-container));
+      }
+    `,
+    ]; }
+    render() {
+        return html ` ${this.href ? this.renderLink() : this.renderButton()} `;
+    }
+    renderContent() {
+        const buttonId = this.href ? 'link' : 'button';
+        return html `
+      <md-ripple part="focus-ring" for=${buttonId} ?disabled=${this.disabled}></md-ripple>
+      <md-focus-ring part="ripple" for=${buttonId}></md-focus-ring>
+      ${this.selected ? html `<md-icon selected-check>check</md-icon>` : html `<slot name="icon" @slotchange=${() => (this.hasLeadingItems = this.leadingSlotElements.length > 0)}></slot>`}
+      
+      <main label ellipsis><slot name="label">${this.label}</slot></main>
+      
+        ${this.inputChip
+            ? html `<md-icon-button
+                ?disabled=${this.disabled}
+                @click=${(e) => {
+                e.stopPropagation();
+                this.dispatchEvent(new Event('remove'));
+            }}
+                ><md-icon>${this.inputChipRemoveIcon}</md-icon></md-icon-button
+              >`
+            : html `<slot name="trailing" @slotchange=${() => (this.hasTrailingItems = this.trailingSlotElements.length > 0)}></slot>`}
+      </slot>
+    `;
+    }
+    renderButton() {
+        return html `<button id="button" part="button" ?inert=${this.nonInteractive} ?disabled=${this.disabled}>${this.renderContent()}</button>`;
+    }
+    renderLink() {
+        return html `<a
+      id="link"
+      tabindex=${this.disabled ? -1 : nothing}
+      href=${this.href}
+      download=${this.download || nothing}
+      target=${this.target || nothing}
+      >${this.renderContent()}
+    </a>`;
+    }
+};
+__decorate([
+    property({ type: String })
+], TitaniumChip.prototype, "label", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TitaniumChip.prototype, "selected", null);
+__decorate([
+    property({ type: String })
+], TitaniumChip.prototype, "href", void 0);
+__decorate([
+    property()
+], TitaniumChip.prototype, "download", void 0);
+__decorate([
+    property()
+], TitaniumChip.prototype, "target", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'input-chip' })
+], TitaniumChip.prototype, "inputChip", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'non-interactive' })
+], TitaniumChip.prototype, "nonInteractive", null);
+__decorate([
+    property({ type: String })
+], TitaniumChip.prototype, "inputChipRemoveIcon", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TitaniumChip.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean })
+], TitaniumChip.prototype, "filled", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'has-leading-items' })
+], TitaniumChip.prototype, "hasLeadingItems", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'has-trailing-items' })
+], TitaniumChip.prototype, "hasTrailingItems", null);
+__decorate([
+    queryAssignedElements({ slot: 'icon' })
+], TitaniumChip.prototype, "leadingSlotElements", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'trailing' })
+], TitaniumChip.prototype, "trailingSlotElements", void 0);
+TitaniumChip = __decorate([
+    customElement('titanium-chip')
+], TitaniumChip);
+export { TitaniumChip };
+//# sourceMappingURL=chip.js.map

package/titanium/chip/chip.js.map

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

package/titanium/chip-multi-select/chip-multi-select.d.ts

@@ -0,0 +1,71 @@
+import { LitElement, PropertyValues } from 'lit';
+import '../../titanium/input-validator/outlined-input-validator';
+import '../../titanium/input-validator/filled-input-validator';
+/**
+ *  Multi select outlined themed input that styles
+ *  slotted in chips and add button
+ *
+ *  @element titanium-chip-multi-select
+ *
+ * @slot default - Main slot (intended to be a <md-outlined-button> and a list of <md-chip>)
+ *
+ */
+export declare class TitaniumChipMultiSelect extends LitElement {
+    /**
+     *  Swaps outlined validator for filled validator
+     */
+    accessor filled: boolean;
+    /**
+     *  Label of input to display to users
+     */
+    accessor label: string;
+    /**
+     *  Text to show when there are no items
+     */
+    accessor noItemsText: string;
+    /**
+     *  Adds the * to the label
+     */
+    accessor required: boolean;
+    /**
+     *  Indicates whether or not to show the no items text
+     */
+    accessor hasItems: boolean;
+    /**
+     *   Passes the supportingText property to the input-validator
+     */
+    accessor supportingText: string;
+    /**
+     *  Passes the error property to the input-validator
+     */
+    accessor error: boolean;
+    /**
+     *  Passes the errorText property to the input-validator
+     */
+    accessor errorText: string;
+    /**
+     *  Passes the resizable property to the input-validator
+     */
+    accessor resizable: boolean;
+    /**
+     *  Whether or not the input should appear disabled (chips, buttons and anything else slotted will still have to be disabled individually).
+     */
+    accessor disabled: boolean;
+    private accessor validator;
+    updated(changedProps: PropertyValues<this>): void;
+    /**
+     *  Returns true if the input passes validity checks.
+     */
+    checkValidity(): boolean | undefined;
+    /**
+     *  Runs checkValidity() method, and if it returns false, then it reports to the user that the input is invalid.
+     */
+    reportValidity(): boolean | undefined;
+    /**
+     *  Resets the inputs state.
+     */
+    reset(): void;
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit-html").TemplateResult;
+}
+//# sourceMappingURL=chip-multi-select.d.ts.map

package/titanium/chip-multi-select/chip-multi-select.js

@@ -0,0 +1,228 @@
+import { __decorate } from "tslib";
+import { css, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { literal, html } from 'lit/static-html.js';
+import '../../titanium/input-validator/outlined-input-validator';
+import '../../titanium/input-validator/filled-input-validator';
+/**
+ *  Multi select outlined themed input that styles
+ *  slotted in chips and add button
+ *
+ *  @element titanium-chip-multi-select
+ *
+ * @slot default - Main slot (intended to be a <md-outlined-button> and a list of <md-chip>)
+ *
+ */
+let TitaniumChipMultiSelect = class TitaniumChipMultiSelect extends LitElement {
+    #filled_accessor_storage = false;
+    /**
+     *  Swaps outlined validator for filled validator
+     */
+    get filled() { return this.#filled_accessor_storage; }
+    set filled(value) { this.#filled_accessor_storage = value; }
+    #label_accessor_storage;
+    /**
+     *  Label of input to display to users
+     */
+    get label() { return this.#label_accessor_storage; }
+    set label(value) { this.#label_accessor_storage = value; }
+    #noItemsText_accessor_storage = 'No items';
+    /**
+     *  Text to show when there are no items
+     */
+    get noItemsText() { return this.#noItemsText_accessor_storage; }
+    set noItemsText(value) { this.#noItemsText_accessor_storage = value; }
+    #required_accessor_storage = false;
+    /**
+     *  Adds the * to the label
+     */
+    get required() { return this.#required_accessor_storage; }
+    set required(value) { this.#required_accessor_storage = value; }
+    #hasItems_accessor_storage;
+    /**
+     *  Indicates whether or not to show the no items text
+     */
+    get hasItems() { return this.#hasItems_accessor_storage; }
+    set hasItems(value) { this.#hasItems_accessor_storage = value; }
+    #supportingText_accessor_storage;
+    /**
+     *   Passes the supportingText property to the input-validator
+     */
+    get supportingText() { return this.#supportingText_accessor_storage; }
+    set supportingText(value) { this.#supportingText_accessor_storage = value; }
+    #error_accessor_storage;
+    /**
+     *  Passes the error property to the input-validator
+     */
+    get error() { return this.#error_accessor_storage; }
+    set error(value) { this.#error_accessor_storage = value; }
+    #errorText_accessor_storage;
+    /**
+     *  Passes the errorText property to the input-validator
+     */
+    get errorText() { return this.#errorText_accessor_storage; }
+    set errorText(value) { this.#errorText_accessor_storage = value; }
+    #resizable_accessor_storage;
+    /**
+     *  Passes the resizable property to the input-validator
+     */
+    get resizable() { return this.#resizable_accessor_storage; }
+    set resizable(value) { this.#resizable_accessor_storage = value; }
+    #disabled_accessor_storage;
+    /**
+     *  Whether or not the input should appear disabled (chips, buttons and anything else slotted will still have to be disabled individually).
+     */
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #validator_accessor_storage;
+    get validator() { return this.#validator_accessor_storage; }
+    set validator(value) { this.#validator_accessor_storage = value; }
+    updated(changedProps) {
+        if ((changedProps.get('hasItems') && changedProps.has('hasItems')) || (this.hasItems && changedProps.has('hasItems'))) {
+            this.reportValidity();
+        }
+    }
+    /**
+     *  Returns true if the input passes validity checks.
+     */
+    checkValidity() {
+        return this.validator?.checkValidity();
+    }
+    /**
+     *  Runs checkValidity() method, and if it returns false, then it reports to the user that the input is invalid.
+     */
+    reportValidity() {
+        return this.validator?.reportValidity();
+    }
+    /**
+     *  Resets the inputs state.
+     */
+    reset() {
+        this.validator?.reset();
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      titanium-outlined-input-validator,
+      titanium-filled-input-validator {
+        display: block;
+        width: 100%;
+      }
+
+      slot-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        align-items: center;
+      }
+
+      span {
+        font-size: 13px;
+      }
+
+      :host([filled]) {
+        --md-filled-field-container-shape: 16px;
+
+        --md-filled-field-active-indicator-height: 0;
+        --md-filled-field-error-active-indicator-height: 0;
+        --md-filled-field-hover-active-indicator-height: 0;
+        --md-filled-field-focus-active-indicator-height: 0;
+        --md-filled-field-disabled-active-indicator-height: 0;
+
+        slot-container {
+          margin-top: 6px;
+        }
+
+        titanium-filled-input-validator {
+          --md-filled-field-with-label-bottom-space: 12px;
+        }
+
+        ::slotted(md-filled-button),
+        ::slotted(md-filled-tonal-button) {
+          --md-filled-button-container-shape: 8px;
+          --md-filled-button-container-height: 32px;
+
+          --md-filled-button-with-trailing-icon-leading-space: 8px;
+          --md-filled-button-with-trailing-icon-trailing-space: 16px;
+          --md-filled-button-with-leading-icon-leading-space: 8px;
+          --md-filled-button-with-leading-icon-trailing-space: 16px;
+
+          --md-filled-tonal-button-with-trailing-icon-leading-space: 8px;
+          --md-filled-tonal-button-with-trailing-icon-trailing-space: 16px;
+          --md-filled-tonal-button-with-leading-icon-leading-space: 8px;
+          --md-filled-tonal-button-with-leading-icon-trailing-space: 16px;
+          --md-filled-tonal-button-container-shape: 8px;
+          --md-filled-tonal-button-container-height: 32px;
+        }
+
+        ::slotted(md-input-chip) {
+          background: var(--md-sys-color-surface-container);
+          --md-sys-color-outline: transparent;
+        }
+      }
+    `,
+    ]; }
+    render() {
+        /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+        return html `
+      <${this.filled ? literal `titanium-filled-input-validator` : literal `titanium-outlined-input-validator`}
+        ?disabled=${this.disabled}
+        .evaluator=${() => !this.required || !!this.hasItems}
+        ?required=${this.required}
+        .label=${this.label}
+        .resizable=${this.resizable}
+        .supportingText=${this.supportingText}
+        .errorText=${this.errorText}
+        ?error=${this.error}
+      >
+        <slot-container>
+          <slot></slot>
+          ${!this.hasItems ? html ` <span>${this.noItemsText}</span>` : ''}
+        </slot-container>
+      </${this.filled ? literal `titanium-filled-input-validator` : literal `titanium-outlined-input-validator`}>
+    `;
+        /* eslint-enable lit/binding-positions, lit/no-invalid-html */
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: 'filled' })
+], TitaniumChipMultiSelect.prototype, "filled", null);
+__decorate([
+    property({ type: String })
+], TitaniumChipMultiSelect.prototype, "label", null);
+__decorate([
+    property({ type: String })
+], TitaniumChipMultiSelect.prototype, "noItemsText", null);
+__decorate([
+    property({ type: Boolean })
+], TitaniumChipMultiSelect.prototype, "required", null);
+__decorate([
+    property({ type: Boolean })
+], TitaniumChipMultiSelect.prototype, "hasItems", null);
+__decorate([
+    property({ type: String })
+], TitaniumChipMultiSelect.prototype, "supportingText", null);
+__decorate([
+    property({ type: Boolean })
+], TitaniumChipMultiSelect.prototype, "error", null);
+__decorate([
+    property({ type: String })
+], TitaniumChipMultiSelect.prototype, "errorText", null);
+__decorate([
+    property({ type: Boolean })
+], TitaniumChipMultiSelect.prototype, "resizable", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TitaniumChipMultiSelect.prototype, "disabled", null);
+__decorate([
+    query('titanium-outlined-input-validator, titanium-filled-input-validator')
+], TitaniumChipMultiSelect.prototype, "validator", null);
+TitaniumChipMultiSelect = __decorate([
+    customElement('titanium-chip-multi-select')
+], TitaniumChipMultiSelect);
+export { TitaniumChipMultiSelect };
+//# sourceMappingURL=chip-multi-select.js.map

package/titanium/chip-multi-select/chip-multi-select.js.map

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

package/titanium/circle-loading-indicator/circle-loading-indicator.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import '@material/web/progress/circular-progress';
+/**
+ * A simple circle with loading indicator that uses promise driven pending-state-events
+ *
+ * @element titanium-circle-loading-indicator
+ *
+ *
+ */
+export declare class TitaniumCircleLoadingIndicator extends LitElement {
+    #private;
+    accessor pendingStateElement: Element | null;
+    private accessor open;
+    private accessor closed;
+    firstUpdated(): void;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=circle-loading-indicator.d.ts.map