@lblod/ember-rdfa-editor-lblod-plugins 25.2.0 → 25.2.1-dev.0cb4f555effe599d6e481d14bfcb6de7ac15fb66

package/.changeset/quiet-poems-float.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': patch
+---
+
+Use new template uris on variables

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 25.2.1
+
+### Patch Changes
+
+- [#497](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/497) [`2b4b401`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/2b4b4011e3d66c23f232bf6690ca80a5b0a90298) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Redesign variable pills
+
+- [#497](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/497) [`2b4b401`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/2b4b4011e3d66c23f232bf6690ca80a5b0a90298) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Bump ember-rdfa-editor to 10.7.3
+
 ## 25.2.0
 
 ### Minor Changes

package/addon/components/location-plugin/nodeview.gts

@@ -2,7 +2,6 @@ import Component from '@glimmer/component';
 import { service } from '@ember/service';
 import { on } from '@ember/modifier';
 import IntlService from 'ember-intl/services/intl';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 import AuPill, {
   type AuPillSignature,
 } from '@appuniversum/ember-appuniversum/components/au-pill';
@@ -25,14 +24,6 @@ type Signature = {
 export default class AddressNodeviewComponent extends Component<Signature> {
   @service declare intl: IntlService;
 
-  get translations() {
-    return {
-      placeholder: this.intl.t('editor-plugins.address.nodeview.placeholder', {
-        locale: this.args.controller.documentLanguage,
-      }),
-    };
-  }
-
   get address() {
     return this.args.node.attrs.value as Address | null;
   }
@@ -42,26 +33,23 @@ export default class AddressNodeviewComponent extends Component<Signature> {
     return getOutgoingTriple(this.args.node.attrs, EXT('label'))?.object.value;
   }
 
+  get filled() {
+    return !!this.address;
+  }
+
+  get content() {
+    if (this.filled) {
+      return this.address?.formatted;
+    } else {
+      return this.label;
+    }
+  }
+
   <template>
-    <AuPill
-      class='variable atomic'
-      @icon={{PencilIcon}}
-      @iconAlignment='right'
-      ...attributes
-      {{on 'click' @selectNode}}
-    >
-      {{#if this.address}}
-        {{this.address.formatted}}
-      {{else}}
-        <span class='mark-highlight-manual'>
-          {{this.translations.placeholder}}
-        </span>
-      {{/if}}
-      {{#if this.label}}
-        <span class='label'>
-          ({{this.label}})
-        </span>
-      {{/if}}
+    <AuPill class='say-pill atomic' ...attributes {{on 'click' @selectNode}}>
+      <span class='{{unless this.filled "unfilled-variable"}}'>
+        {{this.content}}
+      </span>
     </AuPill>
   </template>
 }

package/addon/components/variable-plugin/address/nodeview.hbs

@@ -1,20 +1,6 @@
 {{! @glint-nocheck: not typesafe yet }}
-<AuPill
-  @icon={{this.PencilIcon}}
-  @iconAlignment='right'
-  class='variable atomic'
-  {{on 'click' @selectNode}}
->
-  {{#if this.address}}
-    {{this.address.formatted}}
-  {{else}}
-    <span class='mark-highlight-manual'>
-      {{this.translations.placeholder}}
-    </span>
-  {{/if}}
-  {{#if this.label}}
-    <span class='label'>
-      ({{this.label}})
-    </span>
-  {{/if}}
+<AuPill class='say-pill atomic' {{on 'click' @selectNode}}>
+  <span class='{{unless this.filled "unfilled-variable"}}'>
+    {{this.content}}
+  </span>
 </AuPill>

package/addon/components/variable-plugin/address/nodeview.ts

@@ -1,7 +1,4 @@
 import Component from '@glimmer/component';
-import { service } from '@ember/service';
-import IntlService from 'ember-intl/services/intl';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 import { PNode, SayController } from '@lblod/ember-rdfa-editor';
 import { Address } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/address-helpers';
@@ -15,26 +12,6 @@ type Args = {
 };
 
 export default class AddressNodeviewComponent extends Component<Args> {
-  PencilIcon = PencilIcon;
-
-  @service declare intl: IntlService;
-
-  get controller() {
-    return this.args.controller;
-  }
-
-  get documentLanguage() {
-    return this.controller.documentLanguage;
-  }
-
-  get translations() {
-    return {
-      placeholder: this.intl.t('editor-plugins.address.nodeview.placeholder', {
-        locale: this.documentLanguage,
-      }),
-    };
-  }
-
   get node() {
     return this.args.node;
   }
@@ -47,4 +24,16 @@ export default class AddressNodeviewComponent extends Component<Args> {
     if (this.address) return '';
     return getOutgoingTriple(this.node.attrs, EXT('label'))?.object.value;
   }
+
+  get filled() {
+    return !!this.address;
+  }
+
+  get content() {
+    if (this.filled) {
+      return this.address?.formatted;
+    } else {
+      return this.label;
+    }
+  }
 }

package/addon/components/variable-plugin/address/utils.ts

@@ -11,8 +11,8 @@ export function replaceSelectionWithAddress(
   controller: SayController,
   label?: string,
 ) {
-  const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
-  const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+  const mappingResource = `http://data.lblod.info/mappings/--ref-uuid4-${uuidv4()}`;
+  const variableInstance = `http://data.lblod.info/variables/--ref-uuid4-${uuidv4()}`;
 
   controller.withTransaction((tr) => {
     tr.replaceSelectionWith(

package/addon/components/variable-plugin/autofilled/insert.gts

@@ -60,15 +60,16 @@ export default class AutoFilledVariableInsertComponent extends Component<Args> {
 
   @action
   insert() {
-    const mappingSubject = `http://data.lblod.info/mappings/${uuidv4()}`;
-    const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+    const mappingSubject = `http://data.lblod.info/mappings/--ref-uuid4-${uuidv4()}`;
+    const variableInstance = `http://data.lblod.info/variables/--ref-uuid4-${uuidv4()}`;
     const variableId = uuidv4();
 
     const placeholder = this.intl.t('variable.autofilled.label', {
       locale: this.documentLanguage,
     });
 
-    const label = this.label != '' ? this.label : placeholder;
+    const label =
+      this.label != '' ? this.label : this.autofillKey || placeholder;
     const node = this.schema.nodes.autofilled_variable.create(
       {
         subject: mappingSubject,
@@ -101,7 +102,7 @@ export default class AutoFilledVariableInsertComponent extends Component<Args> {
       },
 
       this.schema.node('placeholder', {
-        placeholderText: `Autofill ${this.autofillKey}`,
+        placeholderText: label,
       }),
     );
     this.label = '';

package/addon/components/variable-plugin/codelist/insert.ts

@@ -88,8 +88,8 @@ export default class CodelistInsertComponent extends Component<Args> {
 
   @action
   insert() {
-    const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
-    const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+    const mappingResource = `http://data.lblod.info/mappings/--ref-uuid4-${uuidv4()}`;
+    const variableInstance = `http://data.lblod.info/variables/--ref-uuid4-${uuidv4()}`;
     const codelistResource = this.selectedCodelist?.uri;
     const label =
       this.label ??
@@ -137,7 +137,7 @@ export default class CodelistInsertComponent extends Component<Args> {
         ],
       },
       this.schema.node('placeholder', {
-        placeholderText: this.selectedCodelist?.label,
+        placeholderText: label,
       }),
     );
 

package/addon/components/variable-plugin/date/insert-variable.ts

@@ -41,8 +41,8 @@ export default class DateInsertVariableComponent extends Component<Args> {
 
   @action
   insert() {
-    const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
-    const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+    const mappingResource = `http://data.lblod.info/mappings/--ref-uuid4-${uuidv4()}`;
+    const variableInstance = `http://data.lblod.info/variables/--ref-uuid4-${uuidv4()}`;
 
     const defaultLabel = this.intl.t('variable.date.label', {
       locale: this.documentLanguage,

package/addon/components/variable-plugin/date/insert.ts

@@ -36,9 +36,8 @@ export default class DateInsertComponent extends Component<Args> {
 
   @action
   insert() {
-    const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
-
-    const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+    const mappingResource = `http://data.lblod.info/mappings/--ref-uuid4-${uuidv4()}`;
+    const variableInstance = `http://data.lblod.info/variables/--ref-uuid4-${uuidv4()}`;
     const defaultLabel = this.intl.t('variable.date.label', {
       locale: this.documentLanguage,
     });

package/addon/components/variable-plugin/date/nodeview.hbs

@@ -1,14 +1,6 @@
 {{! @glint-nocheck: not typesafe yet }}
-<AuPill
-  @icon={{this.PencilIcon}}
-  @iconAlignment='right'
-  class='variable atomic'
-  {{on 'click' @selectNode}}
->
-  {{this.humanReadableDate}}
-  {{#if this.label}}
-    <span class='label'>
-      ({{this.label}})
-    </span>
-  {{/if}}
+<AuPill class='say-pill atomic' {{on 'click' @selectNode}}>
+  <span class='{{unless this.filled "unfilled-variable"}}'>
+    {{this.humanReadableDate}}
+  </span>
 </AuPill>

package/addon/components/variable-plugin/date/nodeview.ts

@@ -5,15 +5,12 @@ import {
   SayController,
   SayView,
 } from '@lblod/ember-rdfa-editor';
-import IntlService from 'ember-intl/services/intl';
-import { service } from '@ember/service';
 import {
   formatDate,
   validateDateFormat,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/date-helpers';
 import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 type Args = {
   getPos: () => number | undefined;
@@ -26,16 +23,10 @@ type Args = {
 };
 
 export default class DateNodeviewComponent extends Component<Args> {
-  PencilIcon = PencilIcon;
-
-  @service declare intl: IntlService;
-
-  get controller() {
-    return this.args.controller;
-  }
-
-  get documentLanguage() {
-    return this.controller.documentLanguage;
+  get filled() {
+    const value = getOutgoingTriple(this.args.node.attrs, EXT('content'))
+      ?.object.value;
+    return !!value;
   }
 
   get humanReadableDate() {
@@ -49,20 +40,11 @@ export default class DateNodeviewComponent extends Component<Args> {
         return 'Ongeldig formaat';
       }
     } else {
-      return (this.args.node.attrs.onlyDate as boolean)
-        ? this.intl.t('date-plugin.insert.date', {
-            locale: this.documentLanguage,
-          })
-        : this.intl.t('date-plugin.insert.datetime', {
-            locale: this.documentLanguage,
-          });
+      return this.label;
     }
   }
 
   get label() {
-    const value = getOutgoingTriple(this.args.node.attrs, EXT('content'))
-      ?.object.value;
-    if (value) return '';
     return getOutgoingTriple(this.args.node.attrs, EXT('label'))?.object.value;
   }
 }

package/addon/components/variable-plugin/location/insert.ts

@@ -44,22 +44,24 @@ export default class LocationInsertComponent extends Component<Args> {
 
   @action
   insert() {
-    const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
-    const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+    const mappingResource = `http://data.lblod.info/mappings/--ref-uuid4-${uuidv4()}`;
+    const variableInstance = `http://data.lblod.info/variables/--ref-uuid4-${uuidv4()}`;
 
     const placeholder = this.intl.t('variable.location.label', {
       locale: this.documentLanguage,
     });
 
+    const label = this.label ?? placeholder;
+
     const node = this.schema.nodes.location.create(
       {
         mappingResource,
         variableInstance,
-        label: this.label ?? placeholder,
+        label: label,
         source: this.endpoint,
       },
       this.schema.node('placeholder', {
-        placeholderText: placeholder,
+        placeholderText: label,
       }),
     );
 

package/addon/components/variable-plugin/number/insert.ts

@@ -85,9 +85,9 @@ export default class NumberInsertComponent extends Component<Args> {
   insert() {
     if (this.numberVariableError !== '') return;
 
-    const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
+    const mappingResource = `http://data.lblod.info/mappings/--ref-uuid4-${uuidv4()}`;
+    const variableInstance = `http://data.lblod.info/variables/--ref-uuid4-${uuidv4()}`;
     const subject = mappingResource;
-    const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
 
     const defaultLabel = this.intl.t('variable.number.label', {
       locale: this.documentLanguage,

package/addon/components/variable-plugin/number/nodeview.hbs

@@ -4,25 +4,10 @@
   @offsetOptions={{hash mainAxis=3}}
   as |velcro|
 >
-  <AuPill
-    @icon={{this.PencilIcon}}
-    @iconAlignment='right'
-    class='variable atomic'
-    {{velcro.hook}}
-    {{on 'click' @selectNode}}
-  >
-    {{#if this.formattedNumber}}
-      {{this.formattedNumber}}
-    {{else}}
-      <span class='mark-highlight-manual'>
-        {{this.translations.placeholder}}
-      </span>
-    {{/if}}
-    {{#if this.label}}
-      <span class='label'>
-        ({{this.label}})
-      </span>
-    {{/if}}
+  <AuPill class='say-pill atomic' {{velcro.hook}} {{on 'click' @selectNode}}>
+    <span class='{{unless this.filled "unfilled-variable"}}'>
+      {{this.content}}
+    </span>
   </AuPill>
   {{#if this.selected}}
     <div class='say-tooltip say-number-tooltip' {{velcro.loop}}>

package/addon/components/variable-plugin/number/nodeview.ts

@@ -17,7 +17,6 @@ import { isNumber } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 import { numberToWords } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/number-to-words';
 import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 type Args = {
   getPos: () => number | undefined;
@@ -31,7 +30,6 @@ type Args = {
 };
 
 export default class NumberNodeviewComponent extends Component<Args> {
-  PencilIcon = PencilIcon;
   Velcro = Velcro;
 
   @localCopy('number', '') declare inputNumber: string;
@@ -52,14 +50,6 @@ export default class NumberNodeviewComponent extends Component<Args> {
     return this.controller.documentLanguage;
   }
 
-  get translations() {
-    return {
-      placeholder: this.intl.t('variable.number.placeholder', {
-        locale: this.documentLanguage,
-      }),
-    };
-  }
-
   get node() {
     return this.args.node;
   }
@@ -80,6 +70,18 @@ export default class NumberNodeviewComponent extends Component<Args> {
     }
   }
 
+  get filled() {
+    return !!this.formattedNumber;
+  }
+
+  get content() {
+    if (this.filled) {
+      return this.formattedNumber;
+    } else {
+      return this.label;
+    }
+  }
+
   get selected() {
     return this.args.selected;
   }

package/addon/components/variable-plugin/person/insert.ts

@@ -40,8 +40,8 @@ export default class PersonVariableInsertComponent extends Component<Args> {
 
   @action
   insert() {
-    const mappingSubject = `http://data.lblod.info/mappings/${uuidv4()}`;
-    const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+    const mappingSubject = `http://data.lblod.info/mappings/--ref-uuid4-${uuidv4()}`;
+    const variableInstance = `http://data.lblod.info/variables/--ref-uuid4-${uuidv4()}`;
     const variableId = uuidv4();
 
     const placeholder = this.intl.t('variable.person.label', {

package/addon/components/variable-plugin/person/nodeview.hbs

@@ -1,20 +1,6 @@
 {{! @glint-nocheck: not typesafe yet }}
-<AuPill
-  @icon={{this.PencilIcon}}
-  @iconAlignment='right'
-  class='variable atomic'
-  {{on 'click' @selectNode}}
->
-  {{#if this.mandatee}}
-    {{this.mandatee.fullName}}
-  {{else}}
-    <span class='mark-highlight-manual'>
-      {{this.translations.placeholder}}
-    </span>
-  {{/if}}
-  {{#if this.label}}
-    <span class='label'>
-      ({{this.label}})
-    </span>
-  {{/if}}
+<AuPill class='say-pill atomic' {{on 'click' @selectNode}}>
+  <span class='{{unless this.filled "unfilled-variable"}}'>
+    {{this.content}}
+  </span>
 </AuPill>

package/addon/components/variable-plugin/person/nodeview.ts

@@ -1,7 +1,4 @@
 import Component from '@glimmer/component';
-import { service } from '@ember/service';
-import IntlService from 'ember-intl/services/intl';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 import { PNode, SayController } from '@lblod/ember-rdfa-editor';
 import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
@@ -15,26 +12,10 @@ type Args = {
 };
 
 export default class PersonNodeviewComponent extends Component<Args> {
-  PencilIcon = PencilIcon;
-
-  @service declare intl: IntlService;
-
   get controller() {
     return this.args.controller;
   }
 
-  get documentLanguage() {
-    return this.controller.documentLanguage;
-  }
-
-  get translations() {
-    return {
-      placeholder: this.intl.t('variable-plugin.person.nodeview-placeholder', {
-        locale: this.documentLanguage,
-      }),
-    };
-  }
-
   get node() {
     return this.args.node;
   }
@@ -47,4 +28,16 @@ export default class PersonNodeviewComponent extends Component<Args> {
     if (this.mandatee) return '';
     return getOutgoingTriple(this.node.attrs, EXT('label'))?.object.value;
   }
+
+  get filled() {
+    return !!this.mandatee;
+  }
+
+  get content() {
+    if (this.filled) {
+      return this.mandatee?.fullName;
+    } else {
+      return this.label;
+    }
+  }
 }

package/addon/components/variable-plugin/text/insert.ts

@@ -40,8 +40,8 @@ export default class TextVariableInsertComponent extends Component<Args> {
 
   @action
   insert() {
-    const mappingSubject = `http://data.lblod.info/mappings/${uuidv4()}`;
-    const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+    const mappingSubject = `http://data.lblod.info/mappings/--ref-uuid4-${uuidv4()}`;
+    const variableInstance = `http://data.lblod.info/variables/--ref-uuid4-${uuidv4()}`;
     const variableId = uuidv4();
 
     const placeholder = this.intl.t('variable.text.label', {
@@ -78,7 +78,7 @@ export default class TextVariableInsertComponent extends Component<Args> {
         ],
       },
       this.schema.node('placeholder', {
-        placeholderText: 'text',
+        placeholderText: label,
       }),
     );
 

package/addon/components/variable-plugin/variable/nodeview.hbs

@@ -1,9 +1,8 @@
 {{! @glint-nocheck: not typesafe yet }}
 <AuPill
-  @icon={{this.PencilIcon}}
-  @iconAlignment='right'
-  class='variable'
+  class='say-pill'
   {{on 'click' this.onClick}}
+  {{on 'focusout' this.resetVariable}}
 >
   <EmberNode::EmbeddedEditor
     @controller={{@controller}}
@@ -17,9 +16,4 @@
     @decorations={{@decorations}}
     @contentDecorations={{@contentDecorations}}
   />
-  {{#if this.label}}
-    <span class='label'>
-      ({{this.label}})
-    </span>
-  {{/if}}
 </AuPill>

package/addon/components/variable-plugin/variable/nodeview.ts

@@ -3,15 +3,12 @@ import { NodeSelection, ProsePlugin, SayView } from '@lblod/ember-rdfa-editor';
 import { editableNodePlugin } from '@lblod/ember-rdfa-editor/plugins/editable-node';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
 import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 
 export default class VariableNodeViewComponent extends Component<EmberNodeArgs> {
-  PencilIcon = PencilIcon;
-
   @tracked innerView?: SayView;
 
   get plugins(): ProsePlugin[] {
@@ -39,11 +36,23 @@ export default class VariableNodeViewComponent extends Component<EmberNodeArgs>
   initEditor(view: SayView) {
     this.innerView = view;
   }
-
+  @action
+  resetVariable() {
+    if (this.innerView && this.innerView.state.doc.childCount === 0) {
+      const tr = this.innerView.state.tr;
+      const placeholderNode = this.innerView.state.schema.node('placeholder', {
+        placeholderText: this.label,
+      });
+      tr.insert(0, placeholderNode);
+      this.innerView?.dispatch(tr);
+    }
+  }
   get label() {
-    if (this.innerView?.state.doc.firstChild?.type.name !== 'placeholder') {
-      return '';
+    const labelTriple = getOutgoingTriple(this.args.node.attrs, EXT('label'));
+    if (labelTriple) {
+      return labelTriple.object.value;
+    } else {
+      return this.args.node.attrs.label;
     }
-    return getOutgoingTriple(this.args.node.attrs, EXT('label'))?.object.value;
   }
 }

package/addon/plugins/variable-plugin/variables/autofilled.ts

@@ -22,7 +22,7 @@ import {
   parseVariableInstance,
   parseVariableType,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/variable-attribute-parsers';
-import AutofilledNodeViewComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/autofilled/nodeview';
+import NodeViewComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/variable/nodeview';
 import type { ComponentLike } from '@glint/template';
 import { hasOutgoingNamedNodeTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 import { renderRdfaAware } from '@lblod/ember-rdfa-editor/core/schema';
@@ -139,7 +139,7 @@ const toDOM = (node: PNode): DOMOutputSpec => {
 
 const emberNodeConfig: EmberNodeConfig = {
   name: 'autofilled-variable',
-  component: AutofilledNodeViewComponent as unknown as ComponentLike,
+  component: NodeViewComponent as unknown as ComponentLike,
   inline: true,
   group: 'inline variable',
   content: 'inline*',