@blueprintui/cli 0.0.6 → 0.0.7

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/drawer/element.js

@@ -0,0 +1,54 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { baseStyles, typeDialog, elevationStyles } from '@blueprintui/components/internals';
+import styles from './element.css' assert { type: 'css' };
+/**
+ * ```typescript
+ * import '@blueprintui/components/include/drawer.js';
+ * ```
+ *
+ * ```html
+ * <bp-drawer></bp-drawer>
+ * ```
+ *
+ * @element bp-drawer
+ * @slot - content
+ */
+let BpDrawer = class BpDrawer extends LitElement {
+    static properties = {
+        closable: { type: Boolean },
+        dismissible: { type: Boolean, reflect: true },
+        static: { type: Boolean },
+        position: { type: String, reflect: true },
+        elevation: { type: String, reflect: true }
+    };
+    constructor() {
+        super(...arguments);
+        this.closable = false;
+        this.dismissible = true;
+        this.static = false;
+        this.position = 'left';
+    }
+    /* @private */
+    get dialog() {
+        return this.shadowRoot.querySelector('dialog');
+    }
+    static get styles() {
+        return [baseStyles, elevationStyles, styles];
+    }
+    get #contentTemplate() {
+        return html `
+    <div class="focus-wrap"></div>
+    ${this.closable ? html `<bp-button-icon @click=${() => this.dialogController.close()} aria-label="close modal" shape="close" type="button"></bp-button-icon>` : ''}
+    <slot></slot>`;
+    }
+    render() {
+        return html `
+      ${this.static ? html `<div elevation class="dialog">${this.#contentTemplate}</div>` : html `<dialog elevation hidden class="dialog">${this.#contentTemplate}</dialog>`}
+    `;
+    }
+};
+BpDrawer = __decorate([
+    typeDialog()
+], BpDrawer);
+export { BpDrawer };

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/drawer/index.d.ts

@@ -0,0 +1 @@
+export * from './element.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/drawer/index.js

@@ -0,0 +1 @@
+export * from './element.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/dropdown/element.d.ts

@@ -0,0 +1,24 @@
+import { PropertyValueMap } from 'lit';
+import { BpPopup } from '@blueprintui/components/popup';
+/**
+ * ```typescript
+ * import '@blueprintui/components/include/dropdown.js';
+ * ```
+ *
+ * ```html
+ * <bp-dropdown closable>
+ *
+ * </bp-dropdown>
+ * ```
+ *
+ * @element bp-dropdown
+ * @slot - content
+ * @cssprop --background
+ */
+export declare class BpDropdown extends BpPopup {
+    #private;
+    static get styles(): CSSStyleSheet[];
+    get hasMenu(): boolean;
+    constructor();
+    protected firstUpdated(props: PropertyValueMap<this>): void;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/dropdown/element.js

@@ -0,0 +1,37 @@
+import { BpPopup } from '@blueprintui/components/popup';
+import styles from './element.css' assert { type: 'css' };
+/**
+ * ```typescript
+ * import '@blueprintui/components/include/dropdown.js';
+ * ```
+ *
+ * ```html
+ * <bp-dropdown closable>
+ *
+ * </bp-dropdown>
+ * ```
+ *
+ * @element bp-dropdown
+ * @slot - content
+ * @cssprop --background
+ */
+export class BpDropdown extends BpPopup {
+    static get styles() {
+        return [...super.styles, styles];
+    }
+    get hasMenu() {
+        return this.querySelectorAll('bp-menu').length > 0;
+    }
+    constructor() {
+        super();
+        this.position = 'bottom-start';
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this.#setMenu();
+        this.addEventListener('slotchange', () => this.#setMenu());
+    }
+    #setMenu() {
+        this.hasMenu ? this.setAttribute('_menu', '') : this.removeAttribute('_menu');
+    }
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/dropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './element.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/dropdown/index.js

@@ -0,0 +1 @@
+export * from './element.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/file/element.d.ts

@@ -0,0 +1,55 @@
+import { PropertyValues } from 'lit';
+import { BpControl } from '@blueprintui/components/forms';
+/**
+ * File Input
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/file.js';
+ * ```
+ *
+ * ```html
+ * <bp-file>
+ *   <label>file</label>
+ *   <input type="file" />
+ * </bp-file>
+ * ```
+ *
+ * @element bp-file
+ * @slot - For projecting file input and label
+ */
+export declare class BpFile extends BpControl {
+    #private;
+    i18n: {
+        sort: string;
+        expand: string;
+        close: string;
+        resize: string;
+        filter: string;
+        loading: string;
+        show: string;
+        hide: string;
+        previous: string;
+        next: string;
+        first: string;
+        last: string;
+        today: string;
+        browse: string;
+        removeFile: string;
+        files: string;
+        resizeColumn: string;
+        closeDetails: string;
+        noData: string;
+        action: string;
+        dropTarget: string;
+        firstPage: string;
+        previousPage: string;
+        nextPage: string;
+        lastPage: string;
+        pageSize: string;
+    };
+    private buttonLabel;
+    protected supportsPrefixSuffixActions: boolean;
+    static get styles(): CSSStyleSheet[];
+    protected get inputTemplate(): import("lit-html").TemplateResult<1>;
+    firstUpdated(props: PropertyValues<this>): void;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/file/element.js

@@ -0,0 +1,81 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { BpControl } from '@blueprintui/components/forms';
+import { i18n, I18nService } from '@blueprintui/components/internals';
+import styles from './element.css' assert { type: 'css' };
+/**
+ * File Input
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/file.js';
+ * ```
+ *
+ * ```html
+ * <bp-file>
+ *   <label>file</label>
+ *   <input type="file" />
+ * </bp-file>
+ * ```
+ *
+ * @element bp-file
+ * @slot - For projecting file input and label
+ */
+let BpFile = class BpFile extends BpControl {
+    static properties = {
+        i18n: { type: Object },
+        buttonLabel: { state: true },
+        supportsPrefixSuffixActions: { state: true }
+    };
+    constructor() {
+        super(...arguments);
+        this.i18n = I18nService.keys.actions;
+        this.buttonLabel = this.i18n.browse;
+        this.supportsPrefixSuffixActions = false;
+    }
+    static get styles() {
+        return [...super.styles, styles];
+    }
+    get inputTemplate() {
+        return html `
+      <div class="file-input">
+        <bp-button size="sm" action="outline" @click=${() => this.label.click()} ?disabled=${this.disabled}>
+          <bp-icon shape="folder" size="sm" aria-hidden="true"></bp-icon>
+          <span>${this.buttonLabel}</span>
+        </bp-button>
+        ${this.inputControl.files?.length && !this.disabled ? html `
+        <bp-button-icon shape="times" @click=${() => this.#clearFiles()} aria-label="${this.i18n.removeFile}"></bp-button-icon>` : ''}
+      </div>
+    `;
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this.inputControl.addEventListener('change', e => {
+            if (e.isTrusted) {
+                this.#updateLabelAndFocus(e.target.files);
+            }
+        });
+    }
+    #clearFiles(fireEvent = true) {
+        this.buttonLabel = this.i18n.browse;
+        this.inputControl.value = '';
+        if (fireEvent && this.inputControl.dispatchEvent) {
+            this.inputControl.dispatchEvent(new Event('change'));
+        }
+        const browseButton = this.shadowRoot?.querySelector('bp-button');
+        if (browseButton) {
+            browseButton.focus();
+        }
+    }
+    #updateLabelAndFocus(files) {
+        if (files && files.length) {
+            this.buttonLabel = files.length > 1 ? `${files.length} ${this.i18n.files}` : files[0].name;
+        }
+        else {
+            this.#clearFiles(false);
+        }
+    }
+};
+BpFile = __decorate([
+    i18n({ key: 'actions' })
+], BpFile);
+export { BpFile };

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/file/index.d.ts

@@ -0,0 +1 @@
+export * from './element.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/file/index.js

@@ -0,0 +1 @@
+export * from './element.js';

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/forms/control/element.d.ts

@@ -0,0 +1,91 @@
+import { ContextConsumer, ContextProvider } from '@lit-labs/context';
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
+import { ControlStatus, ControlLayout, ControlWidth } from './../utils/interfaces.js';
+import { BpControlMessage } from '../control-message/element.js';
+import { BpInternalControlLabel } from '../control-label/element.js';
+export declare const enum ControlLabelLayout {
+    default = "default",
+    ariaLabel = "aria-label",
+    inputGroup = "input-group"
+}
+/**
+ * Generic Control
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-control>
+ *   <label>control</label>
+ *   <input type="text" />
+ * </bp-control>
+ * ```
+ * @element bp-control
+ * @slot
+ * @cssprop --background
+ */
+export declare class BpControl extends LitElement {
+    #private;
+    /** status of form control validation */
+    status: ControlStatus;
+    /** https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation */
+    validate: boolean;
+    /** forms automatically collapse to layout that prevents overflow */
+    responsive: boolean;
+    /** default full width or the browser default width */
+    controlWidth: ControlWidth;
+    /**
+     * @property
+     * @type { 'vertical' | 'horizontal' | 'compact' }
+     */
+    get layout(): ControlLayout;
+    set layout(value: ControlLayout);
+    static get properties(): {
+        layout: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    protected focused: boolean;
+    protected disabled: boolean;
+    protected readonly: boolean;
+    protected supportsPrefixSuffixActions: boolean;
+    labelLayout: ControlLabelLayout;
+    /** @private */
+    controlLabel: BpInternalControlLabel;
+    private inputContainer;
+    private prefixAction;
+    private suffixAction;
+    private messageSlot;
+    /** @private */
+    get inputControl(): HTMLInputElement;
+    get label(): HTMLLabelElement;
+    get messages(): NodeListOf<BpControlMessage>;
+    protected observers: (MutationObserver | ResizeObserver)[];
+    static styles: CSSStyleSheet[];
+    protected get isRTL(): boolean;
+    render(): TemplateResult<1>;
+    protected get inputTemplate(): TemplateResult<1>;
+    protected get prefixTemplate(): TemplateResult | null;
+    protected get suffixTemplate(): TemplateResult | null;
+    protected get messagesTemplate(): TemplateResult<1> | "";
+    protected formContext: ContextConsumer<{
+        __context__: import("../utils/context.js").FormContext;
+    }, this>;
+    protected controlGroupContext: ContextConsumer<{
+        __context__: import("../utils/context.js").FormContext & {
+            isControlGroup?: boolean;
+        };
+    }, this>;
+    protected controlContext: ContextProvider<{
+        __context__: import("../utils/context.js").FormContext;
+    }>;
+    connectedCallback(): void;
+    firstUpdated(props: PropertyValues<this>): void;
+    updated(props: PropertyValues<any>): void;
+    disconnectedCallback(): void;
+    protected associateInputAndLabel(): void;
+    /** @private */
+    get layoutStable(): boolean;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/forms/control/element.js

@@ -0,0 +1,282 @@
+import { __decorate } from "tslib";
+import { ContextConsumer, ContextProvider } from '@lit-labs/context';
+import { html, LitElement } from 'lit';
+import { baseStyles, interactionResponsive, createId, syncProps, childrenUpdateComplete, calculateOptimalLayout, getElementLanguageDirection, getElementUpdates, syncUpdatedProps } from '@blueprintui/components/internals';
+import { syncHTML5Validation } from '../utils/validate.js';
+import { associateInputToDatalist, formLayouts, defaultFormLayout, getStatusIcon, associateInputAndLabel, defaultControlWidth, getCurrentMessageStatus } from '../utils/utils.js';
+import { controlContext, controlGroupContext, formContext } from '../utils/context.js';
+import styles from './element.css' assert { type: 'css' };
+export var ControlLabelLayout;
+(function (ControlLabelLayout) {
+    ControlLabelLayout["default"] = "default";
+    ControlLabelLayout["ariaLabel"] = "aria-label";
+    ControlLabelLayout["inputGroup"] = "input-group";
+})(ControlLabelLayout || (ControlLabelLayout = {}));
+/**
+ * Generic Control
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-control>
+ *   <label>control</label>
+ *   <input type="text" />
+ * </bp-control>
+ * ```
+ * @element bp-control
+ * @slot
+ * @cssprop --background
+ */
+let BpControl = class BpControl extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** status of form control validation */
+        this.status = 'neutral';
+        /** https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation */
+        this.validate = false;
+        /** forms automatically collapse to layout that prevents overflow */
+        this.responsive = true;
+        /** default full width or the browser default width */
+        this.controlWidth = defaultControlWidth;
+        this.focused = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.supportsPrefixSuffixActions = true;
+        this.labelLayout = ControlLabelLayout.default;
+    }
+    /**
+     * @property
+     * @type { 'vertical' | 'horizontal' | 'compact' }
+     */
+    get layout() {
+        return this.#layout;
+    }
+    set layout(value) {
+        this.#layout = value ? value.replace('-inline', '') : defaultFormLayout; // auto convert any form-layouts from parent groups
+        this.setAttribute('layout', this.#layout);
+        this.requestUpdate('layout');
+        if (!this.#initialLayout) {
+            this.#initialLayout = this.#layout;
+        }
+    }
+    static get properties() {
+        return {
+            layout: { type: String, reflect: true },
+            status: { type: String, reflect: true },
+            validate: { type: Boolean, reflect: true },
+            responsive: { type: Boolean, reflect: true },
+            controlWidth: { type: String, reflect: true, attribute: 'control-width' },
+            focused: { type: Boolean, reflect: true, attribute: '_focused' },
+            disabled: { type: Boolean, reflect: true, attribute: '_disabled' },
+            readonly: { type: Boolean, reflect: true, attribute: '_readonly' },
+            supportsPrefixSuffixActions: { state: true },
+            labelLayout: { state: true }
+        };
+    }
+    #layout = defaultFormLayout;
+    #initialLayout;
+    /** @private */
+    get controlLabel() {
+        return this.renderRoot?.querySelector("bp-internal-control-label[action=primary]") ?? null;
+    }
+    get inputContainer() {
+        return this.renderRoot?.querySelector(".input-container") ?? null;
+    }
+    get prefixAction() {
+        return this.renderRoot?.querySelector(".prefix") ?? null;
+    }
+    get suffixAction() {
+        return this.renderRoot?.querySelector(".suffix") ?? null;
+    }
+    get messageSlot() {
+        return this.renderRoot?.querySelector(".messages") ?? null;
+    }
+    /** @private */
+    get inputControl() {
+        return this.querySelector('input, select, textarea, [bp-control]');
+    }
+    get label() {
+        return this.querySelector('label');
+    }
+    get #datalistControl() {
+        return this.querySelector('datalist');
+    }
+    get #controlActions() {
+        return this.querySelectorAll('[bp-button-icon]');
+    }
+    get messages() {
+        return this.querySelectorAll('bp-control-message');
+    }
+    observers = [];
+    static styles = [baseStyles, styles];
+    get isRTL() {
+        return getElementLanguageDirection(this) === 'rtl';
+    }
+    get #hasStatusIcon() {
+        return this.labelLayout !== ControlLabelLayout.inputGroup && (this.status === 'error' || this.status === 'success');
+    }
+    render() {
+        return html `
+      <div class="private-host ${this.layout} ${this.isRTL ? 'rtl' : ''} ${this.messages?.length ? 'has-messages' : ''}">
+        ${this.#primaryLabelTemplate ? html `<div class="input-label-container">${this.#primaryLabelTemplate}</div>` : ''}
+        <div class="input-message-container">
+          <div class="input-status-icon-container">
+            <div class="input-container">
+              ${this.inputTemplate} ${this.#prefixTemplate}
+              <slot name="input"></slot>
+              ${this.#suffixTemplate}
+            </div>
+            ${this.#hasStatusIcon ? getStatusIcon(this.status) : ''}
+          </div>
+          ${this.messagesTemplate}
+          <slot name="datalist" @slotchange=${() => this.#associateInputToDatalist()}></slot>
+        </div>
+      </div>
+    `;
+    }
+    get inputTemplate() {
+        return html ``;
+    }
+    get prefixTemplate() {
+        return null;
+    }
+    get suffixTemplate() {
+        return null;
+    }
+    get #primaryLabelTemplate() {
+        return this.labelLayout === ControlLabelLayout.default ? html `
+      <bp-internal-control-label .disabled=${this.disabled}>
+        <slot name="label" @slotchange=${() => this.associateInputAndLabel()}></slot>
+      </bp-internal-control-label>` : '';
+    }
+    get messagesTemplate() {
+        return this.messages?.length ? html `
+      <div class="messages">
+        <slot name="message"></slot>
+      </div>
+    ` : '';
+    }
+    get #prefixTemplate() {
+        return html `
+      <div class="prefix">
+        ${this.prefixTemplate}
+        <slot name="prefix"></slot>
+      </div>
+    `;
+    }
+    get #suffixTemplate() {
+        return html `
+      <div class="suffix">
+        <slot name="suffix"></slot>
+        ${this.suffixTemplate}
+      </div>
+    `;
+    }
+    formContext = new ContextConsumer(this, formContext, (value) => syncUpdatedProps(this, value), true);
+    controlGroupContext = new ContextConsumer(this, controlGroupContext, (value) => syncUpdatedProps(this, value), true);
+    controlContext = new ContextProvider(this, controlContext, {});
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('bp-control', '');
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this.inputControl.slot = 'input';
+        this.label ? this.label.slot = 'label' : null;
+        this.#datalistControl ? this.#datalistControl.slot = 'datalist' : null;
+        this.#setupHostAttributes();
+        this.#setupHTML5Validation();
+        this.#setActionOffsetPadding();
+        this.#setupResponsive();
+        this.#setupDescribedByUpdates();
+        this.#setupLabelLayout();
+        this.#assignSlotIfInControlGroup();
+    }
+    updated(props) {
+        super.updated(props);
+        this.controlContext.setValue({ layout: this.layout, responsive: this.responsive, controlWidth: this.controlWidth, disabled: this.disabled });
+        syncProps(this.inputControl, this, { disabled: props.has('disabled') });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.observers.forEach(o => o.disconnect());
+    }
+    associateInputAndLabel() {
+        associateInputAndLabel(this.inputControl, this.label);
+    }
+    #associateInputToDatalist() {
+        associateInputToDatalist(this.inputControl, this.#datalistControl);
+    }
+    #setupDescribedByUpdates() {
+        this.messageSlot?.addEventListener('slotchange', async () => {
+            const messages = Array.from(this.messages);
+            this.inputControl.setAttribute('aria-describedby', messages.length ? messages.map(m => (m.id = createId())).join(' ') : '');
+            getCurrentMessageStatus(messages).then(s => this.status = s);
+        });
+    }
+    #setupHostAttributes() {
+        this.inputControl.addEventListener('focusin', () => (this.focused = true));
+        this.inputControl.addEventListener('focusout', () => (this.focused = false));
+        this.observers.push(getElementUpdates(this.inputControl, 'disabled', (value) => (this.disabled = value === '' ? true : value)), getElementUpdates(this.inputControl, 'aria-disabled', (value) => (this.disabled = value === 'true' ? true : false)), getElementUpdates(this.inputControl, 'readonly', (value) => (this.readonly = value === '' ? true : value)));
+    }
+    #setupHTML5Validation() {
+        if (!this.inputControl?.form?.noValidate && this.validate) {
+            syncHTML5Validation(this, Array.from(this.messages));
+        }
+    }
+    async #setActionOffsetPadding() {
+        const prefix = this.prefixAction?.updateComplete;
+        const suffix = this.suffixAction?.updateComplete;
+        (await prefix) ? prefix : Promise.resolve(true);
+        (await suffix) ? suffix : Promise.resolve(true);
+        await childrenUpdateComplete(this.#controlActions);
+        const hasControlActions = this.#controlActions.length > 0 || this.prefixTemplate || this.suffixTemplate;
+        const isGenericControl = this.tagName.toLowerCase() === 'bp-control';
+        if (this.supportsPrefixSuffixActions && !isGenericControl && hasControlActions) {
+            const start = `${this.prefixAction.getBoundingClientRect().width + 6}px`;
+            const end = `${this.suffixAction.getBoundingClientRect().width + 6}px`;
+            this.inputControl.style.setProperty('padding-left', this.isRTL ? end : start, 'important');
+            this.inputControl.style.setProperty('padding-right', this.isRTL ? start : end, 'important');
+        }
+    }
+    /** @private */
+    get layoutStable() {
+        const messageBelowInput = this.shadowRoot.querySelector('.messages')?.getBoundingClientRect().top > this.inputContainer?.getBoundingClientRect().top;
+        const inputBelowLabel = this.inputContainer?.getBoundingClientRect().top > this.controlLabel?.getBoundingClientRect().top;
+        if (this.layout === 'compact' && messageBelowInput) {
+            return false;
+        }
+        if ((this.layout === 'compact' || this.layout === 'horizontal') && inputBelowLabel) {
+            return false;
+        }
+        return true;
+    }
+    #setupResponsive() {
+        if (this.responsive && this.labelLayout === ControlLabelLayout.default) {
+            this.addEventListener('bpResizeChange', () => {
+                calculateOptimalLayout(this, { layouts: formLayouts, initialLayout: this.#initialLayout }).then(updated => {
+                    if (updated) {
+                        this.dispatchEvent(new CustomEvent('layoutChange', { bubbles: true, detail: this.layout }));
+                    }
+                });
+            });
+        }
+    }
+    #setupLabelLayout() {
+        const hasAriaLabelType = this.inputControl.ariaLabel || this.inputControl.hasAttribute('aria-labelledby');
+        if (hasAriaLabelType && this.labelLayout !== ControlLabelLayout.inputGroup) {
+            this.labelLayout = ControlLabelLayout.ariaLabel;
+        }
+    }
+    #assignSlotIfInControlGroup() {
+        if (this.parentElement?.hasAttribute('bp-control-group')) {
+            this.setAttribute('slot', 'controls');
+        }
+    }
+};
+BpControl = __decorate([
+    interactionResponsive()
+], BpControl);
+export { BpControl };