How to use the lit-element.property function in lit-element

// tslint:enable:max-line-length
  ];

  @property({ type: Number, reflect: true })
  public firstDayOfWeek: number = 0;

  @property({ type: Boolean, reflect: true })
  public showWeekNumber: boolean = false;

  @property({ type: String, reflect: true })
  public weekNumberType: WeekNumberType = 'first-4-day-week';

  @property({ type: Boolean, reflect: true })
  public landscape: boolean = false;

  @property({ type: String, reflect: true })
  public get startView() {
    return this._startView!;
  }
  public set startView(val: StartView) {
    /**
     * NOTE: Defaults to `START_VIEW.CALENDAR` when `val` is falsy.
     */
    const defaultVal: StartView = !val ? 'calendar' : val;

    /**
     * NOTE: No-op when `val` is not falsy and not valid accepted values.
     */
    if (defaultVal !== 'calendar' && defaultVal !== 'yearList') return;

    const oldVal = this._startView;

@property({ type: String, reflect: true })
  public get max() {
    return this.__hasMax ? toFormattedDateString(this._max!) : '';
  }
  public set max(val: string) {
    const valDate = getResolvedDate(val);
    const focusedDate = this._focusedDate;
    const isValidMax = isValidDate(val, valDate);

    this._max = isValidMax ? valDate : this._maxDate;
    this.__hasMax = isValidMax;
    this.value = toFormattedDateString(+focusedDate > +valDate ? valDate : focusedDate);
    this.updateComplete.then(() => this.requestUpdate('max'));
  }

  @property({ type: String })
  public get value() {
    return toFormattedDateString(this._focusedDate);
  }
  public set value(val: string) {
    const valDate = getResolvedDate(val);

    if (isValidDate(val, valDate)) {
      this._focusedDate = new Date(valDate);
      this._selectedDate = this._lastSelectedDate = new Date(valDate);
      // this.valueAsDate = newDate;
      // this.valueAsNumber = +newDate;
    }
  }

  @property({ type: String })
  public locale: string = getResolvedLocale();

* @cssprop --clr-icon-color-inverse-highlight
 */
// @dynamic
export class CwcIcon extends IconMixinClass {
  private _shape: string;
  private _size: string;

  get shape() {
    return hasIcon(this._shape, ClarityIcons.registry) ? this._shape : 'unknown';
  }

  /**
   * Changes the svg glyph displayed in the icon component. Defaults to the 'unknown' icon if
   * the specified icon cannot be found in the icon registry.
   */
  @property({ type: String, reflect: true })
  set shape(val: string) {
    if (hasPropertyChanged(val, this._shape)) {
      const oldVal = this._shape;
      this._shape = val;
      this.requestUpdate('shape', oldVal);
    }
  }

  get size() {
    return this._size;
  }

  /** Converts between numerical values and t-shirt sizes */
  @property({ type: String, reflect: true })
  set size(val: string) {
    if (hasPropertyChanged(val, this._size)) {

@property({ type: String, reflect: true })
  public get min() {
    return this.__hasMin ? toFormattedDateString(this._min!) : '';
  }
  public set min(val: string) {
    const valDate = getResolvedDate(val);
    const focusedDate = this._focusedDate;
    const isValidMin = isValidDate(val, valDate);

    this._min = isValidMin ? valDate : this._todayDate;
    this.__hasMin = isValidMin;
    this.value = toFormattedDateString(+focusedDate < +valDate ? valDate : focusedDate);
    this.updateComplete.then(() => this.requestUpdate('min'));
  }

  @property({ type: String, reflect: true })
  public get max() {
    return this.__hasMax ? toFormattedDateString(this._max!) : '';
  }
  public set max(val: string) {
    const valDate = getResolvedDate(val);
    const focusedDate = this._focusedDate;
    const isValidMax = isValidDate(val, valDate);

    this._max = isValidMax ? valDate : this._maxDate;
    this.__hasMax = isValidMax;
    this.value = toFormattedDateString(+focusedDate > +valDate ? valDate : focusedDate);
    this.updateComplete.then(() => this.requestUpdate('max'));
  }

  @property({ type: String })
  public get value() {

/**
			 * This is a comment
			 * @type {red|green}
			 * @private
			 */
			myProp1: {
				type: Object
			}
		};
	}

	static get observedAttributes() {
		return ["attr1", "attr2"];
	}

	@property({ type: String }) set value(str: string) {}
}

set min(value) {
    const { min: oldMin } = this;
    this._min = value;
    this.requestUpdate('min', oldMin);
  }

  /**
   * The form name. Corresponds to the attribute with the same name.
   */
  @property()
  name!: string;

  /**
   * The snapping step of the value. Corresponds to the attribute with the same name.
   */
  @property({ type: Number, reflect: true })
  get step() {
    return this._step.toString();
  }

  set step(value) {
    const { step: oldStep } = this;
    this._step = value;
    this.requestUpdate('step', oldStep);
  }

  /**
   * A value determining how much the value should increase/decrease by Shift+arrow keys,
   * which will be `(max - min) / stepRatio`.
   * Corresponds to `step-ratio` attribute.
   */
  @property({ type: Number, reflect: true, attribute: 'step-ratio' })

@query('.mdc-tab') protected mdcRoot!: HTMLElement;

  @query('mwc-tab-indicator') protected tabIndicator!: TabIndicator;

  @property() label = '';

  @property() icon = '';

  @property({type: Boolean}) isFadingIndicator = false;

  @property({type: Boolean}) minWidth = false;

  @property({type: Boolean}) isMinWidthIndicator = false;

  @property({type: Boolean, reflect: true, attribute: 'active'})
  get active(): boolean {
    return this._active;
  }

  @property() indicatorIcon = '';

  @property({type: Boolean}) stacked = false;

  protected _active = false;

  /**
   * Other properties
   * indicatorContent 
   * previousIndicatorClientRect (needed?)
   * onTransitionEnd (needed?)
   */

*/
  @property({ reflect: true })
  get max() {
    return this._max.toString();
  }

  set max(value) {
    const oldValue = this.max;
    this._max = value;
    this.requestUpdate('max', oldValue);
  }

  /**
   * The amount the value should increase or decrease by
   */
  @property({ reflect: true })
  get step() {
    return this._step.toString();
  }

  set step(value) {
    const oldValue = this.step;
    this._step = value;
    this.requestUpdate('step', oldValue);
  }

  /**
   * Set to `true` to enable the mobile variant of the number input
   */
  @property({ type: Boolean, reflect: true })
  mobile = false;

url: new URL(url, this.href),
      cacheNr: ++this.cacheNr,
    });
  }

  @property()
  reload() {
    this.reload$.next({
      cause: Cause.Push,
      url: new URL(this.href),
      cacheNr: ++this.cacheNr,
      replace: true,
    });
  }

  @property()
  replace(url: string) {
    this.reload$.next({
      cause: Cause.Push,
      url: new URL(url, this.href),
      cacheNr: ++this.cacheNr,
      replace: true,
    });
  }

  fireEvent(name: string, eventInitDict?: CustomEventInit) {
    this.dispatchEvent(new CustomEvent(name, eventInitDict));
    this.dispatchEvent(new CustomEvent(`hy-push-state-${name}`, eventInitDict));
  }

  compareContext(p: Context, q: Context) {
    return p.url.href === q.url.href && p.error === q.error && p.cacheNr === q.cacheNr;

willChange: this.willChange ? 'transform' : '',
        })}
      >
        <div class="overflow">
          
        </div>
      
    `;
  }

  fireEvent(name: string, eventInitDict?: CustomEventInit) {
    this.dispatchEvent(new CustomEvent(name, eventInitDict));
    this.dispatchEvent(new CustomEvent(`hy-drawer-${name}`, eventInitDict));
  }

  @property()
  open() {
    this.animateTo$.next(true);
  }

  @property()
  close() {
    this.animateTo$.next(false);
  }

  @property()
  toggle() {
    this.animateTo$.next(!this.opened);
  }
}