@aquera/nile-elements 2.0.1 → 2.0.3

package/dist/src/nile-timestamp-builder/nile-timestamp-builder.css.js

@@ -0,0 +1,203 @@
+/**
+ * Copyright Aquera Inc 2026
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  :host([disabled]) .tsb__collapsed,
+  :host([disabled]) .tsb__expanded {
+    background: var(
+      --nile-colors-neutral-100,
+      var(--ng-colors-bg-disabled-subtle)
+    );
+    border-color: var(
+      --nile-colors-neutral-500,
+      var(--ng-colors-border-disabled-subtle)
+    );
+  }
+
+  :host([disabled]) .tsb__label,
+  :host([disabled]) .tsb__value,
+  :host([disabled]) .tsb__tz {
+    color: var(--nile-colors-text-disabled, var(--ng-colors-text-disabled));
+  }
+
+  .tsb {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+  }
+
+  .tsb__label {
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
+  }
+
+  /* Collapsed view */
+  .tsb__collapsed {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg))
+      var(--nile-spacing-xl, var(--ng-spacing-xl));
+    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid
+      var(--nile-colors-gray-300, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-md, var(--ng-radius-md));
+    background: var(--nile-colors-white, var(--ng-colors-bg-primary));
+    min-height: var(--nile-height-28px, var(--ng-height-28px));
+  }
+
+  .tsb__collapsed .tsb__actions nile-button::part(base) {
+    height: var(--nile-height-28px, var(--ng-height-28px));
+    padding-block: var(--nile-spacing-none, var(--ng-spacing-none));
+  }
+
+  .tsb__display {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    flex: 1 1 var(--nile-width-208px, var(--ng-width-56));
+    min-width: 0;
+  }
+
+  .tsb__display--editable {
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+  }
+
+  .tsb__display:focus-visible {
+    outline: var(--nile-border-width-2, var(--ng-border-width-2)) solid
+      var(--nile-colors-border-field-focused, var(--ng-colors-border-brand));
+    outline-offset: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+  }
+
+  .tsb__value {
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-variant-numeric: tabular-nums;
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-medium));
+    letter-spacing: 0.01em;
+    overflow-wrap: normal;
+  }
+
+  .tsb__value--empty {
+    color: var(--nile-colors-gray-400, var(--ng-colors-text-placeholder));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+  }
+
+  .tsb__tz {
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-gray-500, var(--ng-colors-text-tertiary-600));
+    white-space: nowrap;
+  }
+
+  .tsb__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    margin-left: auto;
+    flex: 0 0 auto;
+  }
+
+  /* Expanded view */
+  .tsb__expanded {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid
+      var(--nile-colors-gray-300, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-md, var(--ng-radius-md));
+    background: var(--nile-colors-white, var(--ng-colors-bg-primary));
+  }
+
+  .tsb__fields {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(var(--nile-width-99px, var(--ng-width-24)), 1fr)
+    );
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+  }
+
+  .tsb__field {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    width: 100%;
+    max-width: var(--nile-width-110px, var(--ng-width-108));
+  }
+
+  .tsb__field nile-input::part(input) {
+    padding-inline: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    text-align: center;
+  }
+
+  .tsb__field nile-input::part(form-control-label) {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tsb__timezone {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @media (max-width: 480px) {
+    .tsb__collapsed,
+    .tsb__expanded {
+      padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    }
+
+
+    .tsb__actions {
+      width: 100%;
+      margin-left: 0;
+    }
+
+
+    [part='editor-actions'] nile-button {
+      flex: 1 1 var(--nile-width-130px, var(--ng-width-32));
+    }
+
+    [part='editor-actions'] nile-button::part(base) {
+      width: 100%;
+    }
+  }
+
+  /* Visually-hidden hidden input used for form participation / validity. */
+  .value-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`;
+//# sourceMappingURL=nile-timestamp-builder.css.js.map

package/dist/src/nile-timestamp-builder/nile-timestamp-builder.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-timestamp-builder.css.js","sourceRoot":"","sources":["../../../src/nile-timestamp-builder/nile-timestamp-builder.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkMxB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2026\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  :host([disabled]) .tsb__collapsed,\n  :host([disabled]) .tsb__expanded {\n    background: var(\n      --nile-colors-neutral-100,\n      var(--ng-colors-bg-disabled-subtle)\n    );\n    border-color: var(\n      --nile-colors-neutral-500,\n      var(--ng-colors-border-disabled-subtle)\n    );\n  }\n\n  :host([disabled]) .tsb__label,\n  :host([disabled]) .tsb__value,\n  :host([disabled]) .tsb__tz {\n    color: var(--nile-colors-text-disabled, var(--ng-colors-text-disabled));\n  }\n\n  .tsb {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .tsb__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n  }\n\n  /* Collapsed view */\n  .tsb__collapsed {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg))\n      var(--nile-spacing-xl, var(--ng-spacing-xl));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-gray-300, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-md, var(--ng-radius-md));\n    background: var(--nile-colors-white, var(--ng-colors-bg-primary));\n    min-height: var(--nile-height-28px, var(--ng-height-28px));\n  }\n\n  .tsb__collapsed .tsb__actions nile-button::part(base) {\n    height: var(--nile-height-28px, var(--ng-height-28px));\n    padding-block: var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  .tsb__display {\n    display: flex;\n    align-items: baseline;\n    flex-wrap: wrap;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    flex: 1 1 var(--nile-width-208px, var(--ng-width-56));\n    min-width: 0;\n  }\n\n  .tsb__display--editable {\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    touch-action: manipulation;\n  }\n\n  .tsb__display:focus-visible {\n    outline: var(--nile-border-width-2, var(--ng-border-width-2)) solid\n      var(--nile-colors-border-field-focused, var(--ng-colors-border-brand));\n    outline-offset: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  }\n\n  .tsb__value {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-variant-numeric: tabular-nums;\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-medium));\n    letter-spacing: 0.01em;\n    overflow-wrap: normal;\n  }\n\n  .tsb__value--empty {\n    color: var(--nile-colors-gray-400, var(--ng-colors-text-placeholder));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n  }\n\n  .tsb__tz {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-gray-500, var(--ng-colors-text-tertiary-600));\n    white-space: nowrap;\n  }\n\n  .tsb__actions {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    margin-left: auto;\n    flex: 0 0 auto;\n  }\n\n  /* Expanded view */\n  .tsb__expanded {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-gray-300, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-md, var(--ng-radius-md));\n    background: var(--nile-colors-white, var(--ng-colors-bg-primary));\n  }\n\n  .tsb__fields {\n    display: grid;\n    grid-template-columns: repeat(\n      auto-fit,\n      minmax(var(--nile-width-99px, var(--ng-width-24)), 1fr)\n    );\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .tsb__field {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    width: 100%;\n    max-width: var(--nile-width-110px, var(--ng-width-108));\n  }\n\n  .tsb__field nile-input::part(input) {\n    padding-inline: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    text-align: center;\n  }\n\n  .tsb__field nile-input::part(form-control-label) {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .tsb__timezone {\n    display: flex;\n    flex-direction: column;\n  }\n\n  @media (max-width: 480px) {\n    .tsb__collapsed,\n    .tsb__expanded {\n      padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    }\n\n\n    .tsb__actions {\n      width: 100%;\n      margin-left: 0;\n    }\n\n\n    [part='editor-actions'] nile-button {\n      flex: 1 1 var(--nile-width-130px, var(--ng-width-32));\n    }\n\n    [part='editor-actions'] nile-button::part(base) {\n      width: 100%;\n    }\n  }\n\n  /* Visually-hidden hidden input used for form participation / validity. */\n  .value-input {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n"]}

package/dist/src/nile-timestamp-builder/nile-timestamp-builder.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Copyright Aquera Inc 2026
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup, PropertyValues } from 'lit';
+import type { NileFormControl } from '../internal/nile-element';
+import { WallClock } from './nile-timestamp-builder-utils';
+/**
+ * @event nile-init - Emitted when the component is added to the DOM.
+ * @event nile-destroy - Emitted when the component is removed from the DOM.
+ * @event nile-change - Emitted when the value is committed.
+ * @event nile-input - Emitted as fields change, before the value is committed.
+ * @event nile-expand - Emitted when the editor opens.
+ * @event nile-collapse - Emitted when the editor closes.
+ * @event nile-copy - Emitted after the value is written to the clipboard.
+ * @event nile-copy-error - Emitted when the clipboard write is refused.
+ */
+export declare class NileTimestampBuilder extends NileElement implements NileFormControl {
+    static get styles(): CSSResultGroup;
+    private formControlController;
+    private internalValueUpdate;
+    private internalTimezoneUpdate;
+    valueInput: HTMLInputElement;
+    private _value;
+    get value(): Date | null;
+    set value(input: Date | number | string | null);
+    defaultValue: Date | null;
+    timezone: string;
+    name: string;
+    disabled: boolean;
+    required: boolean;
+    readonly: boolean;
+    copyable: boolean;
+    form: string;
+    open: boolean;
+    label: string;
+    minYear: number;
+    maxYear: number;
+    wallClock: WallClock;
+    timezoneList: string[];
+    hasValue: boolean;
+    justCopied: boolean;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private isTimezoneReassigned;
+    private syncValueToTimezone;
+    private valueString;
+    private syncHiddenInput;
+    private changeDetail;
+    private liveDetail;
+    private commit;
+    private onFieldChange;
+    private onTimezoneChange;
+    private handleSetNow;
+    /** Copies the canonical zoned value */
+    private handleCopy;
+    private handleStageNow;
+    private handleUseLocalTz;
+    private handleUseUtc;
+    /** Touch input has no reliable `dblclick`, so double-taps are timed by hand. */
+    private static readonly DOUBLE_TAP_MS;
+    private static readonly COPIED_FEEDBACK_MS;
+    private lastTapAt;
+    private copiedTimer;
+    private handleDisplayDoubleClick;
+    private handleDisplayPointerUp;
+    /** Keyboard equivalent of the double-click/double-tap edit affordance. */
+    private handleDisplayKeyDown;
+    private handleEdit;
+    private handleDone;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    getForm(): HTMLFormElement | null;
+    private renderField;
+    private renderCollapsed;
+    private renderEditActions;
+    private renderCopyAction;
+    private renderExpanded;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default NileTimestampBuilder;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-timestamp-builder': NileTimestampBuilder;
+    }
+}