@pepperi-addons/ngx-composite-lib 0.0.8 → 0.0.10-beta.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.
- package/bundles/pepperi-addons-ngx-composite-lib-color-settings.umd.js +122 -122
- package/bundles/pepperi-addons-ngx-composite-lib-draggable-item.umd.js +112 -0
- package/bundles/pepperi-addons-ngx-composite-lib-draggable-item.umd.js.map +1 -0
- package/bundles/pepperi-addons-ngx-composite-lib-generic-list.umd.js +535 -535
- package/bundles/pepperi-addons-ngx-composite-lib-generic-list.umd.js.map +1 -1
- package/bundles/pepperi-addons-ngx-composite-lib-group-buttons-settings.umd.js +219 -0
- package/bundles/pepperi-addons-ngx-composite-lib-group-buttons-settings.umd.js.map +1 -0
- package/bundles/pepperi-addons-ngx-composite-lib-shadow-settings.umd.js +117 -117
- package/bundles/pepperi-addons-ngx-composite-lib.umd.js +29 -29
- package/color-settings/color-settings.component.d.ts +22 -22
- package/color-settings/color-settings.model.d.ts +5 -5
- package/color-settings/color-settings.module.d.ts +12 -12
- package/color-settings/pepperi-addons-ngx-composite-lib-color-settings.d.ts +5 -5
- package/color-settings/public-api.d.ts +3 -3
- package/draggable-item/draggable-item.component.d.ts +11 -0
- package/draggable-item/draggable-item.module.d.ts +11 -0
- package/draggable-item/package.json +13 -0
- package/draggable-item/pepperi-addons-ngx-composite-lib-draggable-item.d.ts +5 -0
- package/draggable-item/public-api.d.ts +2 -0
- package/esm2015/color-settings/color-settings.component.js +80 -80
- package/esm2015/color-settings/color-settings.model.js +8 -8
- package/esm2015/color-settings/color-settings.module.js +39 -39
- package/esm2015/color-settings/pepperi-addons-ngx-composite-lib-color-settings.js +4 -4
- package/esm2015/color-settings/public-api.js +6 -6
- package/esm2015/draggable-item/draggable-item.component.js +40 -0
- package/esm2015/draggable-item/draggable-item.module.js +36 -0
- package/esm2015/draggable-item/pepperi-addons-ngx-composite-lib-draggable-item.js +5 -0
- package/esm2015/draggable-item/public-api.js +6 -0
- package/esm2015/generic-list/generic-list.component.js +164 -164
- package/esm2015/generic-list/generic-list.model.js +1 -1
- package/esm2015/generic-list/generic-list.module.js +51 -51
- package/esm2015/generic-list/pepperi-addons-ngx-composite-lib-generic-list.js +4 -4
- package/esm2015/generic-list/public-api.js +6 -6
- package/esm2015/group-buttons-settings/group-buttons-settings.component.js +132 -0
- package/esm2015/group-buttons-settings/group-buttons-settings.model.js +2 -0
- package/esm2015/group-buttons-settings/group-buttons-settings.module.js +47 -0
- package/esm2015/group-buttons-settings/pepperi-addons-ngx-composite-lib-group-buttons-settings.js +5 -0
- package/esm2015/group-buttons-settings/public-api.js +7 -0
- package/esm2015/ngx-composite-lib.module.js +25 -25
- package/esm2015/pepperi-addons-ngx-composite-lib.js +4 -4
- package/esm2015/public-api.js +4 -4
- package/esm2015/shadow-settings/pepperi-addons-ngx-composite-lib-shadow-settings.js +4 -4
- package/esm2015/shadow-settings/public-api.js +6 -6
- package/esm2015/shadow-settings/shadow-settings.component.js +72 -72
- package/esm2015/shadow-settings/shadow-settings.model.js +7 -7
- package/esm2015/shadow-settings/shadow-settings.module.js +43 -43
- package/fesm2015/pepperi-addons-ngx-composite-lib-color-settings.js +112 -112
- package/fesm2015/pepperi-addons-ngx-composite-lib-draggable-item.js +84 -0
- package/fesm2015/pepperi-addons-ngx-composite-lib-draggable-item.js.map +1 -0
- package/fesm2015/pepperi-addons-ngx-composite-lib-generic-list.js +192 -192
- package/fesm2015/pepperi-addons-ngx-composite-lib-generic-list.js.map +1 -1
- package/fesm2015/pepperi-addons-ngx-composite-lib-group-buttons-settings.js +187 -0
- package/fesm2015/pepperi-addons-ngx-composite-lib-group-buttons-settings.js.map +1 -0
- package/fesm2015/pepperi-addons-ngx-composite-lib-shadow-settings.js +107 -107
- package/fesm2015/pepperi-addons-ngx-composite-lib.js +26 -26
- package/generic-list/generic-list.component.d.ts +45 -45
- package/generic-list/generic-list.model.d.ts +11 -11
- package/generic-list/generic-list.module.d.ts +15 -15
- package/generic-list/pepperi-addons-ngx-composite-lib-generic-list.d.ts +5 -5
- package/generic-list/public-api.d.ts +3 -3
- package/group-buttons-settings/group-buttons-settings.component.d.ts +32 -0
- package/group-buttons-settings/group-buttons-settings.model.d.ts +1 -0
- package/group-buttons-settings/group-buttons-settings.module.d.ts +14 -0
- package/group-buttons-settings/package.json +13 -0
- package/group-buttons-settings/pepperi-addons-ngx-composite-lib-group-buttons-settings.d.ts +5 -0
- package/group-buttons-settings/public-api.d.ts +3 -0
- package/ngx-composite-lib.module.d.ts +6 -6
- package/package.json +1 -1
- package/pepperi-addons-ngx-composite-lib.d.ts +5 -5
- package/public-api.d.ts +1 -1
- package/shadow-settings/pepperi-addons-ngx-composite-lib-shadow-settings.d.ts +5 -5
- package/shadow-settings/public-api.d.ts +3 -3
- package/shadow-settings/shadow-settings.component.d.ts +23 -23
- package/shadow-settings/shadow-settings.model.d.ts +7 -7
- package/shadow-settings/shadow-settings.module.d.ts +13 -13
- package/src/assets/i18n/en.ngx-composite-lib.json +24 -1
|
@@ -29,136 +29,136 @@
|
|
|
29
29
|
var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
|
|
30
30
|
var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
|
|
31
31
|
|
|
32
|
-
var PepColorSettings = /** @class */ (function () {
|
|
33
|
-
function PepColorSettings() {
|
|
34
|
-
this.use = false;
|
|
35
|
-
this.value = 'hsl(0, 0%, 57%)';
|
|
36
|
-
this.opacity = 50;
|
|
37
|
-
// useGradientOverlay?: boolean = true;
|
|
38
|
-
}
|
|
39
|
-
return PepColorSettings;
|
|
32
|
+
var PepColorSettings = /** @class */ (function () {
|
|
33
|
+
function PepColorSettings() {
|
|
34
|
+
this.use = false;
|
|
35
|
+
this.value = 'hsl(0, 0%, 57%)';
|
|
36
|
+
this.opacity = 50;
|
|
37
|
+
// useGradientOverlay?: boolean = true;
|
|
38
|
+
}
|
|
39
|
+
return PepColorSettings;
|
|
40
40
|
}());
|
|
41
41
|
|
|
42
|
-
var ColorSettingsComponent = /** @class */ (function () {
|
|
43
|
-
function ColorSettingsComponent(pepColorService) {
|
|
44
|
-
this.pepColorService = pepColorService;
|
|
45
|
-
this.title = '';
|
|
46
|
-
this._color = new PepColorSettings();
|
|
47
|
-
this.colorChange = new i0.EventEmitter();
|
|
48
|
-
}
|
|
49
|
-
Object.defineProperty(ColorSettingsComponent.prototype, "color", {
|
|
50
|
-
get: function () {
|
|
51
|
-
return this._color;
|
|
52
|
-
},
|
|
53
|
-
set: function (value) {
|
|
54
|
-
if (!value) {
|
|
55
|
-
this._color = new PepColorSettings();
|
|
56
|
-
}
|
|
57
|
-
else {
|
|
58
|
-
this._color = value;
|
|
59
|
-
}
|
|
60
|
-
},
|
|
61
|
-
enumerable: false,
|
|
62
|
-
configurable: true
|
|
63
|
-
});
|
|
64
|
-
ColorSettingsComponent.prototype.ngOnInit = function () {
|
|
65
|
-
};
|
|
66
|
-
ColorSettingsComponent.prototype.getRGBAcolor = function (colorObj, opac) {
|
|
67
|
-
if (opac === void 0) { opac = null; }
|
|
68
|
-
var rgba = 'rgba(255,255,255,0)';
|
|
69
|
-
if (colorObj) {
|
|
70
|
-
var color = colorObj.value;
|
|
71
|
-
var opacity = opac != null ? opac : colorObj.opacity;
|
|
72
|
-
opacity = opacity > 0 ? opacity / 100 : 0;
|
|
73
|
-
var hsl = this.pepColorService.hslString2hsl(color);
|
|
74
|
-
var rgb = this.pepColorService.hsl2rgb(hsl);
|
|
75
|
-
rgba = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ')';
|
|
76
|
-
}
|
|
77
|
-
return rgba;
|
|
78
|
-
};
|
|
79
|
-
ColorSettingsComponent.prototype.raiseColorChange = function () {
|
|
80
|
-
this.colorChange.emit(this.color);
|
|
81
|
-
};
|
|
82
|
-
ColorSettingsComponent.prototype.getSliderBackground = function () {
|
|
83
|
-
var alignTo = 'right';
|
|
84
|
-
var colorObj = new PepColorSettings();
|
|
85
|
-
colorObj.value = this.color.value;
|
|
86
|
-
colorObj.opacity = 100;
|
|
87
|
-
var gradStr = this.getRGBAcolor(colorObj, 0) + ' , ' + this.getRGBAcolor(colorObj);
|
|
88
|
-
return 'linear-gradient(to ' + alignTo + ', ' + gradStr + ')';
|
|
89
|
-
};
|
|
90
|
-
ColorSettingsComponent.prototype.onUseChanged = function (value) {
|
|
91
|
-
this.color.use = value;
|
|
92
|
-
this.raiseColorChange();
|
|
93
|
-
};
|
|
94
|
-
ColorSettingsComponent.prototype.onColorChanged = function (value) {
|
|
95
|
-
this.color.value = value;
|
|
96
|
-
this.raiseColorChange();
|
|
97
|
-
};
|
|
98
|
-
ColorSettingsComponent.prototype.onSliderValueChanged = function (value) {
|
|
99
|
-
this.color.opacity = value;
|
|
100
|
-
this.raiseColorChange();
|
|
101
|
-
};
|
|
102
|
-
return ColorSettingsComponent;
|
|
103
|
-
}());
|
|
104
|
-
ColorSettingsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ColorSettingsComponent, deps: [{ token: i1__namespace.PepColorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
105
|
-
ColorSettingsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ColorSettingsComponent, selector: "pep-color-settings", inputs: { title: "title", color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0__namespace, template: "<pep-checkbox class=\"checkbox-as-title\" [label]=\"title\" [renderTitle]=\"false\" [value]=\"color.use\" (valueChange)=\"onUseChanged($event)\"></pep-checkbox>\n<pep-color [value]=\"color.value\" [label]=\"title + ' ' + ('COLOR_SETTINGS.COLOR' | translate)\" [disabled]=\"!color.use\" (valueChange)=\"onColorChanged($event)\">\n</pep-color>\n<pep-slider [label]=\"title + ' ' + ('COLOR_SETTINGS.OPACITY' | translate)\" [hint]=\"color.opacity.toString() || ''\" [minValue]=\"0\" [maxValue]=\"100\" [disabled]=\"!color.use\" [value]=\"color.opacity\" \n [background]=\"getSliderBackground()\" (inputChange)=\"onSliderValueChanged($event)\">\n</pep-slider>\n", styles: [":host{width:100%}\n"], components: [{ type: i2__namespace.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "form", "isActive", "showTitle", "renderTitle", "layoutType", "type", "additionalValue", "visible"], outputs: ["valueChange"] }, { type: i3__namespace.PepColorComponent, selector: "pep-color", inputs: ["key", "value", "label", "disabled", "xAlignment", "rowSpan", "type", "showTitle", "showAAComplient", "layoutType"], outputs: ["valueChange"] }, { type: i4__namespace.PepSliderComponent, selector: "pep-slider", inputs: ["label", "disabled", "hint", "step", "minValue", "maxValue", "background", "value"], outputs: ["valueChange", "inputChange"] }], pipes: { "translate": i5__namespace.TranslatePipe } });
|
|
106
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ColorSettingsComponent, decorators: [{
|
|
107
|
-
type: i0.Component,
|
|
108
|
-
args: [{
|
|
109
|
-
selector: 'pep-color-settings',
|
|
110
|
-
templateUrl: './color-settings.component.html',
|
|
111
|
-
styleUrls: ['./color-settings.component.scss']
|
|
112
|
-
}]
|
|
113
|
-
}], ctorParameters: function () { return [{ type: i1__namespace.PepColorService }]; }, propDecorators: { title: [{
|
|
114
|
-
type: i0.Input
|
|
115
|
-
}], color: [{
|
|
116
|
-
type: i0.Input
|
|
117
|
-
}], colorChange: [{
|
|
118
|
-
type: i0.Output
|
|
42
|
+
var ColorSettingsComponent = /** @class */ (function () {
|
|
43
|
+
function ColorSettingsComponent(pepColorService) {
|
|
44
|
+
this.pepColorService = pepColorService;
|
|
45
|
+
this.title = '';
|
|
46
|
+
this._color = new PepColorSettings();
|
|
47
|
+
this.colorChange = new i0.EventEmitter();
|
|
48
|
+
}
|
|
49
|
+
Object.defineProperty(ColorSettingsComponent.prototype, "color", {
|
|
50
|
+
get: function () {
|
|
51
|
+
return this._color;
|
|
52
|
+
},
|
|
53
|
+
set: function (value) {
|
|
54
|
+
if (!value) {
|
|
55
|
+
this._color = new PepColorSettings();
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
this._color = value;
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
enumerable: false,
|
|
62
|
+
configurable: true
|
|
63
|
+
});
|
|
64
|
+
ColorSettingsComponent.prototype.ngOnInit = function () {
|
|
65
|
+
};
|
|
66
|
+
ColorSettingsComponent.prototype.getRGBAcolor = function (colorObj, opac) {
|
|
67
|
+
if (opac === void 0) { opac = null; }
|
|
68
|
+
var rgba = 'rgba(255,255,255,0)';
|
|
69
|
+
if (colorObj) {
|
|
70
|
+
var color = colorObj.value;
|
|
71
|
+
var opacity = opac != null ? opac : colorObj.opacity;
|
|
72
|
+
opacity = opacity > 0 ? opacity / 100 : 0;
|
|
73
|
+
var hsl = this.pepColorService.hslString2hsl(color);
|
|
74
|
+
var rgb = this.pepColorService.hsl2rgb(hsl);
|
|
75
|
+
rgba = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ')';
|
|
76
|
+
}
|
|
77
|
+
return rgba;
|
|
78
|
+
};
|
|
79
|
+
ColorSettingsComponent.prototype.raiseColorChange = function () {
|
|
80
|
+
this.colorChange.emit(this.color);
|
|
81
|
+
};
|
|
82
|
+
ColorSettingsComponent.prototype.getSliderBackground = function () {
|
|
83
|
+
var alignTo = 'right';
|
|
84
|
+
var colorObj = new PepColorSettings();
|
|
85
|
+
colorObj.value = this.color.value;
|
|
86
|
+
colorObj.opacity = 100;
|
|
87
|
+
var gradStr = this.getRGBAcolor(colorObj, 0) + ' , ' + this.getRGBAcolor(colorObj);
|
|
88
|
+
return 'linear-gradient(to ' + alignTo + ', ' + gradStr + ')';
|
|
89
|
+
};
|
|
90
|
+
ColorSettingsComponent.prototype.onUseChanged = function (value) {
|
|
91
|
+
this.color.use = value;
|
|
92
|
+
this.raiseColorChange();
|
|
93
|
+
};
|
|
94
|
+
ColorSettingsComponent.prototype.onColorChanged = function (value) {
|
|
95
|
+
this.color.value = value;
|
|
96
|
+
this.raiseColorChange();
|
|
97
|
+
};
|
|
98
|
+
ColorSettingsComponent.prototype.onSliderValueChanged = function (value) {
|
|
99
|
+
this.color.opacity = value;
|
|
100
|
+
this.raiseColorChange();
|
|
101
|
+
};
|
|
102
|
+
return ColorSettingsComponent;
|
|
103
|
+
}());
|
|
104
|
+
ColorSettingsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ColorSettingsComponent, deps: [{ token: i1__namespace.PepColorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
105
|
+
ColorSettingsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ColorSettingsComponent, selector: "pep-color-settings", inputs: { title: "title", color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0__namespace, template: "<pep-checkbox class=\"checkbox-as-title\" [label]=\"title\" [renderTitle]=\"false\" [value]=\"color.use\" (valueChange)=\"onUseChanged($event)\"></pep-checkbox>\n<pep-color [value]=\"color.value\" [label]=\"title + ' ' + ('COLOR_SETTINGS.COLOR' | translate)\" [disabled]=\"!color.use\" (valueChange)=\"onColorChanged($event)\">\n</pep-color>\n<pep-slider [label]=\"title + ' ' + ('COLOR_SETTINGS.OPACITY' | translate)\" [hint]=\"color.opacity.toString() || ''\" [minValue]=\"0\" [maxValue]=\"100\" [disabled]=\"!color.use\" [value]=\"color.opacity\" \n [background]=\"getSliderBackground()\" (inputChange)=\"onSliderValueChanged($event)\">\n</pep-slider>\n", styles: [":host{width:100%}\n"], components: [{ type: i2__namespace.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "form", "isActive", "showTitle", "renderTitle", "layoutType", "type", "additionalValue", "visible"], outputs: ["valueChange"] }, { type: i3__namespace.PepColorComponent, selector: "pep-color", inputs: ["key", "value", "label", "disabled", "xAlignment", "rowSpan", "type", "showTitle", "showAAComplient", "layoutType"], outputs: ["valueChange"] }, { type: i4__namespace.PepSliderComponent, selector: "pep-slider", inputs: ["label", "disabled", "hint", "step", "minValue", "maxValue", "background", "value"], outputs: ["valueChange", "inputChange"] }], pipes: { "translate": i5__namespace.TranslatePipe } });
|
|
106
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ColorSettingsComponent, decorators: [{
|
|
107
|
+
type: i0.Component,
|
|
108
|
+
args: [{
|
|
109
|
+
selector: 'pep-color-settings',
|
|
110
|
+
templateUrl: './color-settings.component.html',
|
|
111
|
+
styleUrls: ['./color-settings.component.scss']
|
|
112
|
+
}]
|
|
113
|
+
}], ctorParameters: function () { return [{ type: i1__namespace.PepColorService }]; }, propDecorators: { title: [{
|
|
114
|
+
type: i0.Input
|
|
115
|
+
}], color: [{
|
|
116
|
+
type: i0.Input
|
|
117
|
+
}], colorChange: [{
|
|
118
|
+
type: i0.Output
|
|
119
119
|
}] } });
|
|
120
120
|
|
|
121
|
-
var PepColorSettingsModule = /** @class */ (function () {
|
|
122
|
-
function PepColorSettingsModule() {
|
|
123
|
-
}
|
|
124
|
-
return PepColorSettingsModule;
|
|
125
|
-
}());
|
|
126
|
-
PepColorSettingsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepColorSettingsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
127
|
-
PepColorSettingsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepColorSettingsModule, declarations: [ColorSettingsComponent], imports: [common.CommonModule,
|
|
128
|
-
i1.PepNgxLibModule,
|
|
129
|
-
i2.PepCheckboxModule,
|
|
130
|
-
i3.PepColorModule,
|
|
131
|
-
i4.PepSliderModule], exports: [ColorSettingsComponent] });
|
|
132
|
-
PepColorSettingsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepColorSettingsModule, imports: [[
|
|
133
|
-
common.CommonModule,
|
|
134
|
-
i1.PepNgxLibModule,
|
|
135
|
-
i2.PepCheckboxModule,
|
|
136
|
-
i3.PepColorModule,
|
|
137
|
-
i4.PepSliderModule
|
|
138
|
-
]] });
|
|
139
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepColorSettingsModule, decorators: [{
|
|
140
|
-
type: i0.NgModule,
|
|
141
|
-
args: [{
|
|
142
|
-
declarations: [
|
|
143
|
-
ColorSettingsComponent
|
|
144
|
-
],
|
|
145
|
-
imports: [
|
|
146
|
-
common.CommonModule,
|
|
147
|
-
i1.PepNgxLibModule,
|
|
148
|
-
i2.PepCheckboxModule,
|
|
149
|
-
i3.PepColorModule,
|
|
150
|
-
i4.PepSliderModule
|
|
151
|
-
],
|
|
152
|
-
exports: [ColorSettingsComponent],
|
|
153
|
-
}]
|
|
121
|
+
var PepColorSettingsModule = /** @class */ (function () {
|
|
122
|
+
function PepColorSettingsModule() {
|
|
123
|
+
}
|
|
124
|
+
return PepColorSettingsModule;
|
|
125
|
+
}());
|
|
126
|
+
PepColorSettingsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepColorSettingsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
127
|
+
PepColorSettingsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepColorSettingsModule, declarations: [ColorSettingsComponent], imports: [common.CommonModule,
|
|
128
|
+
i1.PepNgxLibModule,
|
|
129
|
+
i2.PepCheckboxModule,
|
|
130
|
+
i3.PepColorModule,
|
|
131
|
+
i4.PepSliderModule], exports: [ColorSettingsComponent] });
|
|
132
|
+
PepColorSettingsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepColorSettingsModule, imports: [[
|
|
133
|
+
common.CommonModule,
|
|
134
|
+
i1.PepNgxLibModule,
|
|
135
|
+
i2.PepCheckboxModule,
|
|
136
|
+
i3.PepColorModule,
|
|
137
|
+
i4.PepSliderModule
|
|
138
|
+
]] });
|
|
139
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepColorSettingsModule, decorators: [{
|
|
140
|
+
type: i0.NgModule,
|
|
141
|
+
args: [{
|
|
142
|
+
declarations: [
|
|
143
|
+
ColorSettingsComponent
|
|
144
|
+
],
|
|
145
|
+
imports: [
|
|
146
|
+
common.CommonModule,
|
|
147
|
+
i1.PepNgxLibModule,
|
|
148
|
+
i2.PepCheckboxModule,
|
|
149
|
+
i3.PepColorModule,
|
|
150
|
+
i4.PepSliderModule
|
|
151
|
+
],
|
|
152
|
+
exports: [ColorSettingsComponent],
|
|
153
|
+
}]
|
|
154
154
|
}] });
|
|
155
155
|
|
|
156
|
-
/*
|
|
157
|
-
* Public API Surface of ngx-composite-lib/color-settings
|
|
156
|
+
/*
|
|
157
|
+
* Public API Surface of ngx-composite-lib/color-settings
|
|
158
158
|
*/
|
|
159
159
|
|
|
160
|
-
/**
|
|
161
|
-
* Generated bundle index. Do not edit.
|
|
160
|
+
/**
|
|
161
|
+
* Generated bundle index. Do not edit.
|
|
162
162
|
*/
|
|
163
163
|
|
|
164
164
|
exports.ColorSettingsComponent = ColorSettingsComponent;
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@pepperi-addons/ngx-lib'), require('@pepperi-addons/ngx-lib/button'), require('@angular/cdk/drag-drop')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-composite-lib/draggable-item', ['exports', '@angular/core', '@angular/common', '@pepperi-addons/ngx-lib', '@pepperi-addons/ngx-lib/button', '@angular/cdk/drag-drop'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["pepperi-addons"] = global["pepperi-addons"] || {}, global["pepperi-addons"]["ngx-composite-lib"] = global["pepperi-addons"]["ngx-composite-lib"] || {}, global["pepperi-addons"]["ngx-composite-lib"]["draggable-item"] = {}), global.ng.core, global.ng.common, global["ngx-lib"], global.i1, global.ng.cdk.dragDrop));
|
|
5
|
+
})(this, (function (exports, i0, i2, ngxLib, i1, dragDrop) { 'use strict';
|
|
6
|
+
|
|
7
|
+
function _interopNamespace(e) {
|
|
8
|
+
if (e && e.__esModule) return e;
|
|
9
|
+
var n = Object.create(null);
|
|
10
|
+
if (e) {
|
|
11
|
+
Object.keys(e).forEach(function (k) {
|
|
12
|
+
if (k !== 'default') {
|
|
13
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function () { return e[k]; }
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
n["default"] = e;
|
|
22
|
+
return Object.freeze(n);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
|
|
26
|
+
var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
|
|
27
|
+
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
|
|
28
|
+
|
|
29
|
+
var DraggableItemComponent = /** @class */ (function () {
|
|
30
|
+
// private _isDraggable = false;
|
|
31
|
+
// @Input()
|
|
32
|
+
// set isDraggable(value: boolean) {
|
|
33
|
+
// this._isDraggable = value;
|
|
34
|
+
// this._cursor = value ? 'move' : 'inherit'
|
|
35
|
+
// }
|
|
36
|
+
// get isDraggable(): boolean {
|
|
37
|
+
// return this._isDraggable;
|
|
38
|
+
// }
|
|
39
|
+
function DraggableItemComponent() {
|
|
40
|
+
this._cursor = 'move';
|
|
41
|
+
this.title = '';
|
|
42
|
+
this.disabled = false;
|
|
43
|
+
}
|
|
44
|
+
DraggableItemComponent.prototype.ngOnInit = function () {
|
|
45
|
+
};
|
|
46
|
+
return DraggableItemComponent;
|
|
47
|
+
}());
|
|
48
|
+
DraggableItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DraggableItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
49
|
+
DraggableItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", disabled: "disabled" }, host: { properties: { "style.cursor": "this._cursor" } }, ngImport: i0__namespace, template: "<div class=\"draggable-item-container\" [ngClass]=\"{ 'disabled': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"title-container\">\n <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.title-container{overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.title-container .title{display:block}.actions{display:inline-flex;grid-gap:var(--pep-spacing-xs, .25rem);gap:var(--pep-spacing-xs, .25rem)}\n"], components: [{ type: i1__namespace.PepButtonComponent, selector: "pep-button", inputs: ["styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconPosition", "visible", "key", "value", "iconName"], outputs: ["buttonClick"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
50
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DraggableItemComponent, decorators: [{
|
|
51
|
+
type: i0.Component,
|
|
52
|
+
args: [{
|
|
53
|
+
selector: 'pep-draggable-item',
|
|
54
|
+
templateUrl: './draggable-item.component.html',
|
|
55
|
+
styleUrls: ['./draggable-item.component.scss']
|
|
56
|
+
}]
|
|
57
|
+
}], ctorParameters: function () { return []; }, propDecorators: { _cursor: [{
|
|
58
|
+
type: i0.HostBinding,
|
|
59
|
+
args: ['style.cursor']
|
|
60
|
+
}], title: [{
|
|
61
|
+
type: i0.Input
|
|
62
|
+
}], disabled: [{
|
|
63
|
+
type: i0.Input
|
|
64
|
+
}] } });
|
|
65
|
+
|
|
66
|
+
var DraggableItemModule = /** @class */ (function () {
|
|
67
|
+
function DraggableItemModule() {
|
|
68
|
+
}
|
|
69
|
+
return DraggableItemModule;
|
|
70
|
+
}());
|
|
71
|
+
DraggableItemModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DraggableItemModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
72
|
+
DraggableItemModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DraggableItemModule, declarations: [DraggableItemComponent], imports: [i2.CommonModule,
|
|
73
|
+
ngxLib.PepNgxLibModule,
|
|
74
|
+
i1.PepButtonModule,
|
|
75
|
+
dragDrop.DragDropModule], exports: [DraggableItemComponent] });
|
|
76
|
+
DraggableItemModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DraggableItemModule, imports: [[
|
|
77
|
+
i2.CommonModule,
|
|
78
|
+
ngxLib.PepNgxLibModule,
|
|
79
|
+
i1.PepButtonModule,
|
|
80
|
+
dragDrop.DragDropModule
|
|
81
|
+
]] });
|
|
82
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: DraggableItemModule, decorators: [{
|
|
83
|
+
type: i0.NgModule,
|
|
84
|
+
args: [{
|
|
85
|
+
declarations: [
|
|
86
|
+
DraggableItemComponent
|
|
87
|
+
],
|
|
88
|
+
imports: [
|
|
89
|
+
i2.CommonModule,
|
|
90
|
+
ngxLib.PepNgxLibModule,
|
|
91
|
+
i1.PepButtonModule,
|
|
92
|
+
dragDrop.DragDropModule
|
|
93
|
+
],
|
|
94
|
+
exports: [DraggableItemComponent],
|
|
95
|
+
}]
|
|
96
|
+
}] });
|
|
97
|
+
|
|
98
|
+
/*
|
|
99
|
+
* Public API Surface of ngx-composite-lib/draggable-item
|
|
100
|
+
*/
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* Generated bundle index. Do not edit.
|
|
104
|
+
*/
|
|
105
|
+
|
|
106
|
+
exports.DraggableItemComponent = DraggableItemComponent;
|
|
107
|
+
exports.DraggableItemModule = DraggableItemModule;
|
|
108
|
+
|
|
109
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
110
|
+
|
|
111
|
+
}));
|
|
112
|
+
//# sourceMappingURL=pepperi-addons-ngx-composite-lib-draggable-item.umd.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pepperi-addons-ngx-composite-lib-draggable-item.umd.js","sources":["../../../projects/ngx-composite-lib/draggable-item/draggable-item.component.ts","../../../projects/ngx-composite-lib/draggable-item/draggable-item.component.html","../../../projects/ngx-composite-lib/draggable-item/draggable-item.module.ts","../../../projects/ngx-composite-lib/draggable-item/public-api.ts","../../../projects/ngx-composite-lib/draggable-item/pepperi-addons-ngx-composite-lib-draggable-item.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n selector: 'pep-draggable-item',\n templateUrl: './draggable-item.component.html',\n styleUrls: ['./draggable-item.component.scss']\n})\nexport class DraggableItemComponent implements OnInit {\n\n @HostBinding('style.cursor') _cursor = 'move';\n\n @Input() title = '';\n \n @Input() disabled = false;\n\n // private _isDraggable = false;\n // @Input()\n // set isDraggable(value: boolean) {\n // this._isDraggable = value;\n\n // this._cursor = value ? 'move' : 'inherit'\n // }\n // get isDraggable(): boolean {\n // return this._isDraggable;\n // }\n\n constructor() { }\n\n ngOnInit(): void {\n }\n}\n","<div class=\"draggable-item-container\" [ngClass]=\"{ 'disabled': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"title-container\">\n <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { DraggableItemComponent } from './draggable-item.component';\n\n@NgModule({\n declarations: [\n DraggableItemComponent\n ],\n imports: [\n CommonModule,\n PepNgxLibModule,\n PepButtonModule,\n DragDropModule\n ],\n exports: [DraggableItemComponent],\n})\nexport class DraggableItemModule { }\n","/*\n * Public API Surface of ngx-composite-lib/draggable-item\n */\nexport * from './draggable-item.module';\nexport * from './draggable-item.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["Component","HostBinding","Input","CommonModule","PepNgxLibModule","PepButtonModule","DragDropModule","NgModule"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA0BI;YAjB6B,YAAO,GAAG,MAAM,CAAC;YAErC,UAAK,GAAG,EAAE,CAAC;YAEX,aAAQ,GAAG,KAAK,CAAC;SAaT;QAEjB,yCAAQ,GAAR;SACC;;;6IAtBQ,sBAAsB;sHAAtB,sBAAsB,iLCPnC,yeAUM;qHDHO,sBAAsB;sBALlCA,YAAS;uBAAC;wBACP,QAAQ,EAAE,oBAAoB;wBAC9B,WAAW,EAAE,iCAAiC;wBAC9C,SAAS,EAAE,CAAC,iCAAiC,CAAC;qBACjD;8EAGgC,OAAO;0BAAnCC,cAAW;2BAAC,cAAc;oBAElB,KAAK;0BAAbC,QAAK;oBAEG,QAAQ;0BAAhBA,QAAK;;;;QEQV;;;;0IAAa,mBAAmB;2IAAnB,mBAAmB,iBAVxB,sBAAsB,aAGtBC,eAAY;YACZC,sBAAe;YACfC,kBAAe;YACfC,uBAAc,aAER,sBAAsB;2IAEvB,mBAAmB,YARnB;gBACLH,eAAY;gBACZC,sBAAe;gBACfC,kBAAe;gBACfC,uBAAc;aACjB;qHAGQ,mBAAmB;sBAZ/BC,WAAQ;uBAAC;wBACN,YAAY,EAAE;4BACV,sBAAsB;yBACzB;wBACD,OAAO,EAAE;4BACLJ,eAAY;4BACZC,sBAAe;4BACfC,kBAAe;4BACfC,uBAAc;yBACjB;wBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;qBACpC;;;ICpBD;;;;ICAA;;;;;;;;;;;;;"}
|