@crowdfarming/oliva-ds 1.96.0 → 1.97.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7910,28 +7910,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
7910
7910
|
}] });
|
|
7911
7911
|
|
|
7912
7912
|
class TextareaComponent {
|
|
7913
|
-
label = '';
|
|
7914
|
-
|
|
7915
|
-
|
|
7916
|
-
|
|
7917
|
-
|
|
7918
|
-
|
|
7919
|
-
|
|
7920
|
-
|
|
7921
|
-
|
|
7922
|
-
|
|
7923
|
-
|
|
7924
|
-
|
|
7925
|
-
|
|
7926
|
-
|
|
7927
|
-
|
|
7928
|
-
|
|
7929
|
-
|
|
7930
|
-
|
|
7913
|
+
label = input('');
|
|
7914
|
+
defaultValue = input('');
|
|
7915
|
+
placeholder = input('');
|
|
7916
|
+
helperText = input('');
|
|
7917
|
+
error = input(false);
|
|
7918
|
+
success = input(false);
|
|
7919
|
+
successText = input('');
|
|
7920
|
+
alertText = input('');
|
|
7921
|
+
name = input('');
|
|
7922
|
+
disabled = input(false);
|
|
7923
|
+
readonly = input(false);
|
|
7924
|
+
required = input(false);
|
|
7925
|
+
optionalLabel = input('');
|
|
7926
|
+
isLoading = input(false);
|
|
7927
|
+
size = input('md');
|
|
7928
|
+
fullWidth = input(false);
|
|
7929
|
+
maxCharacters = input();
|
|
7930
|
+
emitValue = output();
|
|
7931
|
+
value = signal('');
|
|
7932
|
+
/** Disabled state pushed by Angular forms via setDisabledState(). */
|
|
7933
|
+
disabledByForm = signal(false);
|
|
7934
|
+
isDisabled = computed(() => this.disabled() || this.disabledByForm());
|
|
7935
|
+
displayValue = computed(() => this.isLoading() ? '' : this.value());
|
|
7936
|
+
inputClass = computed(() => [
|
|
7937
|
+
'c-text-input__input',
|
|
7938
|
+
`c-text-input__input--${this.size()}`,
|
|
7939
|
+
this.error() ? 'is-error' : this.success() ? 'is-success' : 'is-default',
|
|
7940
|
+
this.isDisabled() ? 'is-disabled' : '',
|
|
7941
|
+
this.readonly() ? 'is-readonly' : '',
|
|
7942
|
+
this.isLoading() ? 'is-loading' : '',
|
|
7943
|
+
]
|
|
7944
|
+
.filter(Boolean)
|
|
7945
|
+
.join(' '));
|
|
7946
|
+
ariaDescribedBy = computed(() => this.helperText() ? 'text-input-helper' : null);
|
|
7931
7947
|
onChangeFn = () => { };
|
|
7932
7948
|
onTouchedFn = () => { };
|
|
7949
|
+
ngOnInit() {
|
|
7950
|
+
// Seed the initial value only when the form hasn't already provided one.
|
|
7951
|
+
if (this.defaultValue() && !this.value()) {
|
|
7952
|
+
this.value.set(this.defaultValue());
|
|
7953
|
+
}
|
|
7954
|
+
}
|
|
7933
7955
|
writeValue(value) {
|
|
7934
|
-
this.
|
|
7956
|
+
this.value.set(value ?? '');
|
|
7935
7957
|
}
|
|
7936
7958
|
registerOnChange(fn) {
|
|
7937
7959
|
this.onChangeFn = fn;
|
|
@@ -7940,94 +7962,42 @@ class TextareaComponent {
|
|
|
7940
7962
|
this.onTouchedFn = fn;
|
|
7941
7963
|
}
|
|
7942
7964
|
setDisabledState(isDisabled) {
|
|
7943
|
-
this.
|
|
7944
|
-
}
|
|
7945
|
-
get inputClass() {
|
|
7946
|
-
return [
|
|
7947
|
-
'c-text-input__input',
|
|
7948
|
-
`c-text-input__input--${this.size}`,
|
|
7949
|
-
this.error ? 'is-error' : this.success ? 'is-success' : 'is-default',
|
|
7950
|
-
this.disabled ? 'is-disabled' : '',
|
|
7951
|
-
this.readonly ? 'is-readonly' : '',
|
|
7952
|
-
this.isLoading ? 'is-loading' : '',
|
|
7953
|
-
].filter(Boolean);
|
|
7954
|
-
}
|
|
7955
|
-
get ariaDescribedBy() {
|
|
7956
|
-
return this.helperText ? 'text-input-helper' : null;
|
|
7965
|
+
this.disabledByForm.set(isDisabled);
|
|
7957
7966
|
}
|
|
7958
7967
|
onInput(event) {
|
|
7959
7968
|
const input = event.target;
|
|
7960
7969
|
let value = input.value;
|
|
7961
|
-
|
|
7962
|
-
|
|
7970
|
+
const max = this.maxCharacters();
|
|
7971
|
+
if (max && value.length > max) {
|
|
7972
|
+
value = value.substring(0, max);
|
|
7963
7973
|
input.value = value;
|
|
7964
7974
|
}
|
|
7965
|
-
this.
|
|
7966
|
-
this.onChangeFn(
|
|
7967
|
-
this.emitValue.emit(
|
|
7975
|
+
this.value.set(value);
|
|
7976
|
+
this.onChangeFn(value);
|
|
7977
|
+
this.emitValue.emit(value);
|
|
7968
7978
|
}
|
|
7969
7979
|
onBlur() {
|
|
7970
7980
|
this.onTouchedFn();
|
|
7971
7981
|
}
|
|
7972
7982
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7973
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
7983
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TextareaComponent, isStandalone: true, selector: "lib-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, successText: { classPropertyName: "successText", publicName: "successText", isSignal: true, isRequired: false, transformFunction: null }, alertText: { classPropertyName: "alertText", publicName: "alertText", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { emitValue: "emitValue" }, providers: [
|
|
7974
7984
|
{
|
|
7975
7985
|
provide: NG_VALUE_ACCESSOR,
|
|
7976
7986
|
useExisting: forwardRef(() => TextareaComponent),
|
|
7977
7987
|
multi: true,
|
|
7978
7988
|
},
|
|
7979
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n
|
|
7989
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth()\">\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [required]=\"required()\"\n [text]=\"label()\"\n [textOptional]=\"optionalLabel()\"\n [isLoading]=\"isLoading()\"\n ></lib-input-label>\n }\n\n <textarea\n [class]=\"inputClass()\"\n [placeholder]=\"isLoading() ? '' : placeholder()\"\n [disabled]=\"isDisabled() || isLoading()\"\n [readonly]=\"readonly()\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-label]=\"label()\"\n [required]=\"required()\"\n [value]=\"displayValue()\"\n [attr.maxlength]=\"maxCharacters() || null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [name]=\"name()\"\n ></textarea>\n\n @if (helperText() && !error() && !success()) {\n <span id=\"text-input-helper\" class=\"c-text-input__helper\">\n <lib-helper-text\n [text]=\"helperText()\"\n [isLoading]=\"isLoading()\"\n ></lib-helper-text>\n </span>\n } @if (alertText() && error()) {\n <span class=\"c-text-input__alert\">\n <lib-helper-text\n variant=\"danger\"\n [text]=\"alertText()\"\n [isLoading]=\"isLoading()\"\n ></lib-helper-text>\n </span>\n } @if (successText() && success()) {\n <span class=\"c-text-input__success\">\n <lib-helper-text\n variant=\"success\"\n [text]=\"successText()\"\n [isLoading]=\"isLoading()\"\n ></lib-helper-text>\n </span>\n }\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{--input-padding-y: var(--space-component-padding-md);--input-padding-x: var(--space-component-padding-lg);border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--input-padding-y) var(--input-padding-x);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-sm)}.c-text-input__input--md{--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-strong)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading", "textOptional"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
|
|
7980
7990
|
}
|
|
7981
7991
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
7982
7992
|
type: Component,
|
|
7983
|
-
args: [{ selector: 'lib-textarea',
|
|
7984
|
-
CommonModule,
|
|
7985
|
-
ReactiveFormsModule,
|
|
7986
|
-
InputLabelComponent,
|
|
7987
|
-
IconComponent,
|
|
7988
|
-
HelperTextComponent,
|
|
7989
|
-
], providers: [
|
|
7993
|
+
args: [{ selector: 'lib-textarea', imports: [ReactiveFormsModule, InputLabelComponent, HelperTextComponent], providers: [
|
|
7990
7994
|
{
|
|
7991
7995
|
provide: NG_VALUE_ACCESSOR,
|
|
7992
7996
|
useExisting: forwardRef(() => TextareaComponent),
|
|
7993
7997
|
multi: true,
|
|
7994
7998
|
},
|
|
7995
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n
|
|
7996
|
-
}]
|
|
7997
|
-
type: Input
|
|
7998
|
-
}], placeholder: [{
|
|
7999
|
-
type: Input
|
|
8000
|
-
}], helperText: [{
|
|
8001
|
-
type: Input
|
|
8002
|
-
}], error: [{
|
|
8003
|
-
type: Input
|
|
8004
|
-
}], success: [{
|
|
8005
|
-
type: Input
|
|
8006
|
-
}], successText: [{
|
|
8007
|
-
type: Input
|
|
8008
|
-
}], alertText: [{
|
|
8009
|
-
type: Input
|
|
8010
|
-
}], name: [{
|
|
8011
|
-
type: Input
|
|
8012
|
-
}], disabled: [{
|
|
8013
|
-
type: Input
|
|
8014
|
-
}], readonly: [{
|
|
8015
|
-
type: Input
|
|
8016
|
-
}], required: [{
|
|
8017
|
-
type: Input
|
|
8018
|
-
}], optionalLabel: [{
|
|
8019
|
-
type: Input
|
|
8020
|
-
}], isLoading: [{
|
|
8021
|
-
type: Input
|
|
8022
|
-
}], size: [{
|
|
8023
|
-
type: Input
|
|
8024
|
-
}], fullWidth: [{
|
|
8025
|
-
type: Input
|
|
8026
|
-
}], maxCharacters: [{
|
|
8027
|
-
type: Input
|
|
8028
|
-
}], emitValue: [{
|
|
8029
|
-
type: Output
|
|
8030
|
-
}] } });
|
|
7999
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth()\">\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [required]=\"required()\"\n [text]=\"label()\"\n [textOptional]=\"optionalLabel()\"\n [isLoading]=\"isLoading()\"\n ></lib-input-label>\n }\n\n <textarea\n [class]=\"inputClass()\"\n [placeholder]=\"isLoading() ? '' : placeholder()\"\n [disabled]=\"isDisabled() || isLoading()\"\n [readonly]=\"readonly()\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-label]=\"label()\"\n [required]=\"required()\"\n [value]=\"displayValue()\"\n [attr.maxlength]=\"maxCharacters() || null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [name]=\"name()\"\n ></textarea>\n\n @if (helperText() && !error() && !success()) {\n <span id=\"text-input-helper\" class=\"c-text-input__helper\">\n <lib-helper-text\n [text]=\"helperText()\"\n [isLoading]=\"isLoading()\"\n ></lib-helper-text>\n </span>\n } @if (alertText() && error()) {\n <span class=\"c-text-input__alert\">\n <lib-helper-text\n variant=\"danger\"\n [text]=\"alertText()\"\n [isLoading]=\"isLoading()\"\n ></lib-helper-text>\n </span>\n } @if (successText() && success()) {\n <span class=\"c-text-input__success\">\n <lib-helper-text\n variant=\"success\"\n [text]=\"successText()\"\n [isLoading]=\"isLoading()\"\n ></lib-helper-text>\n </span>\n }\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{--input-padding-y: var(--space-component-padding-md);--input-padding-x: var(--space-component-padding-lg);border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--input-padding-y) var(--input-padding-x);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-sm)}.c-text-input__input--md{--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-strong)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"] }]
|
|
8000
|
+
}] });
|
|
8031
8001
|
|
|
8032
8002
|
class ThumbnailComponent {
|
|
8033
8003
|
size = 'xl';
|