@nyaruka/temba-components 0.118.1 → 0.118.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/temba-components.js +2 -2
- package/dist/temba-components.js.map +1 -1
- package/out-tsc/src/date/TembaDate.js +2 -1
- package/out-tsc/src/date/TembaDate.js.map +1 -1
- package/out-tsc/src/options/Options.js +3 -1
- package/out-tsc/src/options/Options.js.map +1 -1
- package/out-tsc/test/temba-date.test.js +15 -7
- package/out-tsc/test/temba-date.test.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/date/datetime.png +0 -0
- package/screenshots/truth/date/timedate.png +0 -0
- package/src/date/TembaDate.ts +3 -1
- package/src/options/Options.ts +3 -1
- package/test/temba-date.test.ts +18 -7
|
@@ -44,7 +44,8 @@ export class TembaDate extends RapidElement {
|
|
|
44
44
|
let formatted = '';
|
|
45
45
|
if (this.display === Display.timedate) {
|
|
46
46
|
const hours = Math.abs(this.datetime.diffNow().milliseconds / 1000 / 60 / 60);
|
|
47
|
-
|
|
47
|
+
const day = this.datetime.get('day');
|
|
48
|
+
if (hours < 24 && day == DateTime.now().get('day')) {
|
|
48
49
|
formatted = this.datetime.toLocaleString(Display.time);
|
|
49
50
|
}
|
|
50
51
|
else if (hours < 24 * 365) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TembaDate.js","sourceRoot":"","sources":["../../../src/date/TembaDate.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE,QAAQ,CAAC,UAAU;IACzB,QAAQ,EAAE,QAAQ,CAAC,cAAc;IACjC,IAAI,EAAE,QAAQ,CAAC,WAAW;IAC1B,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,WAAW;IACtB,GAAG,EAAE,OAAO;CACb,CAAC;AAEF,MAAM,OAAO,SAAU,SAAQ,YAAY;IAA3C;;QAaE,YAAO,GAAG,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"TembaDate.js","sourceRoot":"","sources":["../../../src/date/TembaDate.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { Store } from '../store/Store';\nimport { DateTime } from 'luxon';\n\nexport const Display = {\n date: DateTime.DATE_SHORT,\n datetime: DateTime.DATETIME_SHORT,\n time: DateTime.TIME_SIMPLE,\n timedate: 'timedate',\n duration: 'duration',\n relative: 'relative',\n countdown: 'countdown',\n day: 'LLL d'\n};\n\nexport class TembaDate extends RapidElement {\n static get styles() {\n return css`\n .date {\n display: inline;\n }\n `;\n }\n\n @property({ type: String })\n value: string;\n\n @property({ type: String })\n display = 'date';\n\n @property({ type: Object, attribute: false })\n datetime: DateTime;\n\n store: Store;\n\n protected firstUpdated(\n changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(changedProperties);\n this.store = document.querySelector('temba-store');\n }\n\n protected updated(\n changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.updated(changedProperties);\n if (changedProperties.has('value')) {\n this.datetime = DateTime.fromISO(this.value);\n }\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n }\n\n public render(): TemplateResult {\n if (this.datetime && this.store) {\n this.datetime.setLocale(this.store.getLocale());\n\n let formatted = '';\n if (this.display === Display.timedate) {\n const hours = Math.abs(\n this.datetime.diffNow().milliseconds / 1000 / 60 / 60\n );\n\n const day = this.datetime.get('day');\n if (hours < 24 && day == DateTime.now().get('day')) {\n formatted = this.datetime.toLocaleString(Display.time);\n } else if (hours < 24 * 365) {\n formatted = this.datetime.toFormat(Display.day);\n } else {\n formatted = this.datetime.toLocaleString(Display.date);\n }\n } else if (this.display === Display.relative) {\n const minutes = Math.abs(\n this.datetime.diffNow().milliseconds / 1000 / 60\n );\n if (minutes < 1) {\n return html`<span\n class=\"date\"\n title=\"${this.datetime.toLocaleString(Display.datetime)}\"\n >just now</span\n >`;\n }\n\n formatted = this.store.getShortDuration(this.datetime);\n } else if (this.display === Display.duration) {\n const minutes = Math.abs(\n this.datetime.diffNow().milliseconds / 1000 / 60\n );\n if (minutes < 1) {\n return html`<span\n class=\"date\"\n title=\"${this.datetime.toLocaleString(Display.datetime)}\"\n >just now</span\n >`;\n }\n formatted = this.store.getShortDuration(this.datetime);\n } else if (this.display === Display.countdown) {\n formatted = this.store.getCountdown(this.datetime);\n } else if (this.display === Display.day) {\n formatted = this.datetime.toLocaleString(Display.day);\n } else {\n formatted = this.datetime.toLocaleString(Display[this.display]);\n }\n\n return html`<span\n class=\"date\"\n title=\"${this.datetime.toLocaleString(Display.datetime)}\"\n >${formatted}</span\n >`;\n }\n }\n}\n"]}
|
|
@@ -435,7 +435,9 @@ export class Options extends RapidElement {
|
|
|
435
435
|
const anchorBounds = this.anchorTo.getBoundingClientRect();
|
|
436
436
|
this.top = anchorBounds.bottom;
|
|
437
437
|
if (anchorBounds.bottom + optionsBounds.height > window.innerHeight) {
|
|
438
|
-
this.top =
|
|
438
|
+
this.top =
|
|
439
|
+
anchorBounds.bottom -
|
|
440
|
+
(optionsBounds.height + anchorBounds.height + 10);
|
|
439
441
|
}
|
|
440
442
|
this.left = anchorBounds.left;
|
|
441
443
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Options.js","sourceRoot":"","sources":["../../../src/options/Options.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement, EventHandler } from '../RapidElement';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { getClasses, getScrollParent, throttle } from '../utils';\n\nexport class Options extends RapidElement {\n static get styles() {\n return css`\n :host {\n --transition-speed: 0;\n }\n\n .options-container {\n background: var(--color-options-bg);\n user-select: none;\n border-radius: var(--curvature-widget);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n transition: transform var(--transition-speed)\n cubic-bezier(0.71, 0.18, 0.61, 1.33),\n opacity var(--transition-speed) cubic-bezier(0.71, 0.18, 0.61, 1.33);\n opacity: 0;\n z-index: 1000;\n pointer-events: none;\n }\n\n .shadow {\n box-shadow: var(--options-shadow);\n }\n\n .anchored {\n position: fixed;\n }\n\n :host([block]) .options-container {\n flex-grow: 1;\n height: 100%;\n border: none;\n }\n\n :host([block]) .options-scroll {\n height: 100%;\n visibility: visible;\n overflow-y: auto;\n flex-grow: 1;\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n }\n\n :host([block]) {\n border-radius: var(--curvature);\n display: block;\n height: 100%;\n }\n\n :host([block]) .shadow {\n box-shadow: var(--options-block-shadow);\n }\n\n .bordered {\n border: 1px solid var(--color-widget-border) !important;\n }\n\n :host([block]) .options {\n margin-bottom: 1.5em;\n }\n\n .options-scroll {\n display: flex;\n flex-direction: column;\n }\n\n :host([collapsed]) temba-icon {\n flex-grow: 1;\n margin-right: 0px !important;\n padding-top: 0.25em;\n padding-bottom: 0.25em;\n }\n\n :host([collapsed]) .name {\n display: none;\n }\n\n :host([collapsed]) .count {\n display: none;\n }\n\n .options {\n border-radius: var(--curvature-widget);\n overflow-y: auto;\n max-height: 200px;\n border: none;\n }\n\n .show {\n border: 1px solid var(--color-widget-border);\n opacity: 1;\n z-index: 1;\n pointer-events: auto;\n margin-top: var(--options-margin-top);\n }\n\n .option {\n font-size: var(--temba-options-font-size);\n padding: 5px 10px;\n border-radius: 4px;\n margin: 0.3em;\n cursor: pointer;\n color: var(--color-text-dark);\n scroll-margin: 5px 0px;\n text-align: left;\n }\n\n .option * {\n user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-word;\n -ms-hyphens: auto;\n -moz-hyphens: auto;\n -webkit-hyphens: auto;\n hyphens: auto;\n }\n\n .option .detail {\n font-size: 85%;\n color: rgba(0, 0, 0, 0.4);\n }\n\n code {\n background: rgba(0, 0, 0, 0.05);\n padding: 1px 5px;\n border-radius: var(--curvature-widget);\n }\n\n :host([block]) {\n position: relative;\n }\n\n :host([block]) .options {\n overflow-y: initial;\n }\n\n temba-loading {\n align-self: center;\n margin-top: 0.025em;\n }\n\n .loader-bar {\n pointer-events: none;\n align-items: center;\n background: #eee;\n max-height: 0;\n transition: max-height var(--transition-speed) ease-in-out;\n border-bottom-left-radius: var(--curvature-widget);\n border-bottom-right-radius: var(--curvature-widget);\n display: flex;\n overflow: hidden;\n }\n\n .loading .loader-bar {\n max-height: 1.1em;\n }\n\n .option:hover {\n background: var(--option-hover-bg);\n color: var(--option-hover-text);\n }\n\n .option.focused {\n background: var(--color-selection);\n color: var(--color-text-dark);\n }\n `;\n }\n\n @property({ type: Number })\n top: number;\n\n @property({ type: Number })\n left: number;\n\n @property({ type: Number })\n width: number;\n\n @property({ type: Number, attribute: 'static-width' })\n staticWidth: number;\n\n @property({ type: Boolean, attribute: 'anchor-right' })\n anchorRight: boolean;\n\n @property({ type: Number })\n marginHorizontal = 0;\n\n @property({ type: Number })\n marginVertical = 7;\n\n @property({ type: Object })\n anchorTo: HTMLElement;\n\n @property({ type: Boolean })\n visible: boolean;\n\n @property({ type: Boolean })\n block: boolean;\n\n // if we allow the focus to follow the cursor\n @property({ type: Boolean })\n cursorHover: boolean;\n\n // fire selection events when cursor changes\n @property({ type: Boolean })\n cursorSelection: boolean;\n\n @property({ type: Number })\n scrollPct = 75;\n\n @property({ type: Number })\n cursorIndex = -1;\n\n @property({ type: Boolean })\n internalFocusDisabled = false;\n\n @property({ type: Array })\n options: any[];\n\n @property({ type: Array })\n tempOptions: any[];\n\n @property({ type: Boolean })\n poppedTop: boolean;\n\n @property({ type: Boolean })\n spaceSelect: boolean;\n\n @property({ type: String })\n nameKey = 'name';\n\n @property({ type: Boolean })\n loading = false;\n\n @property({ type: Boolean })\n collapsed: boolean;\n\n @property({ type: Boolean })\n hideShadow = false;\n\n @property({ attribute: false })\n getName: { (option: any): string } = function (option: any) {\n return option[this.nameKey || 'name'];\n };\n\n @property({ attribute: false })\n renderInputOption: { (): TemplateResult } = function () {\n return null;\n };\n\n @property({ attribute: false })\n renderOption: { (option: any, selected: boolean): TemplateResult };\n\n @property({ attribute: false })\n renderOptionName: { (option: any, selected: boolean): TemplateResult };\n\n @property({ attribute: false })\n renderOptionDetail: { (option: any, selected: boolean): TemplateResult };\n\n @property({ type: Number })\n scrollHeight = 0;\n\n @property({ type: Boolean })\n triggerScroll = false;\n\n scrollParent: HTMLElement = null;\n\n resolvedRenderOption: { (option: any, selected: boolean): TemplateResult };\n\n public firstUpdated(changed: Map<string, any>) {\n super.firstUpdated(changed);\n if (!this.block) {\n this.scrollParent = getScrollParent(this);\n this.calculatePosition = this.calculatePosition.bind(this);\n if (this.scrollParent) {\n this.scrollParent.addEventListener('scroll', this.calculatePosition);\n }\n }\n\n this.resolvedRenderOption = (\n this.renderOption || this.renderOptionDefault\n ).bind(this);\n }\n\n public disconnectedCallback() {\n if (!this.block) {\n if (this.scrollParent) {\n this.scrollParent.removeEventListener('scroll', this.calculatePosition);\n }\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n private isFocused(): boolean {\n // TODO: this really doesn't seem right\n const focused =\n this.closestElement(document.activeElement.tagName) ===\n document.activeElement;\n\n return focused;\n }\n\n private resizeObserver: ResizeObserver;\n\n public updated(changed: Map<string, any>) {\n super.updated(changed);\n\n if (changed.has('anchorTo') && this.anchorTo) {\n const optionsContainer =\n this.shadowRoot.querySelector('.options-container');\n\n if (!this.resizeObserver) {\n this.resizeObserver = new ResizeObserver((entries) => {\n window.requestAnimationFrame((): void | undefined => {\n if (!Array.isArray(entries) || !entries.length) {\n return;\n }\n this.calculatePosition();\n this.adjustWidth();\n });\n });\n this.resizeObserver.observe(optionsContainer);\n }\n }\n\n // if our cursor changed, lets make sure our scrollbox is showing it\n if (!this.internalFocusDisabled && changed.has('cursorIndex')) {\n this.fireCustomEvent(CustomEventType.CursorChanged, {\n index: this.cursorIndex\n });\n }\n\n if (changed.has('visible') && changed.has('options')) {\n if (!this.visible && this.options.length == 0) {\n this.tempOptions = changed.get('options');\n window.setTimeout(() => {\n this.tempOptions = [];\n }, 200);\n }\n }\n\n if (changed.has('options')) {\n this.adjustWidth();\n this.calculatePosition();\n\n // allow scrolls to trigger again\n this.triggerScroll = true;\n\n const prevOptions = changed.get('options');\n const previousCount = prevOptions ? prevOptions.length : 0;\n const newCount = this.options ? this.options.length : 0;\n\n if (\n this.cursorIndex === -1 ||\n newCount < previousCount ||\n (previousCount === 0 && newCount > 0 && !changed.has('cursorIndex'))\n ) {\n if (!this.internalFocusDisabled) {\n if (!this.block) {\n this.cursorIndex = 0;\n } else {\n if (this.cursorIndex >= newCount) {\n this.cursorIndex = newCount - 1;\n }\n }\n\n if (this.cursorSelection) {\n this.handleSelection(false);\n }\n }\n }\n\n // if on initial load we don't have enough options to load, trigger a scroll\n // threshold event in case the page size is smaller than our control height\n const scrollBox = this.shadowRoot.querySelector('.options');\n if (scrollBox) {\n if (scrollBox.scrollHeight == scrollBox.clientHeight) {\n this.fireCustomEvent(CustomEventType.ScrollThreshold);\n }\n }\n }\n }\n\n private renderOptionDefault(option: any, selected: boolean): TemplateResult {\n const renderOptionName = (\n this.renderOptionName || this.renderOptionNameDefault\n ).bind(this);\n const renderOptionDetail = (\n this.renderOptionDetail || this.renderOptionDetailDefault\n ).bind(this);\n\n if (selected) {\n return html`\n <div class=\"name\">${renderOptionName(option, selected)}</div>\n <div class=\"detail\">${renderOptionDetail(option, selected)}</div>\n `;\n } else {\n return html`\n <div class=\"name\">${renderOptionName(option, selected)}</div>\n `;\n }\n }\n\n private renderOptionNameDefault(option: any): TemplateResult {\n return html`<div style=\"display:flex; align-items:flex-start\">\n ${option.icon\n ? html`<temba-icon\n name=\"${option.icon}\"\n style=\"margin-right:0.5em; fill: var(--color-text-dark);\"\n ></temba-icon>`\n : null}\n <div style=\"flex-grow:1\">${option.prefix}${this.getName(option)}</div>\n </div>`;\n }\n\n private renderOptionDetailDefault(option: any): TemplateResult {\n return html` ${option.detail} `;\n }\n\n public getSelection() {\n return this.options[this.cursorIndex];\n }\n\n private handleSelection(tabbed = false, index = -1) {\n if (!this.internalFocusDisabled) {\n if (index === -1) {\n index = this.cursorIndex;\n }\n }\n\n if (index === -1) {\n return;\n }\n\n const selected = this.options[index];\n this.fireCustomEvent(CustomEventType.Selection, {\n selected,\n tabbed,\n index\n });\n }\n\n private moveCursor(direction: number): void {\n if (!this.internalFocusDisabled) {\n const newIndex = Math.max(\n Math.min(this.cursorIndex + direction, this.options.length - 1),\n 0\n );\n this.setCursor(newIndex);\n }\n }\n\n private setCursor: (index: number) => void = throttle(function (\n index: number\n ) {\n if (!this.internalFocusDisabled) {\n if (index !== this.cursorIndex) {\n this.cursorIndex = index;\n }\n }\n },\n 50);\n\n public scrollToTop() {\n const scrollBox = this.shadowRoot.querySelector('.options-scroll');\n scrollBox.scrollTop = 0;\n }\n\n private ensureOptionVisible() {\n const focusedOption = this.shadowRoot.querySelector(\n `div[data-option-index=\"${this.cursorIndex}\"]`\n ) as HTMLDivElement;\n if (focusedOption) {\n focusedOption.scrollIntoView({\n block: 'nearest',\n inline: 'start'\n });\n }\n }\n private handleKeyDown(evt: KeyboardEvent) {\n if (this.internalFocusDisabled || (this.block && !this.isFocused())) {\n return;\n }\n\n if (this.offsetParent === null) {\n return;\n }\n\n if (this.options && this.options.length > 0) {\n if ((evt.ctrlKey && evt.key === 'n') || evt.key === 'ArrowDown') {\n this.moveCursor(1);\n evt.preventDefault();\n evt.stopPropagation();\n if (this.cursorSelection) {\n this.handleSelection(false);\n }\n this.ensureOptionVisible();\n } else if ((evt.ctrlKey && evt.key === 'p') || evt.key === 'ArrowUp') {\n this.moveCursor(-1);\n evt.preventDefault();\n if (this.cursorSelection) {\n this.handleSelection(false);\n }\n this.ensureOptionVisible();\n } else if (\n evt.key === 'Enter' ||\n evt.key === 'Tab' ||\n (this.spaceSelect && evt.key === ' ')\n ) {\n evt.preventDefault();\n evt.stopPropagation();\n this.handleSelection(evt.key === 'Tab');\n } else if (evt.key === 'Escape') {\n this.fireCustomEvent(CustomEventType.Canceled);\n }\n }\n }\n\n private handleInnerScroll(evt: Event) {\n const scrollbox = evt.target as HTMLDivElement;\n\n // scroll height has changed, enable scroll trigger\n if (scrollbox.scrollHeight > this.scrollHeight) {\n this.scrollHeight = scrollbox.scrollHeight;\n this.triggerScroll = true;\n }\n\n if (this.triggerScroll) {\n const scrollPct =\n scrollbox.scrollTop / (scrollbox.scrollHeight - scrollbox.clientHeight);\n if (scrollPct * 100 > this.scrollPct) {\n this.fireCustomEvent(CustomEventType.ScrollThreshold);\n this.triggerScroll = false;\n }\n }\n }\n\n private adjustWidth() {\n if (this.anchorTo) {\n const anchorBounds = this.anchorTo.getBoundingClientRect();\n this.width =\n this.staticWidth > 0\n ? this.staticWidth\n : anchorBounds.width - 2 - this.marginHorizontal * 2;\n }\n }\n\n private calculatePosition() {\n if (this.visible && !this.block) {\n const optionsBounds = this.shadowRoot\n .querySelector('.options-container')\n .getBoundingClientRect();\n\n if (this.anchorTo) {\n const anchorBounds = this.anchorTo.getBoundingClientRect();\n this.top = anchorBounds.bottom;\n if (anchorBounds.bottom + optionsBounds.height > window.innerHeight) {\n this.top = -(optionsBounds.height + anchorBounds.height + 20);\n }\n this.left = anchorBounds.left;\n }\n }\n }\n\n public getEventHandlers(): EventHandler[] {\n return [\n {\n event: 'keydown',\n method: this.handleKeyDown,\n isDocument: true\n },\n {\n event: 'scroll',\n method: this.calculatePosition,\n isDocument: true\n }\n ];\n }\n\n private handleMouseMove(evt: MouseEvent) {\n if (!this.block || this.cursorHover) {\n if (Math.abs(evt.movementX) + Math.abs(evt.movementY) > 0) {\n const index = (evt.currentTarget as HTMLElement).getAttribute(\n 'data-option-index'\n );\n this.setCursor(parseInt(index));\n }\n }\n }\n\n private handleOptionClick(evt: MouseEvent) {\n const index = (evt.currentTarget as HTMLElement).getAttribute(\n 'data-option-index'\n );\n\n if (index) {\n const newIndex = parseInt(index);\n this.setCursor(newIndex);\n this.handleSelection(false, newIndex);\n }\n }\n\n public render(): TemplateResult {\n if (!this.resolvedRenderOption) {\n return null;\n }\n\n let vertical = this.block ? 0 : this.marginVertical;\n if (this.poppedTop) {\n vertical *= -1;\n }\n\n const containerStyle = this.visible\n ? {\n 'margin-left': `${this.marginHorizontal}px`,\n 'margin-top': `${vertical}px`\n }\n : {};\n\n if (this.top) {\n containerStyle['top'] = `${this.top}px`;\n }\n\n if (this.left) {\n containerStyle['left'] = `${this.left}px`;\n }\n\n const optionsStyle = {};\n if (this.width) {\n optionsStyle['width'] = `${this.width}px`;\n }\n\n const classes = getClasses({\n 'options-container': true,\n show: this.visible,\n top: this.poppedTop,\n anchored: !this.block && !!this.anchorTo,\n loading: this.loading,\n shadow: !this.hideShadow,\n bordered: this.hideShadow\n });\n\n const classesInner = getClasses({\n options: true\n });\n\n let options = this.options || [];\n if (\n options.length == 0 &&\n this.tempOptions &&\n this.tempOptions.length > 0\n ) {\n options = this.tempOptions;\n }\n\n return html`\n <div class=${classes} style=${styleMap(containerStyle)}>\n <div class=\"options-scroll\" @scroll=${this.handleInnerScroll}>\n <div class=\"${classesInner}\" style=${styleMap(optionsStyle)}>\n ${options.map((option, index) => {\n return html`<div\n data-option-index=\"${index}\"\n @mousemove=${this.handleMouseMove}\n @mousedown=${this.handleOptionClick}\n class=\"option ${index === this.cursorIndex &&\n !this.internalFocusDisabled\n ? 'focused'\n : ''}\"\n >\n ${this.resolvedRenderOption(option, index === this.cursorIndex)}\n </div>`;\n })}\n ${this.block ? html`<div style=\"height:0.1em\"></div>` : null}\n </div>\n <slot></slot>\n </div>\n\n <div class=\"loader-bar\">\n <temba-loading></temba-loading>\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Options.js","sourceRoot":"","sources":["../../../src/options/Options.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement, EventHandler } from '../RapidElement';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { getClasses, getScrollParent, throttle } from '../utils';\n\nexport class Options extends RapidElement {\n static get styles() {\n return css`\n :host {\n --transition-speed: 0;\n }\n\n .options-container {\n background: var(--color-options-bg);\n user-select: none;\n border-radius: var(--curvature-widget);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n transition: transform var(--transition-speed)\n cubic-bezier(0.71, 0.18, 0.61, 1.33),\n opacity var(--transition-speed) cubic-bezier(0.71, 0.18, 0.61, 1.33);\n opacity: 0;\n z-index: 1000;\n pointer-events: none;\n }\n\n .shadow {\n box-shadow: var(--options-shadow);\n }\n\n .anchored {\n position: fixed;\n }\n\n :host([block]) .options-container {\n flex-grow: 1;\n height: 100%;\n border: none;\n }\n\n :host([block]) .options-scroll {\n height: 100%;\n visibility: visible;\n overflow-y: auto;\n flex-grow: 1;\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n }\n\n :host([block]) {\n border-radius: var(--curvature);\n display: block;\n height: 100%;\n }\n\n :host([block]) .shadow {\n box-shadow: var(--options-block-shadow);\n }\n\n .bordered {\n border: 1px solid var(--color-widget-border) !important;\n }\n\n :host([block]) .options {\n margin-bottom: 1.5em;\n }\n\n .options-scroll {\n display: flex;\n flex-direction: column;\n }\n\n :host([collapsed]) temba-icon {\n flex-grow: 1;\n margin-right: 0px !important;\n padding-top: 0.25em;\n padding-bottom: 0.25em;\n }\n\n :host([collapsed]) .name {\n display: none;\n }\n\n :host([collapsed]) .count {\n display: none;\n }\n\n .options {\n border-radius: var(--curvature-widget);\n overflow-y: auto;\n max-height: 200px;\n border: none;\n }\n\n .show {\n border: 1px solid var(--color-widget-border);\n opacity: 1;\n z-index: 1;\n pointer-events: auto;\n margin-top: var(--options-margin-top);\n }\n\n .option {\n font-size: var(--temba-options-font-size);\n padding: 5px 10px;\n border-radius: 4px;\n margin: 0.3em;\n cursor: pointer;\n color: var(--color-text-dark);\n scroll-margin: 5px 0px;\n text-align: left;\n }\n\n .option * {\n user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-word;\n -ms-hyphens: auto;\n -moz-hyphens: auto;\n -webkit-hyphens: auto;\n hyphens: auto;\n }\n\n .option .detail {\n font-size: 85%;\n color: rgba(0, 0, 0, 0.4);\n }\n\n code {\n background: rgba(0, 0, 0, 0.05);\n padding: 1px 5px;\n border-radius: var(--curvature-widget);\n }\n\n :host([block]) {\n position: relative;\n }\n\n :host([block]) .options {\n overflow-y: initial;\n }\n\n temba-loading {\n align-self: center;\n margin-top: 0.025em;\n }\n\n .loader-bar {\n pointer-events: none;\n align-items: center;\n background: #eee;\n max-height: 0;\n transition: max-height var(--transition-speed) ease-in-out;\n border-bottom-left-radius: var(--curvature-widget);\n border-bottom-right-radius: var(--curvature-widget);\n display: flex;\n overflow: hidden;\n }\n\n .loading .loader-bar {\n max-height: 1.1em;\n }\n\n .option:hover {\n background: var(--option-hover-bg);\n color: var(--option-hover-text);\n }\n\n .option.focused {\n background: var(--color-selection);\n color: var(--color-text-dark);\n }\n `;\n }\n\n @property({ type: Number })\n top: number;\n\n @property({ type: Number })\n left: number;\n\n @property({ type: Number })\n width: number;\n\n @property({ type: Number, attribute: 'static-width' })\n staticWidth: number;\n\n @property({ type: Boolean, attribute: 'anchor-right' })\n anchorRight: boolean;\n\n @property({ type: Number })\n marginHorizontal = 0;\n\n @property({ type: Number })\n marginVertical = 7;\n\n @property({ type: Object })\n anchorTo: HTMLElement;\n\n @property({ type: Boolean })\n visible: boolean;\n\n @property({ type: Boolean })\n block: boolean;\n\n // if we allow the focus to follow the cursor\n @property({ type: Boolean })\n cursorHover: boolean;\n\n // fire selection events when cursor changes\n @property({ type: Boolean })\n cursorSelection: boolean;\n\n @property({ type: Number })\n scrollPct = 75;\n\n @property({ type: Number })\n cursorIndex = -1;\n\n @property({ type: Boolean })\n internalFocusDisabled = false;\n\n @property({ type: Array })\n options: any[];\n\n @property({ type: Array })\n tempOptions: any[];\n\n @property({ type: Boolean })\n poppedTop: boolean;\n\n @property({ type: Boolean })\n spaceSelect: boolean;\n\n @property({ type: String })\n nameKey = 'name';\n\n @property({ type: Boolean })\n loading = false;\n\n @property({ type: Boolean })\n collapsed: boolean;\n\n @property({ type: Boolean })\n hideShadow = false;\n\n @property({ attribute: false })\n getName: { (option: any): string } = function (option: any) {\n return option[this.nameKey || 'name'];\n };\n\n @property({ attribute: false })\n renderInputOption: { (): TemplateResult } = function () {\n return null;\n };\n\n @property({ attribute: false })\n renderOption: { (option: any, selected: boolean): TemplateResult };\n\n @property({ attribute: false })\n renderOptionName: { (option: any, selected: boolean): TemplateResult };\n\n @property({ attribute: false })\n renderOptionDetail: { (option: any, selected: boolean): TemplateResult };\n\n @property({ type: Number })\n scrollHeight = 0;\n\n @property({ type: Boolean })\n triggerScroll = false;\n\n scrollParent: HTMLElement = null;\n\n resolvedRenderOption: { (option: any, selected: boolean): TemplateResult };\n\n public firstUpdated(changed: Map<string, any>) {\n super.firstUpdated(changed);\n if (!this.block) {\n this.scrollParent = getScrollParent(this);\n this.calculatePosition = this.calculatePosition.bind(this);\n if (this.scrollParent) {\n this.scrollParent.addEventListener('scroll', this.calculatePosition);\n }\n }\n\n this.resolvedRenderOption = (\n this.renderOption || this.renderOptionDefault\n ).bind(this);\n }\n\n public disconnectedCallback() {\n if (!this.block) {\n if (this.scrollParent) {\n this.scrollParent.removeEventListener('scroll', this.calculatePosition);\n }\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n private isFocused(): boolean {\n // TODO: this really doesn't seem right\n const focused =\n this.closestElement(document.activeElement.tagName) ===\n document.activeElement;\n\n return focused;\n }\n\n private resizeObserver: ResizeObserver;\n\n public updated(changed: Map<string, any>) {\n super.updated(changed);\n\n if (changed.has('anchorTo') && this.anchorTo) {\n const optionsContainer =\n this.shadowRoot.querySelector('.options-container');\n\n if (!this.resizeObserver) {\n this.resizeObserver = new ResizeObserver((entries) => {\n window.requestAnimationFrame((): void | undefined => {\n if (!Array.isArray(entries) || !entries.length) {\n return;\n }\n this.calculatePosition();\n this.adjustWidth();\n });\n });\n this.resizeObserver.observe(optionsContainer);\n }\n }\n\n // if our cursor changed, lets make sure our scrollbox is showing it\n if (!this.internalFocusDisabled && changed.has('cursorIndex')) {\n this.fireCustomEvent(CustomEventType.CursorChanged, {\n index: this.cursorIndex\n });\n }\n\n if (changed.has('visible') && changed.has('options')) {\n if (!this.visible && this.options.length == 0) {\n this.tempOptions = changed.get('options');\n window.setTimeout(() => {\n this.tempOptions = [];\n }, 200);\n }\n }\n\n if (changed.has('options')) {\n this.adjustWidth();\n this.calculatePosition();\n\n // allow scrolls to trigger again\n this.triggerScroll = true;\n\n const prevOptions = changed.get('options');\n const previousCount = prevOptions ? prevOptions.length : 0;\n const newCount = this.options ? this.options.length : 0;\n\n if (\n this.cursorIndex === -1 ||\n newCount < previousCount ||\n (previousCount === 0 && newCount > 0 && !changed.has('cursorIndex'))\n ) {\n if (!this.internalFocusDisabled) {\n if (!this.block) {\n this.cursorIndex = 0;\n } else {\n if (this.cursorIndex >= newCount) {\n this.cursorIndex = newCount - 1;\n }\n }\n\n if (this.cursorSelection) {\n this.handleSelection(false);\n }\n }\n }\n\n // if on initial load we don't have enough options to load, trigger a scroll\n // threshold event in case the page size is smaller than our control height\n const scrollBox = this.shadowRoot.querySelector('.options');\n if (scrollBox) {\n if (scrollBox.scrollHeight == scrollBox.clientHeight) {\n this.fireCustomEvent(CustomEventType.ScrollThreshold);\n }\n }\n }\n }\n\n private renderOptionDefault(option: any, selected: boolean): TemplateResult {\n const renderOptionName = (\n this.renderOptionName || this.renderOptionNameDefault\n ).bind(this);\n const renderOptionDetail = (\n this.renderOptionDetail || this.renderOptionDetailDefault\n ).bind(this);\n\n if (selected) {\n return html`\n <div class=\"name\">${renderOptionName(option, selected)}</div>\n <div class=\"detail\">${renderOptionDetail(option, selected)}</div>\n `;\n } else {\n return html`\n <div class=\"name\">${renderOptionName(option, selected)}</div>\n `;\n }\n }\n\n private renderOptionNameDefault(option: any): TemplateResult {\n return html`<div style=\"display:flex; align-items:flex-start\">\n ${option.icon\n ? html`<temba-icon\n name=\"${option.icon}\"\n style=\"margin-right:0.5em; fill: var(--color-text-dark);\"\n ></temba-icon>`\n : null}\n <div style=\"flex-grow:1\">${option.prefix}${this.getName(option)}</div>\n </div>`;\n }\n\n private renderOptionDetailDefault(option: any): TemplateResult {\n return html` ${option.detail} `;\n }\n\n public getSelection() {\n return this.options[this.cursorIndex];\n }\n\n private handleSelection(tabbed = false, index = -1) {\n if (!this.internalFocusDisabled) {\n if (index === -1) {\n index = this.cursorIndex;\n }\n }\n\n if (index === -1) {\n return;\n }\n\n const selected = this.options[index];\n this.fireCustomEvent(CustomEventType.Selection, {\n selected,\n tabbed,\n index\n });\n }\n\n private moveCursor(direction: number): void {\n if (!this.internalFocusDisabled) {\n const newIndex = Math.max(\n Math.min(this.cursorIndex + direction, this.options.length - 1),\n 0\n );\n this.setCursor(newIndex);\n }\n }\n\n private setCursor: (index: number) => void = throttle(function (\n index: number\n ) {\n if (!this.internalFocusDisabled) {\n if (index !== this.cursorIndex) {\n this.cursorIndex = index;\n }\n }\n },\n 50);\n\n public scrollToTop() {\n const scrollBox = this.shadowRoot.querySelector('.options-scroll');\n scrollBox.scrollTop = 0;\n }\n\n private ensureOptionVisible() {\n const focusedOption = this.shadowRoot.querySelector(\n `div[data-option-index=\"${this.cursorIndex}\"]`\n ) as HTMLDivElement;\n if (focusedOption) {\n focusedOption.scrollIntoView({\n block: 'nearest',\n inline: 'start'\n });\n }\n }\n private handleKeyDown(evt: KeyboardEvent) {\n if (this.internalFocusDisabled || (this.block && !this.isFocused())) {\n return;\n }\n\n if (this.offsetParent === null) {\n return;\n }\n\n if (this.options && this.options.length > 0) {\n if ((evt.ctrlKey && evt.key === 'n') || evt.key === 'ArrowDown') {\n this.moveCursor(1);\n evt.preventDefault();\n evt.stopPropagation();\n if (this.cursorSelection) {\n this.handleSelection(false);\n }\n this.ensureOptionVisible();\n } else if ((evt.ctrlKey && evt.key === 'p') || evt.key === 'ArrowUp') {\n this.moveCursor(-1);\n evt.preventDefault();\n if (this.cursorSelection) {\n this.handleSelection(false);\n }\n this.ensureOptionVisible();\n } else if (\n evt.key === 'Enter' ||\n evt.key === 'Tab' ||\n (this.spaceSelect && evt.key === ' ')\n ) {\n evt.preventDefault();\n evt.stopPropagation();\n this.handleSelection(evt.key === 'Tab');\n } else if (evt.key === 'Escape') {\n this.fireCustomEvent(CustomEventType.Canceled);\n }\n }\n }\n\n private handleInnerScroll(evt: Event) {\n const scrollbox = evt.target as HTMLDivElement;\n\n // scroll height has changed, enable scroll trigger\n if (scrollbox.scrollHeight > this.scrollHeight) {\n this.scrollHeight = scrollbox.scrollHeight;\n this.triggerScroll = true;\n }\n\n if (this.triggerScroll) {\n const scrollPct =\n scrollbox.scrollTop / (scrollbox.scrollHeight - scrollbox.clientHeight);\n if (scrollPct * 100 > this.scrollPct) {\n this.fireCustomEvent(CustomEventType.ScrollThreshold);\n this.triggerScroll = false;\n }\n }\n }\n\n private adjustWidth() {\n if (this.anchorTo) {\n const anchorBounds = this.anchorTo.getBoundingClientRect();\n this.width =\n this.staticWidth > 0\n ? this.staticWidth\n : anchorBounds.width - 2 - this.marginHorizontal * 2;\n }\n }\n\n private calculatePosition() {\n if (this.visible && !this.block) {\n const optionsBounds = this.shadowRoot\n .querySelector('.options-container')\n .getBoundingClientRect();\n\n if (this.anchorTo) {\n const anchorBounds = this.anchorTo.getBoundingClientRect();\n this.top = anchorBounds.bottom;\n if (anchorBounds.bottom + optionsBounds.height > window.innerHeight) {\n this.top =\n anchorBounds.bottom -\n (optionsBounds.height + anchorBounds.height + 10);\n }\n this.left = anchorBounds.left;\n }\n }\n }\n\n public getEventHandlers(): EventHandler[] {\n return [\n {\n event: 'keydown',\n method: this.handleKeyDown,\n isDocument: true\n },\n {\n event: 'scroll',\n method: this.calculatePosition,\n isDocument: true\n }\n ];\n }\n\n private handleMouseMove(evt: MouseEvent) {\n if (!this.block || this.cursorHover) {\n if (Math.abs(evt.movementX) + Math.abs(evt.movementY) > 0) {\n const index = (evt.currentTarget as HTMLElement).getAttribute(\n 'data-option-index'\n );\n this.setCursor(parseInt(index));\n }\n }\n }\n\n private handleOptionClick(evt: MouseEvent) {\n const index = (evt.currentTarget as HTMLElement).getAttribute(\n 'data-option-index'\n );\n\n if (index) {\n const newIndex = parseInt(index);\n this.setCursor(newIndex);\n this.handleSelection(false, newIndex);\n }\n }\n\n public render(): TemplateResult {\n if (!this.resolvedRenderOption) {\n return null;\n }\n\n let vertical = this.block ? 0 : this.marginVertical;\n if (this.poppedTop) {\n vertical *= -1;\n }\n\n const containerStyle = this.visible\n ? {\n 'margin-left': `${this.marginHorizontal}px`,\n 'margin-top': `${vertical}px`\n }\n : {};\n\n if (this.top) {\n containerStyle['top'] = `${this.top}px`;\n }\n\n if (this.left) {\n containerStyle['left'] = `${this.left}px`;\n }\n\n const optionsStyle = {};\n if (this.width) {\n optionsStyle['width'] = `${this.width}px`;\n }\n\n const classes = getClasses({\n 'options-container': true,\n show: this.visible,\n top: this.poppedTop,\n anchored: !this.block && !!this.anchorTo,\n loading: this.loading,\n shadow: !this.hideShadow,\n bordered: this.hideShadow\n });\n\n const classesInner = getClasses({\n options: true\n });\n\n let options = this.options || [];\n if (\n options.length == 0 &&\n this.tempOptions &&\n this.tempOptions.length > 0\n ) {\n options = this.tempOptions;\n }\n\n return html`\n <div class=${classes} style=${styleMap(containerStyle)}>\n <div class=\"options-scroll\" @scroll=${this.handleInnerScroll}>\n <div class=\"${classesInner}\" style=${styleMap(optionsStyle)}>\n ${options.map((option, index) => {\n return html`<div\n data-option-index=\"${index}\"\n @mousemove=${this.handleMouseMove}\n @mousedown=${this.handleOptionClick}\n class=\"option ${index === this.cursorIndex &&\n !this.internalFocusDisabled\n ? 'focused'\n : ''}\"\n >\n ${this.resolvedRenderOption(option, index === this.cursorIndex)}\n </div>`;\n })}\n ${this.block ? html`<div style=\"height:0.1em\"></div>` : null}\n </div>\n <slot></slot>\n </div>\n\n <div class=\"loader-bar\">\n <temba-loading></temba-loading>\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -5,20 +5,20 @@ export const getDate = async (attrs = {}) => {
|
|
|
5
5
|
attrs['width'] = 100;
|
|
6
6
|
return (await getComponent(TAG, attrs));
|
|
7
7
|
};
|
|
8
|
-
mockNow('2022-12-02T21:00:00.000000
|
|
8
|
+
mockNow('2022-12-02T21:00:00.000000');
|
|
9
9
|
describe('temba-date', () => {
|
|
10
10
|
beforeEach(() => {
|
|
11
11
|
loadStore();
|
|
12
12
|
});
|
|
13
13
|
it('renders default', async () => {
|
|
14
|
-
const date = await getDate({ value: '1978-11-18T02:22:00.000000
|
|
14
|
+
const date = await getDate({ value: '1978-11-18T02:22:00.000000' });
|
|
15
15
|
const dateString = date.shadowRoot.querySelector('.date').innerText;
|
|
16
16
|
await assertScreenshot('date/date', getClip(date));
|
|
17
17
|
expect(dateString).to.equal('11/18/1978');
|
|
18
18
|
});
|
|
19
19
|
it('renders duration', async () => {
|
|
20
20
|
const date = await getDate({
|
|
21
|
-
value: '1978-11-18T02:22:00.000000
|
|
21
|
+
value: '1978-11-18T02:22:00.000000',
|
|
22
22
|
display: 'duration'
|
|
23
23
|
});
|
|
24
24
|
const dateString = date.shadowRoot.querySelector('.date').innerText;
|
|
@@ -27,19 +27,27 @@ describe('temba-date', () => {
|
|
|
27
27
|
});
|
|
28
28
|
it('renders datetime', async () => {
|
|
29
29
|
const date = await getDate({
|
|
30
|
-
value: '1978-11-18T02:22:00.000000
|
|
30
|
+
value: '1978-11-18T02:22:00.000000',
|
|
31
31
|
display: 'datetime'
|
|
32
32
|
});
|
|
33
33
|
const dateString = date.shadowRoot.querySelector('.date').innerText;
|
|
34
34
|
await assertScreenshot('date/datetime', getClip(date));
|
|
35
|
-
expect(dateString).to.equal('11/18/1978,
|
|
35
|
+
expect(dateString).to.equal('11/18/1978, 2:22 AM');
|
|
36
|
+
});
|
|
37
|
+
it('renders timedate', async () => {
|
|
38
|
+
const date = await getDate({
|
|
39
|
+
value: '2022-12-01T21:30:00.000000',
|
|
40
|
+
display: 'timedate'
|
|
41
|
+
});
|
|
42
|
+
const dateString = date.shadowRoot.querySelector('.date').innerText;
|
|
43
|
+
await assertScreenshot('date/timedate', getClip(date));
|
|
44
|
+
expect(dateString).to.equal('Dec 1');
|
|
36
45
|
});
|
|
37
46
|
it('renders inline', async () => {
|
|
38
47
|
const el = await fixture(html `
|
|
39
48
|
<span
|
|
40
49
|
>Your birthday is
|
|
41
|
-
<temba-date value="1978-11-18T02:22:00.000000
|
|
42
|
-
>!</span
|
|
50
|
+
<temba-date value="1978-11-18T02:22:00.000000"></temba-date>!</span
|
|
43
51
|
>
|
|
44
52
|
`);
|
|
45
53
|
await assertScreenshot('date/date-inline', getClip(el));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"temba-date.test.js","sourceRoot":"","sources":["../../test/temba-date.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EACL,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,SAAS,EACT,OAAO,EACR,MAAM,cAAc,CAAC;AAEtB,MAAM,GAAG,GAAG,YAAY,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,EAAE,QAAa,EAAE,EAAE,EAAE;IAC/C,KAAK,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC;IACrB,OAAO,CAAC,MAAM,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAc,CAAC;AACvD,CAAC,CAAC;AAEF,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"temba-date.test.js","sourceRoot":"","sources":["../../test/temba-date.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport { TembaDate } from '../src/date/TembaDate';\nimport {\n assertScreenshot,\n getClip,\n getComponent,\n loadStore,\n mockNow\n} from './utils.test';\n\nconst TAG = 'temba-date';\n\nexport const getDate = async (attrs: any = {}) => {\n attrs['width'] = 100;\n return (await getComponent(TAG, attrs)) as TembaDate;\n};\n\nmockNow('2022-12-02T21:00:00.000000');\n\ndescribe('temba-date', () => {\n beforeEach(() => {\n loadStore();\n });\n\n it('renders default', async () => {\n const date = await getDate({ value: '1978-11-18T02:22:00.000000' });\n const dateString = (\n date.shadowRoot.querySelector('.date') as HTMLSpanElement\n ).innerText;\n\n await assertScreenshot('date/date', getClip(date));\n expect(dateString).to.equal('11/18/1978');\n });\n\n it('renders duration', async () => {\n const date = await getDate({\n value: '1978-11-18T02:22:00.000000',\n display: 'duration'\n });\n const dateString = (\n date.shadowRoot.querySelector('.date') as HTMLSpanElement\n ).innerText;\n\n await assertScreenshot('date/duration', getClip(date));\n expect(dateString).to.equal('44 years ago');\n });\n\n it('renders datetime', async () => {\n const date = await getDate({\n value: '1978-11-18T02:22:00.000000',\n display: 'datetime'\n });\n const dateString = (\n date.shadowRoot.querySelector('.date') as HTMLSpanElement\n ).innerText;\n\n await assertScreenshot('date/datetime', getClip(date));\n expect(dateString).to.equal('11/18/1978, 2:22 AM');\n });\n\n it('renders timedate', async () => {\n const date = await getDate({\n value: '2022-12-01T21:30:00.000000',\n display: 'timedate'\n });\n const dateString = (\n date.shadowRoot.querySelector('.date') as HTMLSpanElement\n ).innerText;\n await assertScreenshot('date/timedate', getClip(date));\n expect(dateString).to.equal('Dec 1');\n });\n\n it('renders inline', async () => {\n const el: HTMLElement = await fixture(html`\n <span\n >Your birthday is\n <temba-date value=\"1978-11-18T02:22:00.000000\"></temba-date>!</span\n >\n `);\n\n await assertScreenshot('date/date-inline', getClip(el));\n });\n});\n"]}
|
package/package.json
CHANGED
|
Binary file
|
|
Binary file
|
package/src/date/TembaDate.ts
CHANGED
|
@@ -64,7 +64,9 @@ export class TembaDate extends RapidElement {
|
|
|
64
64
|
const hours = Math.abs(
|
|
65
65
|
this.datetime.diffNow().milliseconds / 1000 / 60 / 60
|
|
66
66
|
);
|
|
67
|
-
|
|
67
|
+
|
|
68
|
+
const day = this.datetime.get('day');
|
|
69
|
+
if (hours < 24 && day == DateTime.now().get('day')) {
|
|
68
70
|
formatted = this.datetime.toLocaleString(Display.time);
|
|
69
71
|
} else if (hours < 24 * 365) {
|
|
70
72
|
formatted = this.datetime.toFormat(Display.day);
|
package/src/options/Options.ts
CHANGED
|
@@ -570,7 +570,9 @@ export class Options extends RapidElement {
|
|
|
570
570
|
const anchorBounds = this.anchorTo.getBoundingClientRect();
|
|
571
571
|
this.top = anchorBounds.bottom;
|
|
572
572
|
if (anchorBounds.bottom + optionsBounds.height > window.innerHeight) {
|
|
573
|
-
this.top =
|
|
573
|
+
this.top =
|
|
574
|
+
anchorBounds.bottom -
|
|
575
|
+
(optionsBounds.height + anchorBounds.height + 10);
|
|
574
576
|
}
|
|
575
577
|
this.left = anchorBounds.left;
|
|
576
578
|
}
|
package/test/temba-date.test.ts
CHANGED
|
@@ -15,7 +15,7 @@ export const getDate = async (attrs: any = {}) => {
|
|
|
15
15
|
return (await getComponent(TAG, attrs)) as TembaDate;
|
|
16
16
|
};
|
|
17
17
|
|
|
18
|
-
mockNow('2022-12-02T21:00:00.000000
|
|
18
|
+
mockNow('2022-12-02T21:00:00.000000');
|
|
19
19
|
|
|
20
20
|
describe('temba-date', () => {
|
|
21
21
|
beforeEach(() => {
|
|
@@ -23,7 +23,7 @@ describe('temba-date', () => {
|
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
it('renders default', async () => {
|
|
26
|
-
const date = await getDate({ value: '1978-11-18T02:22:00.000000
|
|
26
|
+
const date = await getDate({ value: '1978-11-18T02:22:00.000000' });
|
|
27
27
|
const dateString = (
|
|
28
28
|
date.shadowRoot.querySelector('.date') as HTMLSpanElement
|
|
29
29
|
).innerText;
|
|
@@ -34,7 +34,7 @@ describe('temba-date', () => {
|
|
|
34
34
|
|
|
35
35
|
it('renders duration', async () => {
|
|
36
36
|
const date = await getDate({
|
|
37
|
-
value: '1978-11-18T02:22:00.000000
|
|
37
|
+
value: '1978-11-18T02:22:00.000000',
|
|
38
38
|
display: 'duration'
|
|
39
39
|
});
|
|
40
40
|
const dateString = (
|
|
@@ -47,7 +47,7 @@ describe('temba-date', () => {
|
|
|
47
47
|
|
|
48
48
|
it('renders datetime', async () => {
|
|
49
49
|
const date = await getDate({
|
|
50
|
-
value: '1978-11-18T02:22:00.000000
|
|
50
|
+
value: '1978-11-18T02:22:00.000000',
|
|
51
51
|
display: 'datetime'
|
|
52
52
|
});
|
|
53
53
|
const dateString = (
|
|
@@ -55,15 +55,26 @@ describe('temba-date', () => {
|
|
|
55
55
|
).innerText;
|
|
56
56
|
|
|
57
57
|
await assertScreenshot('date/datetime', getClip(date));
|
|
58
|
-
expect(dateString).to.equal('11/18/1978,
|
|
58
|
+
expect(dateString).to.equal('11/18/1978, 2:22 AM');
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
it('renders timedate', async () => {
|
|
62
|
+
const date = await getDate({
|
|
63
|
+
value: '2022-12-01T21:30:00.000000',
|
|
64
|
+
display: 'timedate'
|
|
65
|
+
});
|
|
66
|
+
const dateString = (
|
|
67
|
+
date.shadowRoot.querySelector('.date') as HTMLSpanElement
|
|
68
|
+
).innerText;
|
|
69
|
+
await assertScreenshot('date/timedate', getClip(date));
|
|
70
|
+
expect(dateString).to.equal('Dec 1');
|
|
59
71
|
});
|
|
60
72
|
|
|
61
73
|
it('renders inline', async () => {
|
|
62
74
|
const el: HTMLElement = await fixture(html`
|
|
63
75
|
<span
|
|
64
76
|
>Your birthday is
|
|
65
|
-
<temba-date value="1978-11-18T02:22:00.000000
|
|
66
|
-
>!</span
|
|
77
|
+
<temba-date value="1978-11-18T02:22:00.000000"></temba-date>!</span
|
|
67
78
|
>
|
|
68
79
|
`);
|
|
69
80
|
|