# تعريفات الأدوات

في هذه الصفحة ستجد جميع تعريفات الفئة الأصلية التي يمكن أن يرث منها الأبناء ليصبحوا ngSurvey widget.

```javascript
class NGSWidget {
  static get type() {
    return "NGSWidget"
  }

  /* قالب Html سيتم إنشاؤه قبل إنشاء الفئة
     سيتم إضافة uniqueId لاحقة إلى جميع المعرفات وأسماء فئات css
     المقدمة أثناء إنشاء widget */
  static get template() {}

  /* يُستخدم قالب Html أثناء وقت تصميم النموذج
     إذا كانت القيمة null فسيتم عرض قالب widget الفعلي */
  static get designTimeTemplate() {}

  /* قالب Html يُستخدم عند عرض النموذج للطباعة */
  static get printTemplate() {}

  /* نمط css مضمن سيُضاف إلى الصفحة
     ملاحظة أن أسماء فئات النمط ستخضع للنطاق
     إلى المعرف الفريد لـ widget 
  */
  static get style() {}

  /* كود javascript مضمن سيُضاف إلى 
     الصفحة طالما أن widget */
  static get script() {}

  static get selectionWidget() {
    return true;
  }

  /* هل يدعم هذا widget التسمية، فالتسمية هي النص الذي يمكن لمسؤول
  النموذج إدخاله باستخدام تصميم النموذج والذي سيتم عرضه
  قبل قالب widget */
  static get hasLabel() {
    return true;
  }

  /* يعرض مربع رسالة الخطأ الأصلي في ngsurvey 
     أسفل العنصر التحكم
  */
  static get displayErrorMessage() {
    return true;
  }

  /* سيضع بادئة على جميع فئات CSS من نمط widget
     بقيمة فريدة لتجنب التعارضات إذا كانت مكونات أخرى 
     قد سجلت هذه الفئات بالاسم نفسه.
     ملاحظة أنه لن يقوم بتحليل تبعيات CSS الخارجية.
     0 : بدون encapsulation
     1 : Shadow CSS - معالج البادئة الأصلي في ngSurvey
  */
  static get encapsulationMode() {
    return 1;
  }

  /* يتيح تعيين الإجابة كإجابة مطلوبة أو غير مطلوبة
   من صفحة إعدادات الإجابة لجعل
   إجابة widget مطلوبة أثناء الاستبيان
  */
  static get required() {
    return false;
  }

  /* الخصائص التي يمكن تعيينها من مصمم النموذج لكل
   إجابة باستخدام هذا widget كنوع إجابة في إعدادات الإجابة */
  static get propertiesDef() {}

  /* تبعيات كود javascript الخارجية التي سيتم تحميلها
   قبل إنشاء widget */
  static get jsDependencies() {}

  /* تبعيات كود css الخارجية التي سيتم تحميلها
   قبل إنشاء widget */
  static get cssDependencies() {}

  /*
    setAnswer; // دالة callback لنشر قيمة من widget مثل: answerPosted(widgetAnswerValue)
    valueChanges$; // Observable يعيد قيمة widget
      containerElement;
      labelElement;
      respondentAnswers = [];
      uniqueId;
      answerContext;
      formContext;
      sectionIndex;
      properties;
      initialValue;
      label;
    */

  /* containerElement : عنصر DOM يحتفظ بالقالب
     labelElement: عنصر DOM يحتفظ بالتسمية
     answerContext: سياق الإجابة الذي يوفر طرق مساعدة للتفاعل مع الإجابة
     formContext: سياق النموذج الذي يوفر طرق مساعدة للتفاعل مع النموذج
     uniqueId: يجب استخدامه مع query كلاحقة لمعرفة معرفات عناصر القالب أو فئات css
     properties : قيم خصائص خاصة بكل instance
     setAnswer: دالة ستعيّن قيمة النص المعطاة لـ widget setAnswer(textVal) 
     valueChanges: مراقبة أي تغييرات في قيمة widget
     */
  constructor(containerElement, labelElement, answerContext, formContext,
    sectionIndex, uniqueId, properties, setAnswerCallback, valueChanges$) {
  }

  /* تم إنشاء widget بالقالب لكنه لم يُضف بعد إلى DOM
     ولكن خصائصه تم تعيينها بالفعل 
  */
  build() {}

  /* تم إنشاء widget بالقالب وقد أُضيف إلى DOM
     وتم تعيين خصائصه 
  */
  init() {}

  /* اشترك في observable واحتفظ
     بمرجع لإلغاء الاشتراك تلقائيًا
     عند التخلص من widget
  */
  safeSubscribe(obs, next, error, complete);

  // Beta غير مخصص للإنتاج
  remoteValidate();

  // Beta  غير مخصص للإنتاج
  remoteValidateProd();

  getValidationParam(name, value);

  /* 
    يعيد خصائص widget 
    في دالة callback
  */
  getProperties$(propsCallback);

  getLabel$(labelCallback);

  getValue$(valueCallback);

  isDisabled$(stateCallback);

  isSelected$(selectionCallback);

  getRenderMode$(renderModeCallback);

  getLanguage$(languageCallback);

  getRespondentAnswers$(respondentAnswersCallBack);

  getAnswers$(answersCallBack);

  getQuestions$(questionsCallBack);

  /* سيتم استدعاؤها بواسطة النموذج لمعرفة ما إذا كانت القيمة صحيحة
     إذا لم تكن صحيحة، يجب أن تُرجع '' (لن تظهر رسالة خطأ) أو رسالة الخطأ المراد عرضها
     إذا كانت صحيحة، أرجع null */
  isValid();

  /* يعيد عنصر html من dom تم إنشاؤه 
     من قالب widget وسيطابق المعرفات ذات اللاحقة الخاصة بـ 
     قالب widget
  */
  getWidgetElementById(id);

  /*
    Queryselector فقط على حاوية widget.
    يضيف المعرف الفريد لـ widget إلى المعرفات (#) للمطابقة مع 
    المعرفات المحلية ذات اللاحقة في قالب widget 
  */
  widgetQuerySelector(selector);

  /*
    QueryselectorAll فقط على حاوية widget.
    يضيف المعرف الفريد لـ widget إلى المعرفات (#) للمطابقة مع 
    المعرفات المحلية ذات اللاحقة في قالب widget 
  */
  widgetQuerySelectorAll(selector);
  }


  submitForm();
  nextPage();
  previousPage();
  nextQuestion();
  previousQuestion();
  saveProgress(silent);

  /* ينظّف كل ما يحتاج إلى تنظيف
     قبل تدمير widget من DOM */
  dispose() {}

  _disposeSubscribers() {
    if (this._subscribers) {
      this._subscribers.forEach(subscriber => {
        if (subscriber) {
          subscriber.unsubscribe();
        }
      })
      this._subscribers = [];
    }
  }

  /* يربط أحداث widget للحفاظ على 
    تزامن حالتها */
  _hookEvents() {}

  /* طريقة داخلية يجب عدم تجاوزها */
  _dispose() {}

  /*  _value;
    _subscribers = [];*/
}

class NGSSelectionWidget extends NGSWidget {
  static get type() {
    return "NGSSelectionWidget"
  }
  /* containerElement : عنصر DOM يحتفظ بالقالب
     labelElement: عنصر DOM يحتفظ بالتسمية
     answerContext: سياق الإجابة الذي يوفر طرق مساعدة للتفاعل مع الإجابة
     formContext: سياق النموذج الذي يوفر طرق مساعدة للتفاعل مع النموذج
     uniqueId: يجب استخدامه مع query كلاحقة لمعرفة معرفات عناصر القالب أو فئات css
     selectionId: هو المعرف الفريد لمجموعة التحديد
     selectAnswerCallback: دالة سيتم استدعاؤها عندما يجب اختيار إجابة من widget
     selected$: observable يعيد true / false عندما يتم تحديد الإجابة أو إلغاء تحديدها
     properties : قيم خصائص خاصة بكل instance
     setAnswer: دالة ستعيّن قيمة النص المعطاة لـ widget setAnswer(textVal) */
  constructor(containerElement, labelElement, answerContext, formContext,
    sectionIndex, uniqueId, selectionId, selected, selectedAnswerCallback,
    selected$, properties, setAnswerCallback, valueChanges$) {
    super(containerElement, labelElement, answerContext,
      formContext, sectionIndex, uniqueId, properties, setAnswerCallback, valueChanges$)
}
```

```javascript
export class AnswerContext {
  constructor(
    // الإجابة المرتبطة بذلك widget
    private answer: Answer,
    // الخصائص المخصصة التي حدّدها المستخدم لهذا widget  
    private propertie$: Observable<any>,
    // وضع العرض الحالي لـ widget مثل: DesignTime (design)، Standard (running)
    private renderMode$: BehaviorSubject<ControlRenderMode>,
    // هل يجب تعطيل widget؟
    private disabled$: BehaviorSubject<boolean>,
    // هل التسمية مفعلة
    private showLabel: boolean,
    // عنصر تحكم form في Angular يحتفظ بالقيمة الخاصة بـ a
    private formControl: FormControl,
    // القيمة الأولية للإجابة، وقد تكون القيمة الافتراضية المعينة 
    // من قبل مسؤول الاستبيان أو إجابة المستجيب السابقة إذا كان الاستبيان
    // يتم استئنافه بواسطة المستجيب
    private initialValue: string,
    // نص التسمية للإجابة، سيبث observable القيمة الجديدة
    // إذا تغيرت القيمة في استبيان متعدد اللغات
    private label$: Observable<string>) { }
}
```

```javascript
export class FormContext {
  constructor(
    // المستجيب الفعلي للاستبيان
    private respondent$: Observable<Respondent>,
    // إجابات المستجيب الفعلية في الاستبيان، وسيبث observable 
    // أي تحديث جديد للإجابة في الوقت الفعلي
    private respondentAnswers$: Observable<RespondentAnswer[]>,    
    // إجابات الاستبيان
    private answers$: Observable<Answer[]>,
    // أسئلة الاستبيان
    private questions$: Observable<Question[]>,
    // لغة المستجيب الفعلية في الاستبيانات متعددة اللغات
    private language$: Observable<Language>,
    // طريقة مساعدة للوصول إلى angular http client
    private httpClient: HttpClient,
    // خدمات http الداخلية لإجابة ngSurvey
    private answerService: AnswerService) { }
}
```