@pega/dx-component-builder-sdk 23.1.14 → 24.1.10

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/Avatar.tsx.mustache

@@ -1,8 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import  React from 'react';
 import { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Avatar as CosmosAvatar } from '@pega/cosmos-react-core';
+import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
 
 
@@ -15,7 +14,7 @@ interface {{COMPONENT_CLASS_NAME}}AvatarProps extends PConnFieldProps {
 }
 
 function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
-  const { metaObj, showStatus } = props;
+  const { metaObj, showStatus = false } = props;
   const [imageBlobUrl, setImageBlobUrl] = useState(null);
   let userName: string;
   let userIdentifier: string;
@@ -75,14 +74,5 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
   return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} />;
 }
 
-Avatar.propTypes = {
-  metaObj: PropTypes.objectOf(PropTypes.any),
-  showStatus: PropTypes.bool
-};
 
-Avatar.defaultProps = {
-  metaObj: null,
-  showStatus: false
-};
-
-export default Avatar;
+export default withConfiguration(Avatar);

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/Operator.tsx.mustache

@@ -8,11 +8,11 @@ import {
   useElement,
   Progress,
   FormField,
-  useTheme
+  useTheme,
+  withConfiguration
 } from '@pega/cosmos-react-core';
 import { Glimpse } from '@pega/cosmos-react-work';
 import { EmailDisplay } from '@pega/cosmos-react-core';
-import PropTypes from 'prop-types';
 
 import type { PConnFieldProps } from './PConnProps';
 
@@ -31,7 +31,7 @@ interface {{COMPONENT_CLASS_NAME}}OperatorProps extends PConnFieldProps {
 
 let pTarget = null;
 
-export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
+function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
   const { id, name, label, testId, helperText, externalUser, metaObj } = props;
   const [isOpen, setIsOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
@@ -92,7 +92,7 @@ export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
     } else {
       return PCore.getUserApi()
         .getOperatorDetails(id, true)
-        .then((res: any) => {
+        .then(res => {
           if (res.data?.pyOperatorInfo) {
             const fields = [];
             const data = res.data;
@@ -214,20 +214,5 @@ export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
   return comp;
 };
 
-Operator.propTypes = {
-  name: PropTypes.string,
-  id: PropTypes.string,
-  label: PropTypes.string,
-  testId: PropTypes.string,
-  helperText: PropTypes.string,
-  metaObj: PropTypes.object
-};
 
-Operator.defaultProps = {
-  name: '',
-  id: '',
-  label: null,
-  testId: null,
-  helperText: null,
-  metaObj: null
-};
+export default withConfiguration(Operator);

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/demo.stories.tsx.mustache

@@ -1,17 +1,20 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 
 import { configProps, operatorDetails } from './mock';
 
-export default {
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
-  decorators: [withKnobs],
-  component: {{COMPONENT_CLASS_NAME}}
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/
 };
 
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
 if (!window.PCore) {
   window.PCore = {};
 }
@@ -34,17 +37,14 @@ window.PCore.getUserApi = () => {
   };
 };
 
-export const Base{{COMPONENT_CLASS_NAME}} = () => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
     label: configProps.label,
-    createLabel: configProps.createLabel,
-    updateLabel: configProps.updateLabel,
     createOperator: configProps.createOperator,
     updateOperator: configProps.updateOperator,
     createDateTime: configProps.createDateTime,
     updateDateTime: configProps.updateDateTime,
-    hideLabel: configProps.hideLabel,
 
     getPConnect: () => {
       return {
@@ -64,7 +64,13 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
 
 return (
     <>
-      <{{COMPONENT_CLASS_NAME}} {...props} />
+      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
     </>
   );
 };
+
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  createLabel: configProps.createLabel,
+  updateLabel: configProps.updateLabel,
+  hideLabel: configProps.hideLabel
+};

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/index.tsx.mustache

@@ -1,8 +1,8 @@
 
 /* eslint-disable no-nested-ternary */
 import { Fragment } from 'react';
-import { DateTimeDisplay, Card, CardHeader, CardContent, Flex } from '@pega/cosmos-react-core';
-import PropTypes from 'prop-types';
+import { DateTimeDisplay, Card, CardHeader, CardContent, Flex, withConfiguration } from '@pega/cosmos-react-core';
+
 import type { PConnFieldProps } from './PConnProps';
 
 // includes in bundle
@@ -25,7 +25,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   updateDateTime: string;
   resolveDateTime: string;
   hideLabel: boolean;
-
 }
 
 
@@ -33,12 +32,12 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
-export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
+function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   const {
     getPConnect,
-    title,
-    label,
+    title = 'Create operator',
+    label = 'Create operator',
     createLabel,
     updateLabel,
     createOperator,
@@ -68,9 +67,22 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       <CardContent>
 {{! pick new delimiters for mustache }} {{=<% %>=}}
       <Flex container={{ direction: 'row'}}>
-      <Operator label={hideLabel ? undefined : _label} name={user.userName} id={user.userId} getPConnect={getPConnect} value={undefined} validatemessage='' hideLabel={false} readOnly={false} required={false} disabled={false} externalUser={undefined} />
-
-
+            <Operator
+              label={hideLabel ? '' : _label}
+              name={user.userName}
+              id={user.userId}
+              getPConnect={getPConnect}
+              value={undefined}
+              validatemessage=''
+              hideLabel={false}
+              readOnly={false}
+              required={false}
+              disabled={false}
+              externalUser={undefined}
+              metaObj={undefined}
+              testId=''
+              helperText=''
+            />
 <%={{ }}=%>     {{! revert delimiters for mustache }}
       {dateTimeValue && (
         <Fragment>
@@ -93,36 +105,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
 }
 
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
-  "label": "Create operator",
-  "title": "Create operator",
-  createLabel: null,
-  updateLabel: null,
-  createOperator: null,
-  updateOperator: null,
-  createDateTime: null,
-  updateDateTime: null,
-  resolveLabel: null,
-  resolveOperator: null,
-  resolveDateTime: null,
-  hideLabel: false
-};
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  label: PropTypes.string,
-  title: PropTypes.string,
-  createLabel: PropTypes.string,
-  updateLabel: PropTypes.string,
-  resolveLabel: PropTypes.string,
-  createOperator: PropTypes.objectOf(PropTypes.any),
-  updateOperator: PropTypes.objectOf(PropTypes.any),
-  resolveOperator: PropTypes.objectOf(PropTypes.any),
-  createDateTime: PropTypes.string,
-  updateDateTime: PropTypes.string,
-  resolveDateTime: PropTypes.string,
-  hideLabel: PropTypes.bool
-};
+
+
+export default withConfiguration({{COMPONENT_CLASS_NAME}});
 
 // as objects are there in props, shallow comparision fails & re-rendering of comp happens even with
 // same key value pairs in obj. hence using custom comparison function on when to re-render

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/styles.ts.mustache

@@ -1,15 +1,8 @@
-
-// utilizing theming, comment out, if want individual style
-import styled from 'styled-components';
-import { Configuration } from '@pega/cosmos-react-core';
-
-export default styled(Configuration)``;
-
 // individual style, comment out above, and uncomment here and add styles
-// import styled, { css } from 'styled-components';
-//
-// export default styled.div(() => {
-//  return css`
-//    margin: 0px 0;
-//  `;
-// });
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.html.mustache

@@ -5,44 +5,45 @@
     [props]="{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
   ></component-mapper>
 </div>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
 <ng-template #noDisplayMode>
-  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+  <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
       <div class="mat-form-field-infix" *ngIf="showLabel$">
         <span>
           <label class="mat-form-field-label psdk-label-readonly">{{ label$ }}</label>
         </span>
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
-        <mat-checkbox
-          [labelPosition]="'after'"
-          [checked]="isChecked$"
-          [disabled]="bDisabled$"
-          [attr.data-test-id]="testId"
-          [formControl]="fieldControl"
-          (change)="fieldOnChange($event)"
-          (blur)="fieldOnBlur($event)"
-          >{{ caption$ }}</mat-checkbox
-        >
       </div>
-      <div class="mat-form-field-infix" *ngIf="!bReadonly$ && !showLabel$">
+      <div *ngIf="selectionMode === 'multi'; else single">
+        <mat-option *ngFor="let item of listOfCheckboxes" (click)="handleChangeMultiMode($event, item)">
+          <mat-checkbox
+            [labelPosition]="'after'"
+            [checked]="item.selected"
+            [attr.data-test-id]="testId + ':' + item.value"
+            (change)="handleChangeMultiMode($event, item)"
+            (blur)="fieldOnBlur($event)"
+            >{{ item.text ?? item.value }}
+          </mat-checkbox>
+        </mat-option>
+      </div>
+      <ng-template #single>
         <mat-checkbox
           [labelPosition]="'after'"
           [checked]="isChecked$"
-          [disabled]="bDisabled$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
           >{{ caption$ }}</mat-checkbox
         >
-<%={{ }}=%>     {{! revert delimiters for mustache }}
-      </div>
-      <mat-hint *ngIf="helperText">{{ helperText }}</mat-hint>
+        <p *ngIf="helperText">{{ helperText }}</p>
+      </ng-template>
       <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
     </div>
   </div>
 </ng-template>
+<%={{ }}=%>     {{! revert delimiters for mustache }}
 <ng-template #noEdit>
   <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.ts.mustache

@@ -3,10 +3,14 @@ import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatOptionModule } from '@angular/material/core';
+import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { deleteInstruction, insertInstruction, updateNewInstructions } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Checkbox here
@@ -15,6 +19,13 @@ interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   caption?: string;
   trueLabel?: string;
   falseLabel?: string;
+  selectionMode?: string;
+  datasource?: any;
+  selectionKey?: string;
+  selectionList?: any;
+  primaryField: string;
+  readonlyContextList: any;
+  referenceList: string;
 }
 
 @Component({
@@ -22,7 +33,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule,MatOptionModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
@@ -50,6 +61,17 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   trueLabel$?: string;
   falseLabel$?: string;
 
+  selectionMode?: string;
+  datasource?: any;
+  selectionKey?: string;
+  selectionList?: any;
+  primaryField: string;
+  selectedvalues: any;
+  referenceList: string;
+  listOfCheckboxes: any[] = [];
+  actionsApi: any;
+  propName: any;
+
   fieldControl = new FormControl('', null);
 
   constructor(
@@ -69,6 +91,11 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
+    if (this.selectionMode === 'multi' && this.referenceList?.length > 0) {
+      this.pConn$.setReferenceList(this.selectionList);
+      updateNewInstructions(this.pConn$, this.selectionList);
+    }
+
     if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
@@ -111,68 +138,124 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as {{COMPONENT_CLASS_NAME}}Props;
 
-    if (this.configProps$.value != undefined) {
-      this.value$ = this.configProps$.value;
-    }
     this.testId = this.configProps$.testId;
-    this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
+    this.label$ = this.configProps$.label;
+    if (this.label$ != '') {
+      this.showLabel$ = true;
+    }
 
-    this.caption$ = this.configProps$.caption;
-    this.helperText = this.configProps$.helperText;
-    this.trueLabel$ = this.configProps$.trueLabel;
-    this.falseLabel$ = this.configProps$.falseLabel;
-
-    // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
-    setTimeout(() => {
-      if (this.configProps$.required != null) {
-        this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = (this.pConn$.getStateProps() as any).value;
+
+    // multi case
+    this.selectionMode = this.configProps$.selectionMode;
+    if (this.selectionMode === 'multi') {
+      this.referenceList = this.configProps$.referenceList;
+      this.selectionList = this.configProps$.selectionList;
+      this.selectedvalues = this.configProps$.readonlyContextList;
+      this.primaryField = this.configProps$.primaryField;
+
+      this.datasource = this.configProps$.datasource;
+      this.selectionKey = this.configProps$.selectionKey;
+      const listSourceItems = this.datasource?.source ?? [];
+      const dataField: any = this.selectionKey?.split?.('.')[1];
+      const listToDisplay: any[] = [];
+      listSourceItems.forEach(element => {
+        element.selected = this.selectedvalues?.some?.(data => data[dataField] === element.key);
+        listToDisplay.push(element);
+      });
+      this.listOfCheckboxes = listToDisplay;
+    } else {
+      if (this.configProps$.value != undefined) {
+        this.value$ = this.configProps$.value;
       }
-      this.cdRef.detectChanges();
-    });
-
-    if (this.configProps$.visibility != null) {
-      this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
-    }
 
-    // disabled
-    if (this.configProps$.disabled != undefined) {
-      this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
-    }
+      this.caption$ = this.configProps$.caption;
+      this.helperText = this.configProps$.helperText;
+      this.trueLabel$ = this.configProps$.trueLabel;
+      this.falseLabel$ = this.configProps$.falseLabel;
+
+      // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
+      setTimeout(() => {
+        if (this.configProps$.required != null) {
+          this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+        }
+        this.cdRef.detectChanges();
+      });
+
+      if (this.configProps$.visibility != null) {
+        this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
+      }
 
-    if (this.bDisabled$) {
-      this.fieldControl.disable();
-    } else {
-      this.fieldControl.enable();
-    }
+      // disabled
+      if (this.configProps$.disabled != undefined) {
+        this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
+      }
 
-    if (this.configProps$.readOnly != null) {
-      this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
-    }
+      if (this.bDisabled$) {
+        this.fieldControl.disable();
+      } else {
+        this.fieldControl.enable();
+      }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+      if (this.configProps$.readOnly != null) {
+        this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
+        this.fieldControl.disable();
+      }
 
-    if (this.label$ != '') {
-      this.showLabel$ = true;
-    }
+      this.componentReference = (this.pConn$.getStateProps() as any).value;
 
-    // eslint-disable-next-line sonarjs/no-redundant-boolean
-    if (this.value$ === 'true' || this.value$ == true) {
-      this.isChecked$ = true;
-    } else {
-      this.isChecked$ = false;
+      // eslint-disable-next-line sonarjs/no-redundant-boolean
+      if (this.value$ === 'true' || this.value$ == true) {
+        this.isChecked$ = true;
+      } else {
+        this.isChecked$ = false;
+      }
+      // trigger display of error message with field control
+      if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
+        const timer = interval(100).subscribe(() => {
+          this.fieldControl.setErrors({ message: true });
+          this.fieldControl.markAsTouched();
+
+          timer.unsubscribe();
+        });
+      }
     }
   }
 
   fieldOnChange(event: any) {
     event.value = event.checked;
 
-    this.angularPConnectData.actions?.onChange(this, event);
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, event.checked);
   }
 
   fieldOnBlur(event: any) {
-    event.value = event.checked;
-    this.angularPConnectData.actions?.onBlur(this, event);
+    if (this.selectionMode === 'multi') {
+      this.pConn$.getValidationApi().validate(this.selectedvalues, this.selectionList);
+    } else {
+      event.value = event.checked;
+      this.angularPConnectData.actions?.onBlur(this, event);
+    }
+  }
+
+  handleChangeMultiMode(event, element) {
+    if (!element.selected) {
+      insertInstruction(this.pConn$, this.selectionList, this.selectionKey, this.primaryField, {
+        id: element.key,
+        primary: element.text ?? element.value
+      });
+    } else {
+      deleteInstruction(this.pConn$, this.selectionList, this.selectionKey, {
+        id: element.key,
+        primary: element.text ?? element.value
+      });
+    }
+    this.pConn$.clearErrorMessages({
+      property: this.selectionList,
+      category: '',
+      context: ''
+    });
   }
 
   getErrorMessage() {

package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/config.json.mustache

@@ -0,0 +1,64 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "images/pz-url-active.svg",
+  "properties": [
+    {
+      "format": "SELECT",
+      "name": "countryCode",
+      "label": "Country code",
+      "defaultValue": "USA",
+      "source": [
+        {
+          "key": "USA",
+          "value": "United States"
+        },
+        {
+          "key": "CAN",
+          "value": "Canada"
+        },
+        {
+          "key": "AUS",
+          "value": "Australia"
+        },
+        {
+          "key": "JPN",
+          "value": "Japan"
+        },
+        {
+          "key": "IND",
+          "value": "India"
+        },
+        {
+          "key": "TUR",
+          "value": "Turkey"
+        }
+      ]
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "@L $this.label"
+  }
+}