egroupware_official/api/js/etemplate/Et2Date/Et2DateDurationReadonly.ts

101 lines
2.0 KiB
TypeScript
Raw Normal View History

/**
* EGroupware eTemplate2 - Readonly duration WebComponent
*
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @package api
* @link https://www.egroupware.org
* @author Nathan Gray
*/
import {css, html} from "lit";
import {Et2DateDuration, formatOptions} from "./Et2DateDuration";
2022-02-17 00:44:57 +01:00
import {dateStyles} from "./DateStyles";
/**
* This is a stripped-down read-only widget used in nextmatch
*/
export class Et2DateDurationReadonly extends Et2DateDuration
{
2022-02-17 00:44:57 +01:00
static get styles()
{
return [
...super.styles,
...dateStyles,
css`
:host {
border: none;
min-width: 2em;
}
`
];
}
constructor()
{
super();
// Property defaults
this.selectUnit = false; // otherwise just best matching unit will be used for eg. display_format "h:m:s"
}
2022-02-17 00:44:57 +01:00
get value()
{
return this.__value;
}
set value(_value)
{
const old_value = this.__value;
2022-02-17 00:44:57 +01:00
this.__value = _value;
this.requestUpdate("value", old_value);
2022-02-17 00:44:57 +01:00
}
render()
{
2022-02-17 00:44:57 +01:00
let parsed = this.__value;
const format_options = <formatOptions>{
selectUnit: this.selectUnit,
displayFormat: this.displayFormat,
dataFormat: this.dataFormat,
numberFormat: this.egw().preference("number_format"),
hoursPerDay: this.hoursPerDay,
emptyNot0: this.emptyNot0
};
const display = this.formatter(parsed, format_options);
return html`
<span ${this.id ? html`id="${this._dom_id}"` : ''}>
${display.value}${display.unit}
</span>
`;
}
2022-03-09 18:17:59 +01:00
/**
* These are the attributes we allow to change for each row
*
* @param attrs
*/
getDetachedAttributes(attrs)
{
2022-03-09 18:17:59 +01:00
attrs.push("id", "value", "class", "disabled");
}
getDetachedNodes() : HTMLElement[]
{
return [<HTMLElement><unknown>this];
}
setDetachedAttributes(_nodes : HTMLElement[], _values : object, _data? : any) : void
{
for(let attr in _values)
{
this[attr] = _values[attr];
}
}
}
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
customElements.define("et2-date-duration_ro", Et2DateDurationReadonly);