@schukai/monster/source/components/time/timeline/appointment.mjs

Monster is a simple library for creating fast, robust and lightweight websites.

/**
 * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
 * Node module: @schukai/monster
 *
 * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
 * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
 *
 * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
 * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
 * For more information about purchasing a commercial license, please contact Volker Schukai.
 */

import { instanceSymbol } from "../../../constants.mjs";
import { ATTRIBUTE_ROLE } from "../../../dom/constants.mjs";
import { CustomElement } from "../../../dom/customelement.mjs";
import {
	assembleMethodSymbol,
	registerCustomElement,
} from "../../../dom/customelement.mjs";
import { AppointmentStyleSheet } from "./stylesheet/appointment.mjs";

export { Appointment };

/**
 * @private
 * @type {symbol}
 */
const controlElementSymbol = Symbol("calendarElement");

/**
 * Am appointment is a part of the calendar that represents a single appointment.
 *
 * @fragments /fragments/components/time/timeline/appointment
 *
 * @example /examples/components/time/timeline/appointment-simple
 *
 * @since 3.113.0
 * @copyright Volker Schukai
 * @summary An appointment is a part of the calendar that represents a single appointment.
 */
class Appointment extends CustomElement {
	/**
	 * This method is called by the `instanceof` operator.
	 * @returns {symbol}
	 */
	static get [instanceSymbol]() {
		return Symbol.for(
			"@schukai/monster/components/time/appointment/segment@@instance",
		);
	}

	/**
	 *
	 * @return {Components.Time.Calendar
	 */
	[assembleMethodSymbol]() {
		super[assembleMethodSymbol]();

		initControlReferences.call(this);
		initEventHandler.call(this);
		return this;
	}

	/**
	 * To set the options via the HTML Tag, the attribute `data-monster-options` must be used.
	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
	 *
	 * The individual configuration values can be found in the table.
	 *
	 * @property {Object} templates Template definitions
	 * @property {string} templates.main Main template
	 * @property {Object} labels Label definitions
	 * @property {Object} actions Callbacks
	 * @property {string} actions.click="throw Error" Callback when clicked
	 * @property {Object} features Features
	 * @property {Object} classes CSS classes
	 * @property {boolean} disabled=false Disabled state
	 */
	get defaults() {
		return Object.assign({}, super.defaults, {
			templates: {
				main: getTemplate(),
			},
			labels: {
				text: "Appointment",
			},
			classes: {},

			disabled: false,
			features: {},
			actions: {},

			startDate: "",
			calendarDays: [],
			calendarWeekdays: [],
		});
	}

	/**
	 * @return {string}
	 */
	static getTag() {
		return "monster-appointment";
	}

	/**
	 * @return {CSSStyleSheet[]}
	 */
	static getCSSStyleSheet() {
		return [AppointmentStyleSheet];
	}
}

/**
 * @private
 * @return {initEventHandler}
 */
function initEventHandler() {
	const self = this;

	return this;
}

/**
 * @private
 * @return {void}
 */
function initControlReferences() {
	this[controlElementSymbol] = this.shadowRoot.querySelector(
		`[${ATTRIBUTE_ROLE}="control"]`,
	);
}

/**
 * @private
 * @return {string}
 */
function getTemplate() {
	// language=HTML
	return `
        <div data-monster-role="control" part="control">
        <div data-monster-role="appointment" data-monster-replace="path:labels.text" part="appointment"></div>
        </div>
`;
}

registerCustomElement(Appointment);