@obliczeniowo/elementary
Version:
Library made in Angular version 20
242 lines (235 loc) • 18.8 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Input, Component, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
class MarksService {
marks = {
' ': [0, 0, 0, 0, 0, 0, 0, 0],
a: [0, 0, 22, 25, 17, 25, 22, 0],
ą: [0, 22, 25, 17, 25, 22, 8, 16],
b: [1, 1, 13, 19, 17, 19, 13, 0],
c: [0, 0, 14, 17, 1, 17, 14, 0],
ć: [6, 0, 14, 17, 1, 17, 14, 0],
d: [16, 16, 30, 17, 17, 17, 30, 0],
e: [0, 0, 14, 17, 31, 1, 14, 0],
ę: [0, 0, 14, 17, 15, 1, 14, 24],
f: [8, 4, 12, 6, 4, 4, 4, 0],
g: [0, 0, 14, 17, 17, 14, 1, 30],
h: [1, 1, 15, 17, 17, 17, 17, 0],
i: [4, 0, 4, 4, 4, 4, 4, 0],
j: [4, 0, 4, 4, 4, 4, 4, 2],
k: [1, 1, 9, 5, 3, 5, 9, 0],
l: [4, 4, 4, 4, 4, 4, 8, 0],
ł: [4, 12, 6, 4, 4, 4, 8, 0],
m: [0, 0, 15, 21, 21, 21, 21, 0],
n: [0, 0, 14, 18, 18, 18, 18, 0],
ń: [12, 0, 30, 17, 17, 17, 17, 0],
o: [0, 0, 14, 17, 17, 17, 14, 0],
ó: [12, 0, 14, 17, 17, 17, 14, 0],
p: [0, 0, 15, 17, 17, 31, 1, 1],
q: [0, 0, 30, 17, 17, 30, 16, 16],
r: [0, 0, 13, 3, 1, 1, 0, 0],
s: [0, 0, 14, 1, 14, 16, 14, 0],
ś: [6, 0, 14, 17, 6, 8, 17, 14],
t: [4, 4, 14, 4, 4, 4, 8, 0],
u: [0, 0, 17, 17, 17, 17, 15, 0],
v: [0, 0, 17, 17, 10, 10, 4, 0],
w: [0, 0, 17, 17, 21, 21, 10, 0],
x: [0, 0, 17, 10, 4, 10, 17, 0],
y: [0, 0, 17, 17, 10, 4, 2, 1],
z: [0, 0, 31, 8, 4, 2, 31, 0],
ż: [4, 0, 30, 8, 4, 30, 0, 0],
ź: [12, 0, 30, 8, 4, 30, 0, 0],
',': [0, 0, 0, 0, 4, 4, 2, 0],
'.': [0, 0, 0, 0, 0, 0, 4, 0],
'!': [4, 4, 4, 4, 4, 0, 4, 0],
'?': [14, 17, 17, 8, 4, 0, 4, 0],
"'": [2, 4, 0, 0, 0, 0, 0, 0],
'"': [10, 10, 0, 0, 0, 0, 0, 0],
0: [14, 17, 17, 17, 17, 14, 0, 0],
1: [4, 6, 4, 4, 4, 4, 0, 0],
2: [14, 17, 8, 4, 2, 31, 0, 0],
3: [14, 17, 8, 16, 17, 14, 0, 0],
4: [12, 10, 9, 31, 8, 8, 0, 0],
5: [31, 1, 15, 16, 17, 14, 0, 0],
6: [4, 2, 15, 17, 17, 14, 0, 0],
7: [30, 16, 8, 8, 4, 4, 0, 0],
8: [12, 18, 12, 18, 18, 12, 0, 0],
9: [12, 18, 18, 28, 16, 12, 0, 0],
};
constructor() {
this.registerBinary('<', [
[0, 0, 0, 0, 0],
[0, 0, 0, 1, 0],
[0, 0, 1, 0, 0],
[0, 1, 0, 0, 0],
[0, 0, 1, 0, 0],
[0, 0, 0, 1, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
]);
}
/** register by using single number per row */
register(mark, rows) {
this.marks = { ...this.marks, [mark]: rows };
}
/** register by using rows tables 0/1 (on/off) */
registerBinary(mark, table) {
this.marks = { ...this.marks, [mark]: table.map(v => v.reduce((p, c, index) => (p += c * (1 << index), p)), 0) };
}
/** get mark */
get(mark) {
return this.marks[mark] || this.marks[' '];
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MarksService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MarksService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MarksService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
class MarkDisplayerComponent {
element;
marks;
/** size of digit unit */
size = 5;
/** margin of digit unit */
margin = 1;
/** mark to display, if not find in table then ' ' is displayed */
set mark(value) {
this._mark = value;
this.setMark(value);
}
get mark() {
return this._mark;
}
_mark;
constructor(element, marks) {
this.element = element;
this.marks = marks;
this.mark = ' ';
}
matrix = new Array(8).fill(0);
setMark(mark) {
this.matrix = this.marks.get(mark);
}
map(value, mask) {
return (value & mask) !== 0;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MarkDisplayerComponent, deps: [{ token: i0.ElementRef }, { token: MarksService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: MarkDisplayerComponent, isStandalone: false, selector: "obl-mark-displayer", inputs: { size: "size", margin: "margin", mark: "mark" }, ngImport: i0, template: " (value of matrix; track value) {\n <div class=\"line\">\n @for ( mask of [1, 2, 4, 8, 16]; track mask) {\n <div\n [ngClass]=\"{ selected: map(value, mask), element: true }\"\n [ngStyle]=\"{\n margin: margin / 2 + 'px',\n width: size + 'px',\n height: size + 'px'\n }\"\n ></div>\n }\n </div>\n}", styles: [":host{display:inline-block;padding:0}.element{background-color:var(--obl-mark-section-off, blue);display:inline-block}.selected{background-color:var(--obl-mark-section-on, aqua)}.line{display:flex;flex-wrap:nowrap}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MarkDisplayerComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-mark-displayer', standalone: false, template: "@for (value of matrix; track value) {\n <div class=\"line\">\n @for ( mask of [1, 2, 4, 8, 16]; track mask) {\n <div\n [ngClass]=\"{ selected: map(value, mask), element: true }\"\n [ngStyle]=\"{\n margin: margin / 2 + 'px',\n width: size + 'px',\n height: size + 'px'\n }\"\n ></div>\n }\n </div>\n}", styles: [":host{display:inline-block;padding:0}.element{background-color:var(--obl-mark-section-off, blue);display:inline-block}.selected{background-color:var(--obl-mark-section-on, aqua)}.line{display:flex;flex-wrap:nowrap}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: MarksService }], propDecorators: { size: [{
type: Input
}], margin: [{
type: Input
}], mark: [{
type: Input
}] } });
class MarksDisplayerComponent {
/** number of marks per line */
set marksPerLine(marksPerLine) {
this._marksPerLine = new Array(marksPerLine).fill(0);
}
;
_marksPerLine = [];
/** number of rows */
set rows(rows) {
this._rows = new Array(rows).fill(0);
}
;
_rows = [];
/** size of basic mark unit displayer */
size = 5;
/** margin for basic units */
margin = 1;
/** text to displayed (will be split by new line mark to display per line) */
set text(text) {
this.lines = text.split('\n');
}
;
lines = [];
connectors = new Array(16).fill(0);
onChange = (value) => { };
onTouched = () => { };
registerOnValidatorChange(fn) { this.onChange = fn; }
writeValue(set) {
this.text = set || '';
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
getChar(line, index) {
return this.lines[line].charAt(index);
}
constructor() {
this.text = '';
this.rows = 2;
this.marksPerLine = 15;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MarksDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: MarksDisplayerComponent, isStandalone: false, selector: "obl-marks-displayer", inputs: { marksPerLine: "marksPerLine", rows: "rows", size: "size", margin: "margin", text: "text" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: MarksDisplayerComponent
},
], ngImport: i0, template: "<div class=\"circle gold\" style=\"top: 0; left: 0\">\n <div class=\"circle hole\"></div>\n</div>\n<div class=\"circle gold\" style=\"top: 0; right: 0\">\n <div class=\"circle hole\"></div>\n</div>\n<div class=\"circle gold\" style=\"bottom: 0; left: 0\">\n <div class=\"circle hole\"></div>\n</div>\n<div class=\"circle gold\" style=\"bottom: 0; right: 0\">\n <div class=\"circle hole\"></div>\n</div>\n<div class=\"number\">1616B</div>\n\n@for (i of connectors; track i) {\n <div class=\"connect\" [ngStyle]=\"{ left: (60 + $index * 25) + 'px', width: '15px', height: '30px' }\">\n <div>\n <div></div>\n </div>\n </div>\n}\n\n<div class=\"highlight\">\n <div class=\"triangle-bottom-left\"></div>\n <div class=\"center-square\"></div>\n <div class=\"triangle-top-left \"></div>\n</div>\n\n<div class=\"displayer-frame\">\n <div class=\"frame\"></div>\n <div class=\"screen-background\">\n @for (line of _rows; track $index; let lineIndex = $index) {\n <div class=\"text-line\">\n @for (sign of _marksPerLine; track $index; let signIndex = $index) {\n <obl-mark-displayer\n [mark]=\"lines[lineIndex] && lines[lineIndex].charAt(signIndex) || ' '\"\n [margin]=\"margin\"\n [size]=\"size\"\n [style.marginLeft.px] =\"margin\"\n [style.marginRight.px] =\"margin\"\n ></obl-mark-displayer>\n }\n </div>\n }\n </div>\n <div class=\"frame\"></div>\n</div>\n", styles: [":host{display:block;padding:40px;background-color:#004d00;position:relative;width:fit-content}.screen-background{padding:10px;border-radius:10px;border:2px solid black;background-color:var(--obl-mark-screen-color, #2929ff);width:fit-content}.text-line{display:flex;flex-wrap:nowrap}.frame{border:2px solid black;background-color:#000;border-radius:10px;margin:10px;height:5px}.displayer-frame{padding:2px 20px;background-color:#2b2b2b;width:fit-content}obl-mark-displayer{display:inline-block}.circle{border-radius:50%}.gold.circle{width:45px;height:45px;background-color:gold;background-image:-moz-linear-gradient(left,#927c00 0%,gold 100%);background-image:-webkit-linear-gradient(left,#927c00 0%,gold 100%);background-image:-ms-linear-gradient(left,#927c00 0%,gold 100%);background-image:linear-gradient(to right,#927c00,gold);position:absolute;display:flex;justify-content:center;align-items:center}.hole{width:25px;height:25px;background-color:#000}.number{position:absolute;bottom:10px;background:#585858;color:gold;padding:2px 5px;left:calc(50% - 30px)}.connect{position:absolute;top:0;background-color:gray;border-bottom-left-radius:10px;border-bottom-right-radius:10px;width:15px;height:30px;background-image:-moz-linear-gradient(top,rgb(0,0,0) 0%,rgb(255,255,255) 100%);background-image:-webkit-linear-gradient(top,rgb(0,0,0) 0%,rgb(255,255,255) 100%);background-image:-ms-linear-gradient(top,rgb(0,0,0) 0%,rgb(255,255,255) 100%);background-image:linear-gradient(to top,#000,#fff)}.connect>div{border-radius:10px;width:5px;height:5px;background-color:#a1a1a1;margin-top:15px;padding:5px;background-image:-moz-linear-gradient(left,rgb(0,0,0) 0%,rgb(255,255,255) 100%);background-image:-webkit-linear-gradient(left,rgb(0,0,0) 0%,rgb(255,255,255) 100%);background-image:-ms-linear-gradient(left,rgb(0,0,0) 0%,rgb(255,255,255) 100%);background-image:linear-gradient(to right,#000,#fff)}.connect>div>div{border-radius:5px;width:5px;height:5px;background-color:#4b4b4b;box-shadow:0 0 4px #000}.triangle-bottom-left{width:0;height:0;border-bottom:30px solid gray;border-right:30px solid transparent}.triangle-top-left{width:0;height:0;border-top:30px solid gray;border-right:30px solid transparent}.center-square{width:30px;height:60px;background-color:gray}.highlight{position:absolute;right:10px;top:calc(50% - 60px)}\n"], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MarkDisplayerComponent, selector: "obl-mark-displayer", inputs: ["size", "margin", "mark"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MarksDisplayerComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-marks-displayer', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: MarksDisplayerComponent
},
], standalone: false, template: "<div class=\"circle gold\" style=\"top: 0; left: 0\">\n <div class=\"circle hole\"></div>\n</div>\n<div class=\"circle gold\" style=\"top: 0; right: 0\">\n <div class=\"circle hole\"></div>\n</div>\n<div class=\"circle gold\" style=\"bottom: 0; left: 0\">\n <div class=\"circle hole\"></div>\n</div>\n<div class=\"circle gold\" style=\"bottom: 0; right: 0\">\n <div class=\"circle hole\"></div>\n</div>\n<div class=\"number\">1616B</div>\n\n@for (i of connectors; track i) {\n <div class=\"connect\" [ngStyle]=\"{ left: (60 + $index * 25) + 'px', width: '15px', height: '30px' }\">\n <div>\n <div></div>\n </div>\n </div>\n}\n\n<div class=\"highlight\">\n <div class=\"triangle-bottom-left\"></div>\n <div class=\"center-square\"></div>\n <div class=\"triangle-top-left \"></div>\n</div>\n\n<div class=\"displayer-frame\">\n <div class=\"frame\"></div>\n <div class=\"screen-background\">\n @for (line of _rows; track $index; let lineIndex = $index) {\n <div class=\"text-line\">\n @for (sign of _marksPerLine; track $index; let signIndex = $index) {\n <obl-mark-displayer\n [mark]=\"lines[lineIndex] && lines[lineIndex].charAt(signIndex) || ' '\"\n [margin]=\"margin\"\n [size]=\"size\"\n [style.marginLeft.px] =\"margin\"\n [style.marginRight.px] =\"margin\"\n ></obl-mark-displayer>\n }\n </div>\n }\n </div>\n <div class=\"frame\"></div>\n</div>\n", styles: [":host{display:block;padding:40px;background-color:#004d00;position:relative;width:fit-content}.screen-background{padding:10px;border-radius:10px;border:2px solid black;background-color:var(--obl-mark-screen-color, #2929ff);width:fit-content}.text-line{display:flex;flex-wrap:nowrap}.frame{border:2px solid black;background-color:#000;border-radius:10px;margin:10px;height:5px}.displayer-frame{padding:2px 20px;background-color:#2b2b2b;width:fit-content}obl-mark-displayer{display:inline-block}.circle{border-radius:50%}.gold.circle{width:45px;height:45px;background-color:gold;background-image:-moz-linear-gradient(left,#927c00 0%,gold 100%);background-image:-webkit-linear-gradient(left,#927c00 0%,gold 100%);background-image:-ms-linear-gradient(left,#927c00 0%,gold 100%);background-image:linear-gradient(to right,#927c00,gold);position:absolute;display:flex;justify-content:center;align-items:center}.hole{width:25px;height:25px;background-color:#000}.number{position:absolute;bottom:10px;background:#585858;color:gold;padding:2px 5px;left:calc(50% - 30px)}.connect{position:absolute;top:0;background-color:gray;border-bottom-left-radius:10px;border-bottom-right-radius:10px;width:15px;height:30px;background-image:-moz-linear-gradient(top,rgb(0,0,0) 0%,rgb(255,255,255) 100%);background-image:-webkit-linear-gradient(top,rgb(0,0,0) 0%,rgb(255,255,255) 100%);background-image:-ms-linear-gradient(top,rgb(0,0,0) 0%,rgb(255,255,255) 100%);background-image:linear-gradient(to top,#000,#fff)}.connect>div{border-radius:10px;width:5px;height:5px;background-color:#a1a1a1;margin-top:15px;padding:5px;background-image:-moz-linear-gradient(left,rgb(0,0,0) 0%,rgb(255,255,255) 100%);background-image:-webkit-linear-gradient(left,rgb(0,0,0) 0%,rgb(255,255,255) 100%);background-image:-ms-linear-gradient(left,rgb(0,0,0) 0%,rgb(255,255,255) 100%);background-image:linear-gradient(to right,#000,#fff)}.connect>div>div{border-radius:5px;width:5px;height:5px;background-color:#4b4b4b;box-shadow:0 0 4px #000}.triangle-bottom-left{width:0;height:0;border-bottom:30px solid gray;border-right:30px solid transparent}.triangle-top-left{width:0;height:0;border-top:30px solid gray;border-right:30px solid transparent}.center-square{width:30px;height:60px;background-color:gray}.highlight{position:absolute;right:10px;top:calc(50% - 60px)}\n"] }]
}], ctorParameters: () => [], propDecorators: { marksPerLine: [{
type: Input
}], rows: [{
type: Input
}], size: [{
type: Input
}], margin: [{
type: Input
}], text: [{
type: Input
}] } });
class MarksDisplayerModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MarksDisplayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: MarksDisplayerModule, declarations: [MarkDisplayerComponent,
MarksDisplayerComponent], imports: [CommonModule], exports: [MarkDisplayerComponent,
MarksDisplayerComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MarksDisplayerModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MarksDisplayerModule, decorators: [{
type: NgModule,
args: [{
declarations: [
MarkDisplayerComponent,
MarksDisplayerComponent,
],
imports: [
CommonModule
],
exports: [
MarkDisplayerComponent,
MarksDisplayerComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { MarkDisplayerComponent, MarksDisplayerComponent, MarksDisplayerModule, MarksService };
//# sourceMappingURL=obliczeniowo-elementary-marks-displayer.mjs.map