@Property is applied to accessors

app/assets/javascripts/components/annotations/annotation_form.ts

@@ -31,26 +31,26 @@ const maxLength = 10_000;
 @customElement("d-annotation-form")
 export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
     @property({ type: String, attribute: "annotation-text" })
-    annotationText: string;
+    accessor annotationText: string;
     @property({ type: String, attribute: "saved-annotation-id" })
-    savedAnnotationId: string;
+    accessor savedAnnotationId: string;
     @property({ type: Boolean })
-    disabled = false;
+    accessor disabled = false;
     @property({ type: Boolean, attribute: "has-errors" })
-    hasErrors = false;
+    accessor hasErrors = false;
     @property({ type: String, attribute: "submit-button-text" })
-    submitButtonText: string;
+    accessor submitButtonText: string;
 
     @property({ state: true })
-    _annotationText = "";
+    accessor _annotationText = "";
     @property({ state: true })
-    _savedAnnotationId = "";
+    accessor _savedAnnotationId = "";
     @property({ state: true })
-    _savedAnnotationTitle: string;
+    accessor _savedAnnotationTitle: string;
     @property({ state: true })
-    _savedAnnotationSearchInput = "";
+    accessor _savedAnnotationSearchInput = "";
     @property({ state: true })
-    saveAnnotation = false;
+    accessor saveAnnotation = false;
 
     get savedAnnotationTitle(): string {
         return this._savedAnnotationTitle || this._annotationText.split(/\s+/).slice(0, 5).join(" ").slice(0, 40);

app/assets/javascripts/components/annotations/annotation_marker.ts

@@ -18,9 +18,9 @@ import { StateController } from "state/state_system/StateController";
 @customElement("d-annotation-marker")
 export class AnnotationMarker extends LitElement {
     @property({ type: Array })
-    annotations: Annotation[];
+    accessor annotations: Annotation[];
     @property({ type: Boolean, attribute: "full-width" })
-    fullWidth = false;
+    accessor fullWidth = false;
 
     state = new StateController(this);
 

app/assets/javascripts/components/annotations/annotation_options.ts

@@ -17,7 +17,7 @@ import { annotationState } from "state/Annotations";
 @customElement("d-annotation-options")
 export class AnnotationOptions extends i18nMixin(ShadowlessLitElement) {
     @property({ state: true })
-    formShown = false;
+    accessor formShown = false;
 
     get canCreateAnnotation(): boolean {
         return userState.hasPermission("annotation.create");

app/assets/javascripts/components/annotations/annotation_tooltip.ts

@@ -16,7 +16,7 @@ const setInstancesDelayer = createDelayer();
 @customElement("d-annotation-tooltip")
 export class AnnotationTooltip extends LitElement {
     @property({ type: Array })
-    annotations: Annotation[];
+    accessor annotations: Annotation[];
 
     static styles = css`:host { position: relative; }`;
 

app/assets/javascripts/components/annotations/annotations_cell.ts

@@ -27,9 +27,9 @@ import { evaluationState } from "state/Evaluations";
 @customElement("d-annotations-cell")
 export class AnnotationsCell extends ShadowlessLitElement {
     @property({ type: Boolean, attribute: "show-form" })
-    formShown: boolean;
+    accessor formShown: boolean;
     @property({ type: Number })
-    row: number;
+    accessor row: number;
 
     annotationFormRef: Ref<AnnotationForm> = createRef();
 

app/assets/javascripts/components/annotations/code_listing_row.ts

@@ -26,9 +26,9 @@ import "components/annotations/line_of_code";
 @customElement("d-code-listing-row")
 export class CodeListingRow extends i18nMixin(ShadowlessLitElement) {
     @property({ type: Number })
-    row: number;
+    accessor row: number;
     @property({ type: String, attribute: "rendered-code" })
-    renderedCode: string;
+    accessor renderedCode: string;
 
     firstUpdated(_changedProperties: PropertyValues): void {
         super.firstUpdated(_changedProperties);

app/assets/javascripts/components/annotations/create_annotation_button.ts

@@ -22,9 +22,9 @@ DRAG_IMAGE.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAA
 @customElement("d-create-annotation-button")
 export class CreateAnnotationButton extends ShadowlessLitElement {
     @property({ type: Number })
-    row: number;
+    accessor row: number;
     @property({ type: Boolean, attribute: "is-question-mode" })
-    isQuestionMode: boolean;
+    accessor isQuestionMode: boolean;
 
     get buttonText(): string {
         const key = this.isQuestionMode ? "question" : "annotation";

app/assets/javascripts/components/annotations/hidden_annotations_dot.ts

@@ -18,7 +18,7 @@ import { annotationState, compareAnnotationOrders } from "state/Annotations";
 @customElement("d-hidden-annotations-dot")
 export class HiddenAnnotationsDot extends i18nMixin(ShadowlessLitElement) {
     @property({ type: Number })
-    row: number;
+    accessor row: number;
 
     get machineAnnotations(): MachineAnnotation[] {
         return machineAnnotationState.byLine.get(this.row) || [];

app/assets/javascripts/components/annotations/line_of_code.ts

@@ -35,9 +35,9 @@ function numberArrayEquals(a: number[], b: number[]): boolean {
 @customElement("d-line-of-code")
 export class LineOfCode extends ShadowlessLitElement {
     @property({ type: Number })
-    row: number;
+    accessor row: number;
     @property({ type: String, attribute: "rendered-code" })
-    renderedCode: string;
+    accessor renderedCode: string;
 
     get code(): string {
         return submissionState.codeByLine[this.row - 1];

app/assets/javascripts/components/annotations/machine_annotation.ts

@@ -14,7 +14,7 @@ import { MachineAnnotation } from "state/MachineAnnotations";
 @customElement("d-machine-annotation")
 export class MachineAnnotationComponent extends ShadowlessLitElement {
     @property({ type: Object })
-    data: MachineAnnotation;
+    accessor data: MachineAnnotation;
 
     protected get hasNotice(): boolean {
         return this.data.externalUrl !== null && this.data.externalUrl !== undefined;

app/assets/javascripts/components/annotations/selection_layer.ts

@@ -16,7 +16,7 @@ import { annotationState } from "state/Annotations";
 @customElement("d-selection-layer")
 class SelectionLayer extends ShadowlessLitElement {
     @property({ type: Number })
-    row: number;
+    accessor row: number;
 
     get code(): string {
         return submissionState.codeByLine[this.row - 1];

app/assets/javascripts/components/annotations/thread.ts

@@ -23,10 +23,10 @@ import { evaluationState } from "state/Evaluations";
 @customElement("d-thread")
 export class Thread extends i18nMixin(ShadowlessLitElement) {
     @property({ type: Number, attribute: "root-id" })
-    rootId: number;
+    accessor rootId: number;
 
     @property({ state: true })
-    formShown = false;
+    accessor formShown = false;
 
     annotationFormRef: Ref<AnnotationForm> = createRef();
 

app/assets/javascripts/components/annotations/user_annotation.ts

@@ -24,10 +24,10 @@ import { savedAnnotationState } from "state/SavedAnnotations";
 @customElement("d-user-annotation")
 export class UserAnnotationComponent extends i18nMixin(ShadowlessLitElement) {
     @property({ type: Object })
-    data: UserAnnotation;
+    accessor data: UserAnnotation;
 
     @property({ state: true })
-    editing = false;
+    accessor editing = false;
 
     annotationFormRef: Ref<AnnotationForm> = createRef();
 

app/assets/javascripts/components/copy_button.ts

@@ -15,14 +15,14 @@ import { initTooltips, ready } from "utilities";
 @customElement("d-copy-button")
 export class CopyButton extends ShadowlessLitElement {
     @property({ type: Object })
-    codeElement: HTMLElement;
+    accessor codeElement: HTMLElement;
 
     get code(): string {
         return this.codeElement.textContent;
     }
 
     @property({ state: true })
-    status: "idle" | "success" | "error" = "idle";
+    accessor status: "idle" | "success" | "error" = "idle";
 
     async copyCode(): Promise<void> {
         try {

app/assets/javascripts/components/course_labels_search_bar.ts

@@ -13,7 +13,7 @@ import "components/datalist_input";
 @customElement("d-course-labels")
 export class CourseLabelTokens extends ShadowlessLitElement {
     @property({ type: Array })
-    labels: string[];
+    accessor labels: string[];
 
     processClick(e: Event, label: string): void {
         this.labels.splice(this.labels.indexOf(label), 1);
@@ -50,16 +50,16 @@ export class CourseLabelTokens extends ShadowlessLitElement {
 @customElement("d-course-labels-search-bar")
 export class CourseLabelsSearchBar extends ShadowlessLitElement {
     @property({ type: Array })
-    labels: {id: number, name: string}[];
+    accessor labels: {id: number, name: string}[];
 
     @property({ type: Array })
-    selected_labels: string[];
+    accessor selected_labels: string[];
 
     @property({ state: true })
-    selected_label: string;
+    accessor selected_label: string;
 
     @property({ state: true })
-    filter: string;
+    accessor filter: string;
 
     get options(): Option[] {
         return this.labels.map(i => ({ label: i.name, value: i.id.toString() }));

app/assets/javascripts/components/datalist_input.ts

@@ -24,46 +24,45 @@ export type Option = {label: string, value: string, extra?: string};
 @customElement("d-datalist-input")
 export class DatalistInput extends watchMixin(ShadowlessLitElement) {
     @property({ type: String })
-    name: string;
+    accessor name: string;
     @property({ type: Array })
-    options: Option[] = [];
+    accessor options: Option[] = [];
     @property({ type: String })
-    value: string;
+    accessor value: string;
     @property({ type: String })
-    placeholder: string;
+    accessor placeholder: string;
     @property({ type: Boolean })
-    disabled = false;
+    accessor disabled = false;
 
     inputRef: Ref<HTMLInputElement> = createRef();
 
     @property({ state: true })
-    _filter= this.label;
+    accessor _filter= this.label;
     @property({ state: true })
-    _softSelectedOption: Option;
+    accessor _softSelectedOption: Option;
 
     @property({ type: String })
-    get filter(): string {
-        return this._filter;
-    }
-
     set filter(value: string) {
         this._filter = value;
         this.value = this.options?.find(o => this.filter === o.label)?.value || "";
         this.fireEvent();
     }
+    get filter(): string {
+        return this._filter;
+    }
 
     @property({ state: true })
+    set softSelectedOption(value: Option) {
+        this._softSelectedOption = value;
+    }
+
     get softSelectedOption(): Option {
         return this._softSelectedOption ||
             this.filtered_options.find(o => o.value === this.value) ||
             this.filtered_options[0] ||
             undefined;
     }
 
-    set softSelectedOption(value: Option) {
-        this._softSelectedOption = value;
-    }
-
     watch = {
         options: () => {
             if (!this.filter) {

app/assets/javascripts/components/histogram.ts

@@ -15,7 +15,7 @@ import { customElement, property } from "lit/decorators.js";
 @customElement("d-histogram")
 export class Histogram extends LitElement {
     @property({ type: Array })
-    values: number[];
+    accessor values: number[];
 
     static styles = css`
         :host {

app/assets/javascripts/components/pagination.ts

@@ -17,11 +17,11 @@ import { searchQueryState } from "state/SearchQuery";
 @customElement("d-pagination")
 export class Pagination extends ShadowlessLitElement {
     @property({ type: Number })
-    total: number;
+    accessor total: number;
     @property({ type: Number })
-    current: number;
+    accessor current: number;
     @property({ type: Boolean })
-    small = false;
+    accessor small = false;
 
     get width(): number {
         return this.small ? 1 : 2;

app/assets/javascripts/components/progress_bar.ts

@@ -16,10 +16,10 @@ import { initTooltips, ready } from "../utilities";
 @customElement("d-progress-bar")
 export class ProgressBar extends ShadowlessLitElement {
     @property({ type: Array })
-    values: Array<number>;
+    accessor values: Array<number>;
 
     @property({ type: String, attribute: "title-key" })
-    titleKey: string;
+    accessor titleKey: string;
 
     get valuesSum(): number {
         return Object.values(this.values).reduce((a, b) => a + b, 0);

app/assets/javascripts/components/saved_annotations/new_saved_annotation.ts

@@ -22,16 +22,16 @@ import { i18nMixin } from "components/meta/i18n_mixin";
 @customElement("d-new-saved-annotation")
 export class NewSavedAnnotation extends i18nMixin(modalMixin(ShadowlessLitElement)) {
     @property({ type: Number, attribute: "from-annotation-id" })
-    fromAnnotationId: number;
+    accessor fromAnnotationId: number;
     @property({ type: String, attribute: "annotation-text" })
-    annotationText: string;
+    accessor annotationText: string;
     @property({ type: Number, attribute: "exercise-id" })
-    exerciseId: number = exerciseState.id;
+    accessor exerciseId: number = exerciseState.id;
     @property({ type: Number, attribute: "course-id" })
-    courseId: number = courseState.id;
+    accessor courseId: number = courseState.id;
 
     @property({ state: true })
-    errors: string[];
+    accessor errors: string[];
 
     savedAnnotation: SavedAnnotation;
 

app/assets/javascripts/components/saved_annotations/saved_annotation_form.ts

@@ -19,11 +19,11 @@ import "components/saved_annotations/saved_annotation_title_input";
 @customElement("d-saved-annotation-form")
 export class SavedAnnotationForm extends ShadowlessLitElement {
     @property({ type: Object })
-    savedAnnotation: SavedAnnotation;
+    accessor savedAnnotation: SavedAnnotation;
     @property({ type: Number, attribute: "exercise-id" })
-    exerciseId: number;
+    accessor exerciseId: number;
     @property({ type: Number, attribute: "course-id" })
-    courseId: number;
+    accessor courseId: number;
 
     savedAnnotationChanged(): void {
         const event = new CustomEvent("change", {

app/assets/javascripts/components/saved_annotations/saved_annotation_icon.ts

@@ -13,7 +13,7 @@ import { SavedAnnotation, savedAnnotationState } from "state/SavedAnnotations";
 @customElement("d-saved-annotation-icon")
 export class SavedAnnotationIcon extends ShadowlessLitElement {
     @property({ type: Number, attribute: "saved-annotation-id" })
-    savedAnnotationId: number | null;
+    accessor savedAnnotationId: number | null;
 
     get isAlreadyLinked(): boolean {
         return this.savedAnnotationId != undefined;

app/assets/javascripts/components/saved_annotations/saved_annotation_input.ts

@@ -23,16 +23,16 @@ import { exerciseState } from "state/Exercises";
 @customElement("d-saved-annotation-input")
 export class SavedAnnotationInput extends ShadowlessLitElement {
     @property({ type: String })
-    name = "";
+    accessor name = "";
     @property({ type: String })
-    value: string;
+    accessor value: string;
     @property( { type: String, attribute: "annotation-text" })
-    annotationText: string;
+    accessor annotationText: string;
     @property({ type: Boolean })
-    disabled = false;
+    accessor disabled = false;
 
     @property({ state: true })
-    __label: string;
+    accessor __label: string;
 
     get label(): string {
         return this.value ? savedAnnotationState.get(parseInt(this.value))?.title : this.__label;