@kodaris/krubble-components 1.0.59 → 1.0.61

package/dist/code-demo/code-demo.js

@@ -119,7 +119,7 @@ KRCodeDemo.styles = [krBaseCSS, css `
       display: block;
       border: 1px solid #d5dbdb;
       border-radius: 8px;
-      overflow: hidden;
+      overflow: visible;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     }
 

package/dist/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,86 @@
+import { LitElement } from 'lit';
+import '../button/button.js';
+export interface KRDateRangePickerValue {
+    type: 'absolute' | 'relative';
+    startDate?: string;
+    endDate?: string;
+    amount?: number;
+    unit?: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';
+}
+export interface KRDateRangePickerRelativeOption {
+    key: string;
+    amount: number;
+    unit: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';
+    type: 'relative';
+}
+export type KRDateRangePickerMode = 'relative' | 'absolute';
+/**
+ * A date range picker component for selecting date ranges with relative and absolute options.
+ *
+ * @fires change - Fired when the date range selection changes
+ * @csspart trigger - The trigger button element
+ * @csspart dropdown - The dropdown container
+ */
+export declare class KRDateRangePicker extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Selected date range value
+     */
+    value?: KRDateRangePickerValue;
+    /**
+     * Relative date options to display
+     */
+    relativeOptions: KRDateRangePickerRelativeOption[];
+    /**
+     * Whether the picker is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the picker is in an invalid state
+     */
+    invalid: boolean;
+    /**
+     * Placeholder text when no range is selected
+     */
+    placeholder: string;
+    /**
+     * Initial start date for absolute mode (YYYY-MM-DD)
+     */
+    startDate: string;
+    /**
+     * Initial end date for absolute mode (YYYY-MM-DD)
+     */
+    endDate: string;
+    /**
+     * Date range picker mode - 'relative' only or 'absolute' only. If not set, shows both tabs (default)
+     */
+    mode?: KRDateRangePickerMode;
+    private _isOpen;
+    private _activeTab;
+    private _tempStartDate;
+    private _tempEndDate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleClickOutside;
+    private _handleTriggerClick;
+    private _handleTabClick;
+    private _handleRelativeSelect;
+    private _handleApplyAbsolute;
+    private _handleCancel;
+    private _formatRelativeOption;
+    private _getDisplayValue;
+    private _renderTriggerText;
+    private _renderContent;
+    private _renderRelativeContent;
+    private _renderAbsoluteContent;
+    private _renderFooter;
+    private _handleStartDateChange;
+    private _handleEndDateChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kr-date-range-picker': KRDateRangePicker;
+    }
+}
+//# sourceMappingURL=date-range-picker.d.ts.map

package/dist/date-range-picker/date-range-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../../src/date-range-picker/date-range-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,qBAAqB,CAAC;AAE7B,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,UAAU,GAAG,UAAU,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;CACzE;AAED,MAAM,WAAW,+BAA+B;IAC9C,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACvE,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,UAAU,CAAC;AAE5D;;;;;;GAMG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAkLpB;IAEF;;OAEG;IAEH,KAAK,CAAC,EAAE,sBAAsB,CAAC;IAE/B;;OAEG;IAEH,eAAe,EAAE,+BAA+B,EAAE,CAQhD;IAEF;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,WAAW,SAAyB;IAEpC;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAG7B,OAAO,CAAC,OAAO,CAAS;IAGxB,OAAO,CAAC,UAAU,CAAuC;IAGzD,OAAO,CAAC,cAAc,CAAM;IAG5B,OAAO,CAAC,YAAY,CAAM;IAEjB,iBAAiB;IAejB,oBAAoB;IAK7B,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,qBAAqB;IAgB7B,OAAO,CAAC,oBAAoB;IA2B5B,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,gBAAgB;IAmBxB,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,sBAAsB;IAuB9B,OAAO,CAAC,sBAAsB;IAyB9B,OAAO,CAAC,aAAa;IAyCrB,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,oBAAoB;IAInB,MAAM;CAsEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAC;KAC3C;CACF"}

package/dist/date-range-picker/date-range-picker.js

@@ -0,0 +1,565 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import '../button/button.js';
+/**
+ * A date range picker component for selecting date ranges with relative and absolute options.
+ *
+ * @fires change - Fired when the date range selection changes
+ * @csspart trigger - The trigger button element
+ * @csspart dropdown - The dropdown container
+ */
+let KRDateRangePicker = class KRDateRangePicker extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Relative date options to display
+         */
+        this.relativeOptions = [
+            { key: 'last-5-minutes', amount: 5, unit: 'minute', type: 'relative' },
+            { key: 'last-30-minutes', amount: 30, unit: 'minute', type: 'relative' },
+            { key: 'last-1-hour', amount: 1, unit: 'hour', type: 'relative' },
+            { key: 'last-6-hours', amount: 6, unit: 'hour', type: 'relative' },
+            { key: 'last-1-day', amount: 1, unit: 'day', type: 'relative' },
+            { key: 'last-7-days', amount: 7, unit: 'day', type: 'relative' },
+            { key: 'last-30-days', amount: 30, unit: 'day', type: 'relative' },
+        ];
+        /**
+         * Whether the picker is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the picker is in an invalid state
+         */
+        this.invalid = false;
+        /**
+         * Placeholder text when no range is selected
+         */
+        this.placeholder = 'Select a date range';
+        /**
+         * Initial start date for absolute mode (YYYY-MM-DD)
+         */
+        this.startDate = '';
+        /**
+         * Initial end date for absolute mode (YYYY-MM-DD)
+         */
+        this.endDate = '';
+        this._isOpen = false;
+        this._activeTab = 'relative';
+        this._tempStartDate = '';
+        this._tempEndDate = '';
+        this._handleClickOutside = (e) => {
+            if (!e.composedPath().includes(this)) {
+                this._isOpen = false;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this._handleClickOutside);
+        if (this.startDate)
+            this._tempStartDate = this.startDate;
+        if (this.endDate)
+            this._tempEndDate = this.endDate;
+        // Set initial active tab based on mode
+        if (this.mode === 'relative') {
+            this._activeTab = 'relative';
+        }
+        else if (this.mode === 'absolute') {
+            this._activeTab = 'absolute';
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this._handleClickOutside);
+    }
+    _handleTriggerClick() {
+        if (this.disabled)
+            return;
+        this._isOpen = !this._isOpen;
+    }
+    _handleTabClick(tab) {
+        this._activeTab = tab;
+    }
+    _handleRelativeSelect(option) {
+        this.value = {
+            type: 'relative',
+            amount: option.amount,
+            unit: option.unit,
+        };
+        this._isOpen = false;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleApplyAbsolute() {
+        if (!this._tempStartDate) {
+            return;
+        }
+        if (!this._tempEndDate) {
+            return;
+        }
+        if (this._tempStartDate >= this._tempEndDate) {
+            return;
+        }
+        this.value = {
+            type: 'absolute',
+            startDate: this._tempStartDate,
+            endDate: this._tempEndDate,
+        };
+        this.startDate = this._tempStartDate;
+        this.endDate = this._tempEndDate;
+        this._isOpen = false;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleCancel() {
+        this._isOpen = false;
+        this._tempStartDate = this.startDate;
+        this._tempEndDate = this.endDate;
+    }
+    _formatRelativeOption(option) {
+        if (option.amount === 0) {
+            if (option.unit === 'day') {
+                return 'Today';
+            }
+            return `This ${option.unit}`;
+        }
+        const unitLabels = {
+            second: option.amount === 1 ? 'second' : 'seconds',
+            minute: option.amount === 1 ? 'minute' : 'minutes',
+            hour: option.amount === 1 ? 'hour' : 'hours',
+            day: option.amount === 1 ? 'day' : 'days',
+            week: option.amount === 1 ? 'week' : 'weeks',
+            month: option.amount === 1 ? 'month' : 'months',
+            year: option.amount === 1 ? 'year' : 'years',
+        };
+        return `Last ${option.amount} ${unitLabels[option.unit]}`;
+    }
+    _getDisplayValue() {
+        if (!this.value)
+            return '';
+        if (this.value.type === 'relative' && this.value.amount !== undefined && this.value.unit) {
+            return this._formatRelativeOption({
+                key: '',
+                amount: this.value.amount,
+                unit: this.value.unit,
+                type: 'relative',
+            });
+        }
+        if (this.value.type === 'absolute' && this.value.startDate && this.value.endDate) {
+            return `${this.value.startDate} - ${this.value.endDate}`;
+        }
+        return '';
+    }
+    _renderTriggerText() {
+        const displayValue = this._getDisplayValue();
+        if (displayValue) {
+            return html `${displayValue}`;
+        }
+        return html `<span class="trigger-placeholder">${this.placeholder}</span>`;
+    }
+    _renderContent() {
+        if (this.mode === 'relative') {
+            return this._renderRelativeContent();
+        }
+        if (this.mode === 'absolute') {
+            return this._renderAbsoluteContent();
+        }
+        if (this._activeTab === 'relative') {
+            return this._renderRelativeContent();
+        }
+        return this._renderAbsoluteContent();
+    }
+    _renderRelativeContent() {
+        return html `
+      <div class="relative-options">
+        ${this.relativeOptions.map((option) => html `
+            <button
+              class=${classMap({
+            'relative-option': true,
+            'relative-option--selected': this.value?.type === 'relative' &&
+                this.value?.amount === option.amount &&
+                this.value?.unit === option.unit
+        })}
+              type="button"
+              @click=${() => this._handleRelativeSelect(option)}
+            >
+              ${this._formatRelativeOption(option)}
+            </button>
+          `)}
+      </div>
+    `;
+    }
+    _renderAbsoluteContent() {
+        return html `
+      <div class="absolute">
+        <div class="date-row">
+          <span class="date-label">Start</span>
+          <input
+            class="date-input"
+            type="date"
+            .value=${this._tempStartDate}
+            @change=${this._handleStartDateChange}
+          />
+        </div>
+        <div class="date-row">
+          <span class="date-label">End</span>
+          <input
+            class="date-input"
+            type="date"
+            .value=${this._tempEndDate}
+            @change=${this._handleEndDateChange}
+          />
+        </div>
+      </div>
+    `;
+    }
+    _renderFooter() {
+        if (this.mode === 'absolute') {
+            return html `
+        <div class="footer">
+          <kr-button variant="outline" size="small" @click=${this._handleCancel}>
+            Cancel
+          </kr-button>
+          <kr-button
+            variant="primary"
+            size="small"
+            ?disabled=${!this._tempStartDate || !this._tempEndDate}
+            @click=${this._handleApplyAbsolute}
+          >
+            Apply
+          </kr-button>
+        </div>
+      `;
+        }
+        if (this.mode === 'relative') {
+            return nothing;
+        }
+        if (this._activeTab === 'absolute') {
+            return html `
+        <div class="footer">
+          <kr-button variant="outline" size="small" @click=${this._handleCancel}>
+            Cancel
+          </kr-button>
+          <kr-button
+            variant="primary"
+            size="small"
+            ?disabled=${!this._tempStartDate || !this._tempEndDate}
+            @click=${this._handleApplyAbsolute}
+          >
+            Apply
+          </kr-button>
+        </div>
+      `;
+        }
+        return nothing;
+    }
+    _handleStartDateChange(e) {
+        this._tempStartDate = e.target.value;
+    }
+    _handleEndDateChange(e) {
+        this._tempEndDate = e.target.value;
+    }
+    render() {
+        return html `
+      <button
+        part="trigger"
+        class=${classMap({
+            'trigger': true,
+            'trigger--invalid': this.invalid
+        })}
+        type="button"
+        ?disabled=${this.disabled}
+        @click=${this._handleTriggerClick}
+      >
+        <svg class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+          />
+        </svg>
+        <span class="trigger-text">
+          ${this._renderTriggerText()}
+        </span>
+        <svg class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      <div part="dropdown" class=${classMap({
+            'dropdown': true,
+            'dropdown--open': this._isOpen
+        })}>
+        ${!this.mode ? html `
+          <div class="tabs">
+            <button
+              class=${classMap({
+            'tab': true,
+            'tab--active': this._activeTab === 'relative'
+        })}
+              type="button"
+              @click=${() => this._handleTabClick('relative')}
+            >
+              Relative
+            </button>
+            <button
+              class=${classMap({
+            'tab': true,
+            'tab--active': this._activeTab === 'absolute'
+        })}
+              type="button"
+              @click=${() => this._handleTabClick('absolute')}
+            >
+              Absolute
+            </button>
+          </div>
+        ` : nothing}
+
+        <div class="content">
+          ${this._renderContent()}
+        </div>
+
+        ${this._renderFooter()}
+      </div>
+    `;
+    }
+};
+KRDateRangePicker.styles = css `
+    :host {
+      display: inline-block;
+      position: relative;
+      font-family: inherit;
+    }
+
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      min-width: 250px;
+      padding: 0.5rem 0.75rem;
+      font-size: 14px;
+      font-family: inherit;
+      color: #111827;
+      background-color: #fff;
+      border: 1px solid #d1d5db;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: border-color 0.2s, box-shadow 0.2s;
+      text-align: left;
+    }
+
+    .trigger:hover:not(:disabled) {
+      border-color: #9ca3af;
+    }
+
+    .trigger:focus {
+      outline: none;
+      border-color: #2563eb;
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    }
+
+    .trigger:disabled {
+      background-color: #f3f4f6;
+      color: #9ca3af;
+      cursor: not-allowed;
+    }
+
+    .trigger--invalid {
+      border-color: #ef4444;
+    }
+
+    .trigger-text {
+      flex: 1;
+    }
+
+    .trigger-placeholder {
+      color: #9ca3af;
+    }
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      color: #6b7280;
+      flex-shrink: 0;
+    }
+
+    .dropdown {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      z-index: 1000;
+      min-width: 320px;
+      background-color: #fff;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      display: none;
+    }
+
+    .dropdown--open {
+      display: block;
+    }
+
+    .tabs {
+      display: flex;
+      border-bottom: 1px solid #e5e7eb;
+    }
+
+    .tab {
+      flex: 1;
+      padding: 0.75rem;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: inherit;
+      color: #6b7280;
+      background: none;
+      border: none;
+      border-bottom: 2px solid transparent;
+      cursor: pointer;
+      transition: color 0.2s;
+    }
+
+    .tab:hover {
+      color: #111827;
+    }
+
+    .tab--active {
+      color: #2563eb;
+      border-bottom-color: #2563eb;
+    }
+
+    .content {
+      padding: 1rem;
+    }
+
+    .relative-options {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
+    .relative-option {
+      display: flex;
+      align-items: center;
+      padding: 0.5rem 0.75rem;
+      font-size: 14px;
+      font-family: inherit;
+      color: #111827;
+      background: none;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      text-align: left;
+      transition: background-color 0.2s;
+    }
+
+    .relative-option:hover {
+      background-color: #f3f4f6;
+    }
+
+    .relative-option--selected {
+      background-color: #eff6ff;
+      color: #1e40af;
+    }
+
+    .absolute {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .date-row {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    .date-label {
+      width: 60px;
+      font-size: 14px;
+      color: #6b7280;
+    }
+
+    .date-input {
+      flex: 1;
+      padding: 0.5rem 0.75rem;
+      font-size: 14px;
+      font-family: inherit;
+      border: 1px solid #d1d5db;
+      border-radius: 4px;
+    }
+
+    .date-input:focus {
+      outline: none;
+      border-color: #2563eb;
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    }
+
+    .footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.5rem;
+      padding: 0.75rem 1rem;
+      border-top: 1px solid #e5e7eb;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], KRDateRangePicker.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], KRDateRangePicker.prototype, "relativeOptions", void 0);
+__decorate([
+    property({ type: Boolean })
+], KRDateRangePicker.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], KRDateRangePicker.prototype, "invalid", void 0);
+__decorate([
+    property({ type: String })
+], KRDateRangePicker.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], KRDateRangePicker.prototype, "startDate", void 0);
+__decorate([
+    property({ type: String })
+], KRDateRangePicker.prototype, "endDate", void 0);
+__decorate([
+    property({ type: String })
+], KRDateRangePicker.prototype, "mode", void 0);
+__decorate([
+    state()
+], KRDateRangePicker.prototype, "_isOpen", void 0);
+__decorate([
+    state()
+], KRDateRangePicker.prototype, "_activeTab", void 0);
+__decorate([
+    state()
+], KRDateRangePicker.prototype, "_tempStartDate", void 0);
+__decorate([
+    state()
+], KRDateRangePicker.prototype, "_tempEndDate", void 0);
+KRDateRangePicker = __decorate([
+    customElement('kr-date-range-picker')
+], KRDateRangePicker);
+export { KRDateRangePicker };
+//# sourceMappingURL=date-range-picker.js.map

package/dist/date-range-picker/date-range-picker.js.map

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

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export type { KRButtonOption } from './button/button.js';
 export { KRCodeDemo } from './code-demo/code-demo.js';
 export { KRContextMenu } from './context-menu/context-menu.js';
 export { KRDialog, KRDialogRef } from './dialog/dialog.js';
+export { KRDateRangePicker } from './date-range-picker/date-range-picker.js';
 export { KRSnackbar } from './snackbar/snackbar.js';
 export { KRTabGroup } from './tabs/tabs.js';
 export { KRTab } from './tabs/tab.js';
@@ -24,4 +25,5 @@ export type { ContextMenuItem, ContextMenuOptions } from './context-menu/context
 export type { KRDialogConfig } from './dialog/dialog.js';
 export type { KRSnackbarOptions } from './snackbar/snackbar.js';
 export type { KRAutoSuggestOption } from './form/auto-suggest/auto-suggest.js';
+export type { KRDateRangePickerValue, KRDateRangePickerRelativeOption, KRDateRangePickerMode } from './date-range-picker/date-range-picker.js';
 //# sourceMappingURL=index.d.ts.map