diff --git a/packages/survey-creator-angular/src/components/action-button.component.html b/packages/survey-creator-angular/src/components/action-button.component.html
index a180101f19..eec0b5fb7d 100644
--- a/packages/survey-creator-angular/src/components/action-button.component.html
+++ b/packages/survey-creator-angular/src/components/action-button.component.html
@@ -1,6 +1,18 @@
- {{text}}
- {{text}}
+
+ {{text}}
+ {{text}}
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/survey-creator-angular/src/components/action-button.component.ts b/packages/survey-creator-angular/src/components/action-button.component.ts
index 5b944eb818..bf30162a87 100644
--- a/packages/survey-creator-angular/src/components/action-button.component.ts
+++ b/packages/survey-creator-angular/src/components/action-button.component.ts
@@ -14,6 +14,7 @@ export class ActionButtonComponent extends EmbeddedViewContentComponent {
@Input() disabled: boolean = false;
@Input() text: string = "";
@Input() title: string = "";
+ @Input() iconName: string = "";
@Input() allowBubble: boolean = false;
onClick(event: any) {
this.click();
diff --git a/packages/survey-creator-angular/src/questions/question-link-value.component.html b/packages/survey-creator-angular/src/questions/question-link-value.component.html
index 375b9b5d92..4c305091b3 100644
--- a/packages/survey-creator-angular/src/questions/question-link-value.component.html
+++ b/packages/survey-creator-angular/src/questions/question-link-value.component.html
@@ -1,6 +1,6 @@
+ [disabled]="!model.isClickable" [classes]="model.linkSetButtonCssClasses" [title]="model.tooltip" [iconName]="model.iconName">
{
+interface IActionButtonProps {
+ classes?;
+ click: () => void;
+ selected?: boolean;
+ disabled?: boolean;
+ text?: string;
+ title?: string;
+ iconName?: string;
+ allowBubble?: boolean;
+}
+export class ActionButton extends SurveyElementBase {
renderElement(): JSX.Element {
- let classes = this.props.classes + " svc-action-button";
- if (this.props.selected) {
- classes += " svc-action-button--selected";
+ const classes = new CssClassBuilder()
+ .append(this.props.classes)
+ .append("svc-action-button")
+ .append("svc-action-button--selected", !!this.props.selected)
+ .append("svc-action-button--disabled", !!this.props.disabled)
+ .toString();
+ if (this.props.iconName) {
+ return this.renderIcon(classes);
}
+ return this.renderButtonText(classes);
+ }
+
+ renderButtonText(classes): JSX.Element {
if (this.props.disabled) {
- classes += " svc-action-button--disabled";
return {this.props.text};
}
return (
@@ -31,4 +50,28 @@ export class ActionButton extends SurveyElementBase {
>
);
}
+ renderIcon(classes): JSX.Element {
+ classes += " svc-action-button--icon";
+ if (this.props.disabled) {
+ return ;
+ }
+ return (
+ <>
+ {attachKey2click(
+ {
+ if (!this.props.allowBubble) {
+ e.stopPropagation();
+ }
+ this.props.click();
+ }}
+ title={this.props.title}
+ >
+
+
+ )}
+ >
+ );
+ }
}
+ReactElementFactory.Instance.registerElement("svc-action-button", (props: any) => { return React.createElement(ActionButton, props); });
\ No newline at end of file
diff --git a/packages/survey-creator-react/src/QuestionLinkValue.tsx b/packages/survey-creator-react/src/QuestionLinkValue.tsx
index 279eae3e97..64aef4b363 100644
--- a/packages/survey-creator-react/src/QuestionLinkValue.tsx
+++ b/packages/survey-creator-react/src/QuestionLinkValue.tsx
@@ -36,6 +36,7 @@ export class SurveyQuestionLinkValue extends SurveyQuestionElementBase {
disabled={!this.question.isClickable}
text={this.question.linkValueText}
title={this.question.tooltip}
+ iconName={this.question.iconName}
>
{this.renderClear()}
>
diff --git a/packages/survey-creator-vue/src/components/ActionButton.vue b/packages/survey-creator-vue/src/components/ActionButton.vue
index b35faddf1c..e22546cc31 100644
--- a/packages/survey-creator-vue/src/components/ActionButton.vue
+++ b/packages/survey-creator-vue/src/components/ActionButton.vue
@@ -1,23 +1,42 @@
- {{ text }}
- {{ text }}
+
+ {{ text }}
+ {{ text }}
+
+
+
+
+
diff --git a/packages/survey-creator-vue/src/questions/LinkValue.vue b/packages/survey-creator-vue/src/questions/LinkValue.vue
index d675372ec6..a06f9f5fb3 100644
--- a/packages/survey-creator-vue/src/questions/LinkValue.vue
+++ b/packages/survey-creator-vue/src/questions/LinkValue.vue
@@ -7,6 +7,7 @@
:disabled="!question.isClickable"
:classes="question.linkSetButtonCssClasses"
:title="question.tooltip"
+ :iconName="question.iconName"
>