/* ## color.js ## */
/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * COPYRIGHT and LICENCE are owned by its creator Christian Martin 
 * Copy, altering or distribution without the allowance of the owner are prohibited
 */

/**
 * A simple Color class for rgb set color values.
 * 
 */
class Color {
    #red;
    #green;
    #blue;
    #hex;

    /**
     * 
     * @param {number} red Red-Value for RGB Color definition
     * @param {number} green Green-Value for RGB
     * @param {number} blue Blue-Value
     */
    constructor(red, green, blue) {
        this.#red = red;
        this.#green = green;
        this.#blue = blue;
    }

    /**
     * 
     * @returns {string} an rgb object string
     */
    cssRGBString() {
        return `rgb(${this.#red}, ${this.#green}, ${this.#blue})`;
    }

    /**
     * 
     * @param {string} hexcode 
     * @returns 
     */
    hex(hexcode) {
        this.#hex = hexcode;
        return this;
    }
}

const Colors = Object.freeze({
    indian_red: new Color(176, 23, 31).hex('#B0171F'),
    crimson: new Color(220, 20, 60).hex('#DC143C'),
    lightpink: new Color(255, 182, 193).hex('#FFB6C1'),
    lightpink_1: new Color(255, 174, 185).hex('#FFAEB9'),
    lightpink_2: new Color(238, 162, 173).hex('#EEA2AD'),
    lightpink_3: new Color(205, 140, 149).hex('#CD8C95'),
    lightpink_4: new Color(139, 95, 101).hex('#8B5F65'),
    pink: new Color(255, 192, 203).hex('#FFC0CB'),
    pink_1: new Color(255, 181, 197).hex('#FFB5C5'),
    pink_2: new Color(238, 169, 184).hex('#EEA9B8'),
    pink_3: new Color(205, 145, 158).hex('#CD919E'),
    pink_4: new Color(139, 99, 108).hex('#8B636C'),
    palevioletred: new Color(219, 112, 147).hex('#DB7093'),
    palevioletred_1: new Color(255, 130, 171).hex('#FF82AB'),
    palevioletred_2: new Color(238, 121, 159).hex('#EE799F'),
    palevioletred_3: new Color(205, 104, 137).hex('#CD6889'),
    palevioletred_4: new Color(139, 71, 93).hex('#8B475D'),
    lavenderblush_1: new Color(255, 240, 245).hex('#FFF0F5'), //(lavenderblush)
    lavenderblush_2: new Color(238, 224, 229).hex('#EEE0E5'),
    lavenderblush_3: new Color(205, 193, 197).hex('#CDC1C5'),
    lavenderblush_4: new Color(139, 131, 134).hex('#8B8386'),
    violetred_1: new Color(255, 62, 150).hex('#FF3E96'),
    violetred_2: new Color(238, 58, 140).hex('#EE3A8C'),
    violetred_3: new Color(205, 50, 120).hex('#CD3278'),
    violetred_4: new Color(139, 34, 82).hex('#8B2252'),
    hotpink: new Color(255, 105, 180).hex('#FF69B4'),
    hotpink_1: new Color(255, 110, 180).hex('#FF6EB4'),
    hotpink_2: new Color(238, 106, 167).hex('#EE6AA7'),
    hotpink_3: new Color(205, 96, 144).hex('#CD6090'),
    hotpink_4: new Color(139, 58, 98).hex('#8B3A62'),
    raspberry: new Color(135, 38, 87).hex('#872657'),
    deeppink_1: new Color(255, 20, 147).hex('#FF1493'), // (deeppink)
    deeppink_2: new Color(238, 18, 137).hex('#EE1289'),
    deeppink_3: new Color(205, 16, 118).hex('#CD1076'),
    deeppink_4: new Color(139, 10, 80).hex('#8B0A50'),
    maroon_1: new Color(255, 52, 179).hex('#FF34B3'),
    maroon_2: new Color(238, 48, 167).hex('#EE30A7'),
    maroon_3: new Color(205, 41, 144).hex('#CD2990'),
    maroon_4: new Color(139, 28, 98).hex('#8B1C62'),
    mediumvioletred: new Color(199, 21, 133).hex('#C71585'),
    violetred: new Color(208, 32, 144).hex('#D02090'),
    orchid: new Color(218, 112, 214).hex('#DA70D6'),
    orchid_1: new Color(255, 131, 250).hex('#FF83FA'),
    orchid_2: new Color(238, 122, 233).hex('#EE7AE9'),
    orchid_3: new Color(205, 105, 201).hex('#CD69C9'),
    orchid_4: new Color(139, 71, 137).hex('#8B4789'),
    thistle: new Color(216, 191, 216).hex('#D8BFD8'),
    thistle_1: new Color(255, 225, 255).hex('#FFE1FF'),
    thistle_2: new Color(238, 210, 238).hex('#EED2EE'),
    thistle_3: new Color(205, 181, 205).hex('#CDB5CD'),
    thistle_4: new Color(139, 123, 139).hex('#8B7B8B'),
    plum_1: new Color(255, 187, 255).hex('#FFBBFF'),
    plum_2: new Color(238, 174, 238).hex('#EEAEEE'),
    plum_3: new Color(205, 150, 205).hex('#CD96CD'),
    plum_4: new Color(139, 102, 139).hex('#8B668B'),
    plum: new Color(221, 160, 221).hex('#DDA0DD'),
    violet: new Color(238, 130, 238).hex('#EE82EE'),
    magenta: new Color(255, 0, 255).hex('#FF00FF'), // (fuchsia*)
    magenta_2: new Color(238, 0, 238).hex('#EE00EE'),
    magenta_3: new Color(205, 0, 205).hex('#CD00CD'),
    magenta_4: new Color(139, 0, 139).hex('#8B008B'), //(darkmagenta)
    purple: new Color(128, 0, 128).hex('#800080'),
    mediumorchid: new Color(186, 85, 211).hex('#BA55D3'),
    mediumorchid_1: new Color(224, 102, 255).hex('#E066FF'),
    mediumorchid_2: new Color(209, 95, 238).hex('#D15FEE'),
    mediumorchid_3: new Color(180, 82, 205).hex('#B452CD'),
    mediumorchid_4: new Color(122, 55, 139).hex('#7A378B'),
    darkviolet: new Color(148, 0, 211).hex('#9400D3'),
    darkorchid: new Color(153, 50, 204).hex('#9932CC'),
    darkorchid_1: new Color(191, 62, 255).hex('#BF3EFF'),
    darkorchid_2: new Color(178, 58, 238).hex('#B23AEE'),
    darkorchid_3: new Color(154, 50, 205).hex('#9A32CD'),
    darkorchid_4: new Color(104, 34, 139).hex('#68228B'),
    indigo: new Color(75, 0, 130).hex('#4B0082'),
    blueviolet: new Color(138, 43, 226).hex('#8A2BE2'),
    purple_1: new Color(155, 48, 255).hex('#9B30FF'),
    purple_2: new Color(145, 44, 238).hex('#912CEE'),
    purple_3: new Color(125, 38, 205).hex('#7D26CD'),
    purple_4: new Color(85, 26, 139).hex('#551A8B'),
    mediumpurple: new Color(147, 112, 219).hex('#9370DB'),
    mediumpurple_1: new Color(171, 130, 255).hex('#AB82FF'),
    mediumpurple_2: new Color(159, 121, 238).hex('#9F79EE'),
    mediumpurple_3: new Color(137, 104, 205).hex('#8968CD'),
    mediumpurple_4: new Color(93, 71, 139).hex('#5D478B'),
    darkslateblue: new Color(72, 61, 139).hex('#483D8B'),
    lightslateblue: new Color(132, 112, 255).hex('#8470FF'),
    mediumslateblue: new Color(123, 104, 238).hex('#7B68EE'),
    slateblue: new Color(106, 90, 205).hex('#6A5ACD'),
    slateblue_1: new Color(131, 111, 255).hex('#836FFF'),
    slateblue_2: new Color(122, 103, 238).hex('#7A67EE'),
    slateblue_3: new Color(105, 89, 205).hex('#6959CD'),
    slateblue_4: new Color(71, 60, 139).hex('#473C8B'),
    ghostwhite: new Color(248, 248, 255).hex('#F8F8FF'),
    lavender: new Color(230, 230, 250).hex('#E6E6FA'),
    blue: new Color(0, 0, 255).hex('#0000FF'),
    blue_2: new Color(0, 0, 238).hex('#0000EE'),
    blue_3: new Color(0, 0, 205).hex('#0000CD'), //(mediumblue)
    blue_4: new Color(0, 0, 139).hex('#00008B'), //(darkblue)
    navy: new Color(0, 0, 128).hex('#000080'),
    midnightblue: new Color(25, 25, 112).hex('#191970'),
    cobalt: new Color(61, 89, 171).hex('#3D59AB'),
    royalblue: new Color(65, 105, 225).hex('#4169E1'),
    royalblue_1: new Color(72, 118, 255).hex('#4876FF'),
    royalblue_2: new Color(67, 110, 238).hex('#436EEE'),
    royalblue_3: new Color(58, 95, 205).hex('#3A5FCD'),
    royalblue_4: new Color(39, 64, 139).hex('#27408B'),
    cornflowerblue: new Color(100, 149, 237).hex('#6495ED'),
    lightsteelblue: new Color(176, 196, 222).hex('#B0C4DE'),
    lightsteelblue_1: new Color(202, 225, 255).hex('#CAE1FF'),
    lightsteelblue_2: new Color(188, 210, 238).hex('#BCD2EE'),
    lightsteelblue_3: new Color(162, 181, 205).hex('#A2B5CD'),
    lightsteelblue_4: new Color(110, 123, 139).hex('#6E7B8B'),
    lightslategray: new Color(119, 136, 153).hex('#778899'),
    slategray: new Color(112, 128, 144).hex('#708090'),
    slategray_1: new Color(198, 226, 255).hex('#C6E2FF'),
    slategray_2: new Color(185, 211, 238).hex('#B9D3EE'),
    slategray_3: new Color(159, 182, 205).hex('#9FB6CD'),
    slategray_4: new Color(108, 123, 139).hex('#6C7B8B'),
    dodgerblue_1: new Color(30, 144, 255).hex('#1E90FF'), //(dodgerblue)
    dodgerblue_2: new Color(28, 134, 238).hex('#1C86EE'),
    dodgerblue_3: new Color(24, 116, 205).hex('#1874CD'),
    dodgerblue_4: new Color(16, 78, 139).hex('#104E8B'),
    aliceblue: new Color(240, 248, 255).hex('#F0F8FF'),
    steelblue: new Color(70, 130, 180).hex('#4682B4'),
    steelblue_1: new Color(99, 184, 255).hex('#63B8FF'),
    steelblue_2: new Color(92, 172, 238).hex('#5CACEE'),
    steelblue_3: new Color(79, 148, 205).hex('#4F94CD'),
    steelblue_4: new Color(54, 100, 139).hex('#36648B'),
    lightskyblue: new Color(135, 206, 250).hex('#87CEFA'),
    lightskyblue_1: new Color(176, 226, 255).hex('#B0E2FF'),
    lightskyblue_2: new Color(164, 211, 238).hex('#A4D3EE'),
    lightskyblue_3: new Color(141, 182, 205).hex('#8DB6CD'),
    lightskyblue_4: new Color(96, 123, 139).hex('#607B8B'),
    skyblue_1: new Color(135, 206, 255).hex('#87CEFF'),
    skyblue_2: new Color(126, 192, 238).hex('#7EC0EE'),
    skyblue_3: new Color(108, 166, 205).hex('#6CA6CD'),
    skyblue_4: new Color(74, 112, 139).hex('#4A708B'),
    skyblue: new Color(135, 206, 235).hex('#87CEEB'),
    deepskyblue_1: new Color(0, 191, 255).hex('#00BFFF'), //(deepskyblue)
    deepskyblue_2: new Color(0, 178, 238).hex('#00B2EE'),
    deepskyblue_3: new Color(0, 154, 205).hex('#009ACD'),
    deepskyblue_4: new Color(0, 104, 139).hex('#00688B'),
    peacock: new Color(51, 161, 201).hex('#33A1C9'),
    lightblue: new Color(173, 216, 230).hex('#ADD8E6'),
    lightblue_1: new Color(191, 239, 255).hex('#BFEFFF'),
    lightblue_2: new Color(178, 223, 238).hex('#B2DFEE'),
    lightblue_3: new Color(154, 192, 205).hex('#9AC0CD'),
    lightblue_4: new Color(104, 131, 139).hex('#68838B'),
    powderblue: new Color(176, 224, 230).hex('#B0E0E6'),
    cadetblue_1: new Color(152, 245, 255).hex('#98F5FF'),
    cadetblue_2: new Color(142, 229, 238).hex('#8EE5EE'),
    cadetblue_3: new Color(122, 197, 205).hex('#7AC5CD'),
    cadetblue_4: new Color(83, 134, 139).hex('#53868B'),
    turquoise_1: new Color(0, 245, 255).hex('#00F5FF'),
    turquoise_2: new Color(0, 229, 238).hex('#00E5EE'),
    turquoise_3: new Color(0, 197, 205).hex('#00C5CD'),
    turquoise_4: new Color(0, 134, 139).hex('#00868B'),
    cadetblue: new Color(95, 158, 160).hex('#5F9EA0'),
    darkturquoise: new Color(0, 206, 209).hex('#00CED1'),
    azure_1: new Color(240, 255, 255).hex('#F0FFFF'), //(azure)
    azure_2: new Color(224, 238, 238).hex('#E0EEEE'),
    azure_3: new Color(193, 205, 205).hex('#C1CDCD'),
    azure_4: new Color(131, 139, 139).hex('#838B8B'),
    lightcyan_1: new Color(224, 255, 255).hex('#E0FFFF'), //(lightcyan)
    lightcyan_2: new Color(209, 238, 238).hex('#D1EEEE'),
    lightcyan_3: new Color(180, 205, 205).hex('#B4CDCD'),
    lightcyan_4: new Color(122, 139, 139).hex('#7A8B8B'),
    paleturquoise_1: new Color(187, 255, 255).hex('#BBFFFF'),
    paleturquoise_2: new Color(174, 238, 238).hex('#AEEEEE'), //(paleturquoise)
    paleturquoise_3: new Color(150, 205, 205).hex('#96CDCD'),
    paleturquoise_4: new Color(102, 139, 139).hex('#668B8B'),
    darkslategray: new Color(47, 79, 79).hex('#2F4F4F'),
    darkslategray_1: new Color(151, 255, 255).hex('#97FFFF'),
    darkslategray_2: new Color(141, 238, 238).hex('#8DEEEE'),
    darkslategray_3: new Color(121, 205, 205).hex('#79CDCD'),
    darkslategray_4: new Color(82, 139, 139).hex('#528B8B'),
    cyan: new Color(0, 255, 255).hex('#00FFFF'), // aqua
    cyan_2: new Color(0, 238, 238).hex('#00EEEE'),
    cyan_3: new Color(0, 205, 205).hex('#00CDCD'),
    cyan_4: new Color(0, 139, 139).hex('#008B8B'), //(darkcyan)
    teal: new Color(0, 128, 128).hex('#008080'),
    mediumturquoise: new Color(72, 209, 204).hex('#48D1CC'),
    lightseagreen: new Color(32, 178, 170).hex('#20B2AA'),
    manganeseblue: new Color(3, 168, 158).hex('#03A89E'),
    turquoise: new Color(64, 224, 208).hex('#40E0D0'),
    coldgrey: new Color(128, 138, 135).hex('#808A87'),
    turquoiseblue: new Color(0, 199, 140).hex('#00C78C'),
    aquamarine_1: new Color(127, 255, 212).hex('#7FFFD4'), //(aquamarine)
    aquamarine_2: new Color(118, 238, 198).hex('#76EEC6'),
    aquamarine_3: new Color(102, 205, 170).hex('#66CDAA'), //(mediumaquamarine)
    aquamarine_4: new Color(69, 139, 116).hex('#458B74'),
    mediumspringgreen: new Color(0, 250, 154).hex('#00FA9A'),
    mintcream: new Color(245, 255, 250).hex('#F5FFFA'),
    springgreen: new Color(0, 255, 127).hex('#00FF7F'),
    springgreen_1: new Color(0, 238, 118).hex('#00EE76'),
    springgreen_2: new Color(0, 205, 102).hex('#00CD66'),
    springgreen_3: new Color(0, 139, 69).hex('#008B45'),
    mediumseagreen: new Color(60, 179, 113).hex('#3CB371'),
    seagreen_1: new Color(84, 255, 159).hex('#54FF9F'),
    seagreen_2: new Color(78, 238, 148).hex('#4EEE94'),
    seagreen_3: new Color(67, 205, 128).hex('#43CD80'),
    seagreen_4: new Color(46, 139, 87).hex('#2E8B57'), //(seagreen)
    emeraldgreen: new Color(0, 201, 87).hex('#00C957'),
    mint: new Color(189, 252, 201).hex('#BDFCC9'),
    cobaltgreen: new Color(61, 145, 64).hex('#3D9140'),
    honeydew_1: new Color(240, 255, 240).hex('#F0FFF0'), //(honeydew)
    honeydew_2: new Color(224, 238, 224).hex('#E0EEE0'),
    honeydew_3: new Color(193, 205, 193).hex('#C1CDC1'),
    honeydew_4: new Color(131, 139, 131).hex('#838B83'),
    darkseagreen: new Color(143, 188, 143).hex('#8FBC8F'),
    darkseagreen_1: new Color(193, 255, 193).hex('#C1FFC1'),
    darkseagreen_2: new Color(180, 238, 180).hex('#B4EEB4'),
    darkseagreen_3: new Color(155, 205, 155).hex('#9BCD9B'),
    darkseagreen_4: new Color(105, 139, 105).hex('#698B69'),
    palegreen: new Color(152, 251, 152).hex('#98FB98'),
    palegreen_1: new Color(154, 255, 154).hex('#9AFF9A'),
    palegreen_2: new Color(144, 238, 144).hex('#90EE90'), //(lightgreen)
    palegreen_3: new Color(124, 205, 124).hex('#7CCD7C'),
    palegreen_4: new Color(84, 139, 84).hex('#548B54'),
    limegreen: new Color(50, 205, 50).hex('#32CD32'),
    forestgreen: new Color(34, 139, 34).hex('#228B22'),
    green_1: new Color(0, 255, 0).hex('#00FF00'), //(lime*)
    green_2: new Color(0, 238, 0).hex('#00EE00'),
    green_3: new Color(0, 205, 0).hex('#00CD00'),
    green_4: new Color(0, 139, 0).hex('#008B00'),
    green: new Color(0, 128, 0).hex('#008000'),
    darkgreen: new Color(0, 100, 0).hex('#006400'),
    sapgreen: new Color(48, 128, 20).hex('#308014'),
    lawngreen: new Color(124, 252, 0).hex('#7CFC00'),
    chartreuse_1: new Color(127, 255, 0).hex('#7FFF00'), //(chartreuse)
    chartreuse_2: new Color(118, 238, 0).hex('#76EE00'),
    chartreuse_3: new Color(102, 205, 0).hex('#66CD00'),
    chartreuse_4: new Color(69, 139, 0).hex('#458B00'),
    greenyellow: new Color(173, 255, 47).hex('#ADFF2F'),
    darkolivegreen_1: new Color(202, 255, 112).hex('#CAFF70'),
    darkolivegreen_2: new Color(188, 238, 104).hex('#BCEE68'),
    darkolivegreen_3: new Color(162, 205, 90).hex('#A2CD5A'),
    darkolivegreen_4: new Color(110, 139, 61).hex('#6E8B3D'),
    darkolivegreen: new Color(85, 107, 47).hex('#556B2F'),
    olivedrab: new Color(107, 142, 35).hex('#6B8E23'),
    olivedrab_1: new Color(192, 255, 62).hex('#C0FF3E'),
    olivedrab_2: new Color(179, 238, 58).hex('#B3EE3A'),
    olivedrab_3: new Color(154, 205, 50).hex('#9ACD32'), //(yellowgreen)
    olivedrab_4: new Color(105, 139, 34).hex('#698B22'),
    ivory_1: new Color(255, 255, 240).hex('#FFFFF0'), //(ivory)
    ivory_2: new Color(238, 238, 224).hex('#EEEEE0'),
    ivory_3: new Color(205, 205, 193).hex('#CDCDC1'),
    ivory_4: new Color(139, 139, 131).hex('#8B8B83'),
    beige: new Color(245, 245, 220).hex('#F5F5DC'),
    lightyellow_1: new Color(255, 255, 224).hex('#FFFFE0'), //(lightyellow)
    lightyellow_2: new Color(238, 238, 209).hex('#EEEED1'),
    lightyellow_3: new Color(205, 205, 180).hex('#CDCDB4'),
    lightyellow_4: new Color(139, 139, 122).hex('#8B8B7A'),
    lightgoldenrodyellow: new Color(250, 250, 210).hex('#FAFAD2'),
    yellow_1: new Color(255, 255, 0).hex('#FFFF00'), //(yellow*)
    yellow_2: new Color(238, 238, 0).hex('#EEEE00'),
    yellow_3: new Color(205, 205, 0).hex('#CDCD00'),
    yellow_4: new Color(139, 139, 0).hex('#8B8B00'),
    warmgrey: new Color(128, 128, 105).hex('#808069'),
    olive: new Color(128, 128, 0).hex('#808000'),
    darkkhaki: new Color(189, 183, 107).hex('#BDB76B'),
    khaki_1: new Color(255, 246, 143).hex('#FFF68F'),
    khaki_2: new Color(238, 230, 133).hex('#EEE685'),
    khaki_3: new Color(205, 198, 115).hex('#CDC673'),
    khaki_4: new Color(139, 134, 78).hex('#8B864E'),
    khaki: new Color(240, 230, 140).hex('#F0E68C'),
    palegoldenrod: new Color(238, 232, 170).hex('#EEE8AA'),
    lemonchiffon_1: new Color(255, 250, 205).hex('#FFFACD'), //(lemonchiffon)
    lemonchiffon_2: new Color(238, 233, 191).hex('#EEE9BF'),
    lemonchiffon_3: new Color(205, 201, 165).hex('#CDC9A5'),
    lemonchiffon_4: new Color(139, 137, 112).hex('#8B8970'),
    lightgoldenrod_1: new Color(255, 236, 139).hex('#FFEC8B'),
    lightgoldenrod_2: new Color(238, 220, 130).hex('#EEDC82'),
    lightgoldenrod_3: new Color(205, 190, 112).hex('#CDBE70'),
    lightgoldenrod_4: new Color(139, 129, 76).hex('#8B814C'),
    banana: new Color(227, 207, 87).hex('#E3CF57'),
    gold_1: new Color(255, 215, 0).hex('#FFD700'), //(gold)
    gold_2: new Color(238, 201, 0).hex('#EEC900'),
    gold_3: new Color(205, 173, 0).hex('#CDAD00'),
    gold_4: new Color(139, 117, 0).hex('#8B7500'),
    cornsilk_1: new Color(255, 248, 220).hex('#FFF8DC'), //(cornsilk)
    cornsilk_2: new Color(238, 232, 205).hex('#EEE8CD'),
    cornsilk_3: new Color(205, 200, 177).hex('#CDC8B1'),
    cornsilk_4: new Color(139, 136, 120).hex('#8B8878'),
    goldenrod: new Color(218, 165, 32).hex('#DAA520'),
    goldenrod_1: new Color(255, 193, 37).hex('#FFC125'),
    goldenrod_2: new Color(238, 180, 34).hex('#EEB422'),
    goldenrod_3: new Color(205, 155, 29).hex('#CD9B1D'),
    goldenrod_4: new Color(139, 105, 20).hex('#8B6914'),
    darkgoldenrod: new Color(184, 134, 11).hex('#B8860B'),
    darkgoldenrod_1: new Color(255, 185, 15).hex('#FFB90F'),
    darkgoldenrod_2: new Color(238, 173, 14).hex('#EEAD0E'),
    darkgoldenrod_3: new Color(205, 149, 12).hex('#CD950C'),
    darkgoldenrod_4: new Color(139, 101, 8).hex('#8B6508'),
    orange_1: new Color(255, 165, 0).hex('#FFA500'), //(orange)
    orange_2: new Color(238, 154, 0).hex('#EE9A00'),
    orange_3: new Color(205, 133, 0).hex('#CD8500'),
    orange_4: new Color(139, 90, 0).hex('#8B5A00'),
    floralwhite: new Color(255, 250, 240).hex('#FFFAF0'),
    oldlace: new Color(253, 245, 230).hex('#FDF5E6'),
    wheat: new Color(245, 222, 179).hex('#F5DEB3'),
    wheat_1: new Color(255, 231, 186).hex('#FFE7BA'),
    wheat_2: new Color(238, 216, 174).hex('#EED8AE'),
    wheat_3: new Color(205, 186, 150).hex('#CDBA96'),
    wheat_4: new Color(139, 126, 102).hex('#8B7E66'),
    moccasin: new Color(255, 228, 181).hex('#FFE4B5'),
    papayawhip: new Color(255, 239, 213).hex('#FFEFD5'),
    blanchedalmond: new Color(255, 235, 205).hex('#FFEBCD'),
    navajowhite_1: new Color(255, 222, 173).hex('#FFDEAD'), //(navajowhite)
    navajowhite_2: new Color(238, 207, 161).hex('#EECFA1'),
    navajowhite_3: new Color(205, 179, 139).hex('#CDB38B'),
    navajowhite_4: new Color(139, 121, 94).hex('#8B795E'),
    eggshell: new Color(252, 230, 201).hex('#FCE6C9'),
    tan: new Color(210, 180, 140).hex('#D2B48C'),
    brick: new Color(156, 102, 31).hex('#9C661F'),
    cadmiumyellow: new Color(255, 153, 18).hex('#FF9912'),
    antiquewhite: new Color(250, 235, 215).hex('#FAEBD7'),
    antiquewhite_1: new Color(255, 239, 219).hex('#FFEFDB'),
    antiquewhite_2: new Color(238, 223, 204).hex('#EEDFCC'),
    antiquewhite_3: new Color(205, 192, 176).hex('#CDC0B0'),
    antiquewhite_4: new Color(139, 131, 120).hex('#8B8378'),
    burlywood: new Color(222, 184, 135).hex('#DEB887'),
    burlywood_1: new Color(255, 211, 155).hex('#FFD39B'),
    burlywood_2: new Color(238, 197, 145).hex('#EEC591'),
    burlywood_3: new Color(205, 170, 125).hex('#CDAA7D'),
    burlywood_4: new Color(139, 115, 85).hex('#8B7355'),
    bisque_1: new Color(255, 228, 196).hex('#FFE4C4'), //(bisque)
    bisque_2: new Color(238, 213, 183).hex('#EED5B7'),
    bisque_3: new Color(205, 183, 158).hex('#CDB79E'),
    bisque_4: new Color(139, 125, 107).hex('#8B7D6B'),
    melon: new Color(227, 168, 105).hex('#E3A869'),
    carrot: new Color(237, 145, 33).hex('#ED9121'),
    darkorange: new Color(255, 140, 0).hex('#FF8C00'),
    darkorange_1: new Color(255, 127, 0).hex('#FF7F00'),
    darkorange_2: new Color(238, 118, 0).hex('#EE7600'),
    darkorange_3: new Color(205, 102, 0).hex('#CD6600'),
    darkorange_4: new Color(139, 69, 0).hex('#8B4500'),
    orange: new Color(255, 128, 0).hex('#FF8000'),
    tan_1: new Color(255, 165, 79).hex('#FFA54F'),
    tan_2: new Color(238, 154, 73).hex('#EE9A49'),
    tan_3: new Color(205, 133, 63).hex('#CD853F'), //(peru)
    tan_4: new Color(139, 90, 43).hex('#8B5A2B'),
    linen: new Color(250, 240, 230).hex('#FAF0E6'),
    peachpuff_1: new Color(255, 218, 185).hex('#FFDAB9'), //(peachpuff)
    peachpuff_2: new Color(238, 203, 173).hex('#EECBAD'),
    peachpuff_3: new Color(205, 175, 149).hex('#CDAF95'),
    peachpuff_4: new Color(139, 119, 101).hex('#8B7765'),
    seashell_1: new Color(255, 245, 238).hex('#FFF5EE'), //(seashell)
    seashell_2: new Color(238, 229, 222).hex('#EEE5DE'),
    seashell_3: new Color(205, 197, 191).hex('#CDC5BF'),
    seashell_4: new Color(139, 134, 130).hex('#8B8682'),
    sandybrown: new Color(244, 164, 96).hex('#F4A460'),
    rawsienna: new Color(199, 97, 20).hex('#C76114'),
    chocolate: new Color(210, 105, 30).hex('#D2691E'),
    chocolate_1: new Color(255, 127, 36).hex('#FF7F24'),
    chocolate_2: new Color(238, 118, 33).hex('#EE7621'),
    chocolate_3: new Color(205, 102, 29).hex('#CD661D'),
    chocolate_4: new Color(139, 69, 19).hex('#8B4513'), //(saddlebrown)
    ivoryblack: new Color(41, 36, 33).hex('#292421'),
    flesh: new Color(255, 125, 64).hex('#FF7D40'),
    cadmiumorange: new Color(255, 97, 3).hex('#FF6103'),
    burntsienna: new Color(138, 54, 15).hex('#8A360F'),
    sienna: new Color(160, 82, 45).hex('#A0522D'),
    sienna_1: new Color(255, 130, 71).hex('#FF8247'),
    sienna_2: new Color(238, 121, 66).hex('#EE7942'),
    sienna_3: new Color(205, 104, 57).hex('#CD6839'),
    sienna_4: new Color(139, 71, 38).hex('#8B4726'),
    lightsalmon_1: new Color(255, 160, 122).hex('#FFA07A'), //(lightsalmon)
    lightsalmon_2: new Color(238, 149, 114).hex('#EE9572'),
    lightsalmon_3: new Color(205, 129, 98).hex('#CD8162'),
    lightsalmon_4: new Color(139, 87, 66).hex('#8B5742'),
    coral: new Color(255, 127, 80).hex('#FF7F50'),
    orangered_1: new Color(255, 69, 0).hex('#FF4500'), //(orangered)
    orangered_2: new Color(238, 64, 0).hex('#EE4000'),
    orangered_3: new Color(205, 55, 0).hex('#CD3700'),
    orangered_4: new Color(139, 37, 0).hex('#8B2500'),
    sepia: new Color(94, 38, 18).hex('#5E2612'),
    darksalmon: new Color(233, 150, 122).hex('#E9967A'),
    salmon_1: new Color(255, 140, 105).hex('#FF8C69'),
    salmon_2: new Color(238, 130, 98).hex('#EE8262'),
    salmon_3: new Color(205, 112, 84).hex('#CD7054'),
    salmon_4: new Color(139, 76, 57).hex('#8B4C39'),
    coral_1: new Color(255, 114, 86).hex('#FF7256'),
    coral_2: new Color(238, 106, 80).hex('#EE6A50'),
    coral_3: new Color(205, 91, 69).hex('#CD5B45'),
    coral_4: new Color(139, 62, 47).hex('#8B3E2F'),
    burntumber: new Color(138, 51, 36).hex('#8A3324'),
    tomato_1: new Color(255, 99, 71).hex('#FF6347'), //(tomato)
    tomato_2: new Color(238, 92, 66).hex('#EE5C42'),
    tomato_3: new Color(205, 79, 57).hex('#CD4F39'),
    tomato_4: new Color(139, 54, 38).hex('#8B3626'),
    salmon: new Color(250, 128, 114).hex('#FA8072'),
    mistyrose_1: new Color(255, 228, 225).hex('#FFE4E1'), //(mistyrose)
    mistyrose_2: new Color(238, 213, 210).hex('#EED5D2'),
    mistyrose_3: new Color(205, 183, 181).hex('#CDB7B5'),
    mistyrose_4: new Color(139, 125, 123).hex('#8B7D7B'),
    snow_1: new Color(255, 250, 250).hex('#FFFAFA'), //(snow)
    snow_2: new Color(238, 233, 233).hex('#EEE9E9'),
    snow_3: new Color(205, 201, 201).hex('#CDC9C9'),
    snow_4: new Color(139, 137, 137).hex('#8B8989'),
    rosybrown: new Color(188, 143, 143).hex('#BC8F8F'),
    rosybrown_1: new Color(255, 193, 193).hex('#FFC1C1'),
    rosybrown_2: new Color(238, 180, 180).hex('#EEB4B4'),
    rosybrown_3: new Color(205, 155, 155).hex('#CD9B9B'),
    rosybrown_4: new Color(139, 105, 105).hex('#8B6969'),
    lightcoral: new Color(240, 128, 128).hex('#F08080'),
    indianred: new Color(205, 92, 92).hex('#CD5C5C'),
    indianred_1: new Color(255, 106, 106).hex('#FF6A6A'),
    indianred_2: new Color(238, 99, 99).hex('#EE6363'),
    indianred_4: new Color(139, 58, 58).hex('#8B3A3A'),
    indianred_3: new Color(205, 85, 85).hex('#CD5555'),
    brown: new Color(165, 42, 42).hex('#A52A2A'),
    brown_1: new Color(255, 64, 64).hex('#FF4040'),
    brown_2: new Color(238, 59, 59).hex('#EE3B3B'),
    brown_3: new Color(205, 51, 51).hex('#CD3333'),
    brown_4: new Color(139, 35, 35).hex('#8B2323'),
    firebrick: new Color(178, 34, 34).hex('#B22222'),
    firebrick_1: new Color(255, 48, 48).hex('#FF3030'),
    firebrick_2: new Color(238, 44, 44).hex('#EE2C2C'),
    firebrick_3: new Color(205, 38, 38).hex('#CD2626'),
    firebrick_4: new Color(139, 26, 26).hex('#8B1A1A'),
    red_1: new Color(255, 0, 0).hex('#FF0000'), //(red*)
    red_2: new Color(238, 0, 0).hex('#EE0000'),
    red_3: new Color(205, 0, 0).hex('#CD0000'),
    red_4: new Color(139, 0, 0).hex('#8B0000'), //(darkred)
    maroon: new Color(128, 0, 0).hex('#800000'),
    sgi_beet: new Color(142, 56, 142).hex('#8E388E'),
    sgi_slateblue: new Color(113, 113, 198).hex('#7171C6'),
    sgi_lightblue: new Color(125, 158, 192).hex('#7D9EC0'),
    sgi_teal: new Color(56, 142, 142).hex('#388E8E'),
    sgi_chartreuse: new Color(113, 198, 113).hex('#71C671'),
    sgi_olivedrab: new Color(142, 142, 56).hex('#8E8E38'),
    sgi_brightgray: new Color(197, 193, 170).hex('#C5C1AA'),
    sgi_salmon: new Color(198, 113, 113).hex('#C67171'),
    sgi_darkgray: new Color(85, 85, 85).hex('#555555'),
    sgi_gray_12: new Color(30, 30, 30).hex('#1E1E1E'),
    sgi_gray_16: new Color(40, 40, 40).hex('#282828'),
    sgi_gray_32: new Color(81, 81, 81).hex('#515151'),
    sgi_gray_36: new Color(91, 91, 91).hex('#5B5B5B'),
    sgi_gray_52: new Color(132, 132, 132).hex('#848484'),
    sgi_gray_56: new Color(142, 142, 142).hex('#8E8E8E'),
    sgi_lightgray: new Color(170, 170, 170).hex('#AAAAAA'),
    sgi_gray_72: new Color(183, 183, 183).hex('#B7B7B7'),
    sgi_gray_76: new Color(193, 193, 193).hex('#C1C1C1'),
    sgi_gray_92: new Color(234, 234, 234).hex('#EAEAEA'),
    sgi_gray_96: new Color(244, 244, 244).hex('#F4F4F4'),
    white: new Color(255, 255, 255).hex('#FFFFFF'),
    white_smoke: new Color(245, 245, 245).hex('#F5F5F5'), // (gray 96)
    gainsboro: new Color(220, 220, 220).hex('#DCDCDC'),
    lightgrey: new Color(211, 211, 211).hex('#D3D3D3'),
    silver: new Color(192, 192, 192).hex('#C0C0C0'),
    darkgray: new Color(169, 169, 169).hex('#A9A9A9'),
    gray: new Color(128, 128, 128).hex('#808080'),
    dimgray: new Color(105, 105, 105).hex('#696969'), // (gray 42)
    black: new Color(0, 0, 0).hex('#000000'),
    gray_99: new Color(252, 252, 252).hex('#FCFCFC'),
    gray_98: new Color(250, 250, 250).hex('#FAFAFA'),
    gray_97: new Color(247, 247, 247).hex('#F7F7F7'),
    white_smoke: new Color(245, 245, 245).hex('#F5F5F5'), // (gray 96)
    gray_95: new Color(242, 242, 242).hex('#F2F2F2'),
    gray_94: new Color(240, 240, 240).hex('#F0F0F0'),
    gray_93: new Color(237, 237, 237).hex('#EDEDED'),
    gray_92: new Color(235, 235, 235).hex('#EBEBEB'),
    gray_91: new Color(232, 232, 232).hex('#E8E8E8'),
    gray_90: new Color(229, 229, 229).hex('#E5E5E5'),
    gray_89: new Color(227, 227, 227).hex('#E3E3E3'),
    gray_88: new Color(224, 224, 224).hex('#E0E0E0'),
    gray_87: new Color(222, 222, 222).hex('#DEDEDE'),
    gray_86: new Color(219, 219, 219).hex('#DBDBDB'),
    gray_85: new Color(217, 217, 217).hex('#D9D9D9'),
    gray_84: new Color(214, 214, 214).hex('#D6D6D6'),
    gray_83: new Color(212, 212, 212).hex('#D4D4D4'),
    gray_82: new Color(209, 209, 209).hex('#D1D1D1'),
    gray_81: new Color(207, 207, 207).hex('#CFCFCF'),
    gray_80: new Color(204, 204, 204).hex('#CCCCCC'),
    gray_79: new Color(201, 201, 201).hex('#C9C9C9'),
    gray_78: new Color(199, 199, 199).hex('#C7C7C7'),
    gray_77: new Color(196, 196, 196).hex('#C4C4C4'),
    gray_76: new Color(194, 194, 194).hex('#C2C2C2'),
    gray_75: new Color(191, 191, 191).hex('#BFBFBF'),
    gray_74: new Color(189, 189, 189).hex('#BDBDBD'),
    gray_73: new Color(186, 186, 186).hex('#BABABA'),
    gray_72: new Color(184, 184, 184).hex('#B8B8B8'),
    gray_71: new Color(181, 181, 181).hex('#B5B5B5'),
    gray_70: new Color(179, 179, 179).hex('#B3B3B3'),
    gray_69: new Color(176, 176, 176).hex('#B0B0B0'),
    gray_68: new Color(173, 173, 173).hex('#ADADAD'),
    gray_67: new Color(171, 171, 171).hex('#ABABAB'),
    gray_66: new Color(168, 168, 168).hex('#A8A8A8'),
    gray_65: new Color(166, 166, 166).hex('#A6A6A6'),
    gray_64: new Color(163, 163, 163).hex('#A3A3A3'),
    gray_63: new Color(161, 161, 161).hex('#A1A1A1'),
    gray_62: new Color(158, 158, 158).hex('#9E9E9E'),
    gray_61: new Color(156, 156, 156).hex('#9C9C9C'),
    gray_60: new Color(153, 153, 153).hex('#999999'),
    gray_59: new Color(150, 150, 150).hex('#969696'),
    gray_58: new Color(148, 148, 148).hex('#949494'),
    gray_57: new Color(145, 145, 145).hex('#919191'),
    gray_56: new Color(143, 143, 143).hex('#8F8F8F'),
    gray_55: new Color(140, 140, 140).hex('#8C8C8C'),
    gray_54: new Color(138, 138, 138).hex('#8A8A8A'),
    gray_53: new Color(135, 135, 135).hex('#878787'),
    gray_52: new Color(133, 133, 133).hex('#858585'),
    gray_51: new Color(130, 130, 130).hex('#828282'),
    gray_50: new Color(127, 127, 127).hex('#7F7F7F'),
    gray_49: new Color(125, 125, 125).hex('#7D7D7D'),
    gray_48: new Color(122, 122, 122).hex('#7A7A7A'),
    gray_47: new Color(120, 120, 120).hex('#787878'),
    gray_46: new Color(117, 117, 117).hex('#757575'),
    gray_45: new Color(115, 115, 115).hex('#737373'),
    gray_44: new Color(112, 112, 112).hex('#707070'),
    gray_43: new Color(110, 110, 110).hex('#6E6E6E'),
    gray_42: new Color(107, 107, 107).hex('#6B6B6B'),
    dimgray: new Color(105, 105, 105).hex('#696969'), // (gray 42)
    gray_40: new Color(102, 102, 102).hex('#666666'),
    gray_39: new Color(99, 99, 99).hex('#636363'),
    gray_38: new Color(97, 97, 97).hex('#616161'),
    gray_37: new Color(94, 94, 94).hex('#5E5E5E'),
    gray_36: new Color(92, 92, 92).hex('#5C5C5C'),
    gray_35: new Color(89, 89, 89).hex('#595959'),
    gray_34: new Color(87, 87, 87).hex('#575757'),
    gray_33: new Color(84, 84, 84).hex('#545454'),
    gray_32: new Color(82, 82, 82).hex('#525252'),
    gray_31: new Color(79, 79, 79).hex('#4F4F4F'),
    gray_30: new Color(77, 77, 77).hex('#4D4D4D'),
    gray_29: new Color(74, 74, 74).hex('#4A4A4A'),
    gray_28: new Color(71, 71, 71).hex('#474747'),
    gray_27: new Color(69, 69, 69).hex('#454545'),
    gray_26: new Color(66, 66, 66).hex('#424242'),
    gray_25: new Color(64, 64, 64).hex('#404040'),
    gray_24: new Color(61, 61, 61).hex('#3D3D3D'),
    gray_23: new Color(59, 59, 59).hex('#3B3B3B'),
    gray_22: new Color(56, 56, 56).hex('#383838'),
    gray_21: new Color(54, 54, 54).hex('#363636'),
    gray_20: new Color(51, 51, 51).hex('#333333'),
    gray_19: new Color(48, 48, 48).hex('#303030'),
    gray_18: new Color(46, 46, 46).hex('#2E2E2E'),
    gray_17: new Color(43, 43, 43).hex('#2B2B2B'),
    gray_16: new Color(41, 41, 41).hex('#292929'),
    gray_15: new Color(38, 38, 38).hex('#262626'),
    gray_14: new Color(36, 36, 36).hex('#242424'),
    gray_13: new Color(33, 33, 33).hex('#212121'),
    gray_12: new Color(31, 31, 31).hex('#1F1F1F'),
    gray_11: new Color(28, 28, 28).hex('#1C1C1C'),
    gray_10: new Color(26, 26, 26).hex('#1A1A1A'),
    gray_9: new Color(23, 23, 23).hex('#171717'),
    gray_8: new Color(20, 20, 20).hex('#141414'),
    gray_7: new Color(18, 18, 18).hex('#121212'),
    gray_6: new Color(15, 15, 15).hex('#0F0F0F'),
    gray_5: new Color(13, 13, 13).hex('#0D0D0D'),
    gray_4: new Color(10, 10, 10).hex('#0A0A0A'),
    gray_3: new Color(8, 8, 8).hex('#080808'),
    gray_2: new Color(5, 5, 5).hex('#050505'),
    gray_1: new Color(3, 3, 3).hex('#030303')
});


const MaterialFiveHundredlColors = Object.freeze({
    SOFT_ORANGE: new Color(244, 67, 54),
    SOFT_RED: new Color(233, 30, 99),
    MAGENTA: new Color(156, 39, 176),
    VIOLET: new Color(103, 58, 183),
    DARGK_BLUE: new Color(63, 81, 181),
    BLUE: new Color(33, 150, 243),
    LIGHT_BLUE: new Color(3, 169, 244),
    BLUE_GREEN: new Color(0, 188, 212),
    SEA_GREEN: new Color(0, 150, 136),
    GREEN: new Color(76, 175, 80),
    LIGHT_GREEN: new Color(139, 195, 74),
    YELLOW: new Color(205, 220, 57),
    GOLD: new Color(255, 235, 59),
    YELLO_ORANGE: new Color(255, 152, 0),
    ORANGE: new Color(255, 87, 34),
})/* # SUB_LIST # */
/* ## siding.js ## */
/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * COPYRIGHT and LICENCE are owned by its creator Christian Martin 
 * Copy, altering or distribution without the allowance of the owner are prohibited
 */

/**
 * 
 */
const SizeUnits = Object.freeze({
    PIXEL: "px",
    PERCENT: "%"
})


class DirectionUnitDependentAttribute {
    _unit;
    _fFirst;
    _fSecond;
    _fThird;
    _fForth;

    constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
        this._unit = defaultUnit;
        this._fFirst = defaultValue;
        this._fSecond = defaultValue;
        this._fThird = defaultValue;
        this._fForth = defaultValue;
    }

    /**
     * 
     * @param {Units} unit The unit of the amount or style
     * @returns {DirectionUnitDependentAttribute} this - Object
     */
    setUnit(unit) {
        this._unit = unit;
        return this;
    }

    /**
     * 
     * @returns {array<*>} list of attributes
     */
    getOrderedAttributes() {
        return [this._fFirst, this._fSecond, this._fThird, this._fForth];
    }

    /**
     * @returns {Array<string>}
     */
    getOrderedValues() {
        return this.getOrderedAttributes().map(a => a + this._unit);
    }

    /**
     * Since the basic values are from "first" to "fourth",
     * they can be also accessed in the ordered way. 
     * 
     * Mainly used by the setup of directions of subclasses.
     * @param {number} index [1,4]
     * @param {number} value 
     * @returns {DirectionUnitDependentAttribute} this
     */
    setByIndex(index, value) {
        switch (index) {
            case 1:
                this._fFirst = value;
                break;
            case 2:
                this._fSecond = value;
                break;
            case 3:
                this._fThird = value;
                break;
            case 4:
                this._fForth = value;
                break;

            default:
                this._fFirst = value;
                break;
        }
        return this;
    }

    /**
     * Since the basic values are from "first" to "fourth",
     * they can be also accessed in the ordered way. 
     * 
     * Mainly used by the setup of directions of subclasses.
     * @param {number} index [1,4]
     * @returns {*} this value of index 
     */
    getByIndex(index) {
        switch (index) {
            case 1:
                return this._fFirst;
            case 2:
                return this._fSecond;
            case 3:
                return this._fThird;
            case 4:
                return this._fForth;

            default:
                return this._fFirst;
        }
    }

    /**
     * Placeholder for overrides
     * @returns {Object}
     */
    toModifications() {
        return this.getOrderedValues()
    }


    /**
     * sets the amount-value for all directions.
     * @param {number} amount value to set for all directions
     * @returns {DirectionUnitDependentAttribute} this 
     */
    all(amount) {
        this._fFirst = amount;
        this._fSecond = amount;
        this._fThird = amount;
        this._fForth = amount;
        return this;
    }

}


class Sides extends DirectionUnitDependentAttribute {
    /**
     * 
     * @param {number|string} defaultValue 
     * @param {SizeUnits} defaultUnit 
     */
    constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
        super(defaultValue, defaultUnit);
    }


    /**
     * sets the amount-value for the left side.
     * @param {number} amount siding for left
     * @returns {Siding} this Siding Object
     */
    left(amount) {
        return this.setByIndex(1, amount);
    }

    /**
     * sets the amount-value for the right side.
     * @param {number} amount siding for right
     * @returns {Siding} this Siding Object
     */
    right(amount) {
        return this.setByIndex(3, amount);
    }

    /**
     * sets the amount-value for the top side.
     * @param {number} amount siding for top
     * @returns {Siding} this Siding Object
     */
    top(amount) {
        return this.setByIndex(2, amount);
    }

    /**
     * sets the amount-value for the bottom side.
     * @param {number} amount siding for bottom
     * @returns {Siding} this Siding Object
     */
    bottom(amount) {
        return this.setByIndex(4, amount);
    }


    /**
     * sets the amount-value for the horizontal sides (left and right).
     * @param {number} amount siding for left and right.
     * @returns {Sides} this Siding Object
     */
    horizontal(amount) {
        return this.left(amount).right(amount);
    }

    /**
     * sets the amount-value for the vertical sides (left and right).
     * @param {number} amount siding for top and bottom.
     * @returns {Sides} this Siding Object
     */
    vertical(amount) {
        return this.top(amount).bottom(amount);
    }

    toModifications() {
        return [
            { key: "left", value: this._fFirst + this._unit },
            { key: "top", value: this._fSecond + this._unit },
            { key: "right", value: this._fThird + this._unit },
            { key: "bottom", value: this._fForth + this._unit }
        ]
    }
}


class PaddingChain extends Sides {
    _modifier;
    constructor(modifier) {
        super();
        this._modifier = modifier;
    }

    toModifier() {
        return this._modifier
            .padding(this);
    }

    /**
     * Returns the corresponding Modifier.
     * Basically climbs up the chain level.
     * @returns {Modifier} 
     */
    ensureModifier() {
        return this.toModifier()
    }

    /**
     * Returns the style-modifications of the class.
     * @returns {Map<string,string>}
     */
    toModifications() {
        return [
            { key: "padding-left", value: this._fFirst + this._unit },
            { key: "padding-top", value: this._fSecond + this._unit },
            { key: "padding-right", value: this._fThird + this._unit },
            { key: "padding-bottom", value: this._fForth + this._unit }
        ]
    }

    /**
     * 
     * @returns {Component} the Component that was (supposed to be) modified by this obj.
     */
    toComponent() {
        return this._modifier
            .padding(this)
            .toComponent();
    }

    /**
     * 
     * @param {Component|Array<Component>} innerComponent children of the Component under modification.
     * @returns {Component}
     */
    childContext(innerComponent) {
        return this._modifier
            .padding(this)
            .toComponent()
            .childContext(innerComponent);
    }
}

/* ## shapes.js ## */
/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * COPYRIGHT and LICENCE are owned by its creator Christian Martin 
 * Copy, altering or distribution without the allowance of the owner are prohibited
 */

/**
 * 
 */
class Shape extends DirectionUnitDependentAttribute {
    constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
        super(defaultValue, defaultUnit);
    }
    /**
     * 
     * @param {*} amount 
     * @returns {Shape}
     */
    topLeft(amount) {
        this._fFirst = amount;
        return this;
    }
    /**
     * 
     * @param {*} amount 
     * @returns {Shape}
     */
    topRight(amount) {
        this._fSecond = amount;
        return this;
    }
    /**
     * 
     * @param {*} amount 
     * @returns {Shape}
     */
    bottomLeft(amount) {
        this._fForth = amount;
        return this;
    }
    /**
     * 
     * @param {*} amount 
     * @returns {Shape}
     */
    bottomRight(amount) {
        this.fThird = amount;
        return this;
    }
    /**
     * 
     * @param {*} amount 
     * @returns {Shape}
     */
    diagonalPositive(amount) {
        return this.bottomLeft(amount).topRight(amount);
    }
    /**
     * 
     * @param {*} amount 
     * @returns {Shape}
     */
    diagonalNegative(amount) {
        return this.topLeft(amount).bottomRight(amount);
    }

    left(amount) {
        return this.topLeft(amount).bottomLeft(amount);
    }

    right(amount) {
        return this.topRight(amount).bottomRight(amount);
    }

    /**
     * 
     * @param {*} amount 
     */
    getSidingRefValueMap() {
        return {
            [SidingRefCorners.TOPLEFT]: this.getBySidingRef(SidingRefCorners.TOPLEFT),
            [SidingRefCorners.TOPRIGHT]: this.getBySidingRef(SidingRefCorners.TOPRIGHT),
            [SidingRefCorners.BOTTOMLEFT]: this.getBySidingRef(SidingRefCorners.BOTTOMLEFT),
            [SidingRefCorners.BOTTOMRIGHT]: this.getBySidingRef(SidingRefCorners.BOTTOMRIGHT),
        }
    }
}

class ShapeChain extends Shape {
    _modifier;
    constructor(modifier) {
        super();
        this._modifier = modifier;
    }

    /**
       * 
       * @returns {Modifier|ChainableModifier}
       */
    toModifier() {
        return this._modifier
            .clip(this);
    }
    /**
      * 
      * @returns {Modifier|ChainableModifier}
      */
    ensureModifier() {
        return this.toModifier()
    }


    /**
     * 
     * @returns {Component} the Component that was (supposed to be) modified by this obj.
     */
    toComponent() {
        return this._modifier
            .clip(this)
            .toComponent();
    }

    /**
     * 
     * @param {Component|Array<Component>} innerComponent children of the Component under modification.
     * @returns {Component}
     */
    childContext(innerComponent) {
        return this._modifier
            .clip(this)
            .toComponent()
            .childContext(innerComponent);
    }
}

const Shapes = Object.freeze({
    Rectangle: new Shape(),
    RoundedCorner: new Shape(),
    Circle: new Shape(49, SizeUnits.PERCENT)
})
/* ## border.js ## */
/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * COPYRIGHT and LICENCE are owned by its creator Christian Martin 
 * Copy, altering or distribution without the allowance of the owner are prohibited
 */

/**
 * 
 */
const LineStyles = Object.freeze({
    dotted: "dotted",
    dashed: "dashed",
    solid: "solid",
    double: "double",
    groove: "groove",
    ridge: "ridge",
    inset: "inset",
    outset: "outset",
    none: "none",
    hidden: "hidden"
})

class BorderDefinition {
    constructor(width = 0, color = Colors.black, style = LineStyles.solid) {
        this._width = width;
        this._color = color;
        this._style = style;
    }

    width(width) {
        this._width = width;
        return this;
    }
    color(color) {
        this._color = color;
        return this;
    }
    style(style) {
        this._style = style;
        return this;
    }
    join(def) {
        Object.keys(def)
            .forEach(key => this[key] = def[key]);
        return this;
    }
}

const Define = Object.freeze({
    width: new BorderDefinition().width,
    style: new BorderDefinition().style,
    color: new BorderDefinition().color
})

class Border extends Sides {
    constructor(width = 0, color = Colors.black, style = LineStyles.solid, defaultUnit = SizeUnits.PIXEL, shape = Shapes.Rectangle) {
        super(0, defaultUnit);
        this._fFirst = new BorderDefinition(width, color, style);
        this._fSecond = new BorderDefinition(width, color, style);
        this._fThird = new BorderDefinition(width, color, style);
        this._fForth = new BorderDefinition(width, color, style);
        this._shape = shape;
    }

    setByIndex(index, value) {
        if (value instanceof BorderDefinition) {
            this.getByIndex(index).join(value)
        } else {
            this.getByIndex(index)._width = value
        }
        return this;
    }

    /**
     * 
     * @param {string} key 
     * @param {*} value 
     */
    setOnDirections(key, value) {
        let orderedAttributes = this.getOrderedAttributes()
        for (let i = 0; i < this.getOrderedAttributes.length; i++) {
            orderedAttributes[i][key] = value;
        }
        return this;
    }

    /**
     * 
     * @param {number} width 
     * @returns {Border}
     */
    width(width) {
        this._fFirst._width = width;
        this._fSecond._width = width;
        this._fThird._width = width;
        this._fForth._width = width;
        return this;
    }

    /**
     * 
     * @param {*} color 
     * @returns {Border}
    */
    color(color) {
        this._fFirst._color = color;
        this._fSecond._color = color;
        this._fThird._color = color;
        this._fForth._color = color;
        return this;
    }

    shape(shape) {
        this._shape = shape;
        return this;
    }

    /**
     * Sets the border-style of all sides to the given. 
     * @param {LineStyles} lineStyle style of the border
     * @returns {Border}
     */
    setStyleAll(lineStyle) {
        this._fFirst._style = lineStyle;
        this._fSecond._style = lineStyle;
        this._fThird._style = lineStyle;
        this._fForth._style = lineStyle;
        return this;
    }

    /**
     * 
     * @param {LineStyles} lineStyle 
     * @param {*} sidingRefSide 
     * @returns {Border}
     */
    setLineStyle(lineStyle, sidingRefSide) {
        this._sidingStyles.setBySidingRef(sidingRefSide, lineStyle)
        return this;
    }

    /**
     * 
     * @param {Map<SidingRefSides, LineStyles} refSideStyleMap 
     * @returns {Border}
     */
    setLineStyles(refSideStyleMap) {
        let rkeys = Object.keys(refSideStyleMap);
        for (let i = 0; i < array.length; i++) {
            this._sidingStyles.setBySidingRef(rkeys[i]) = refSideStyleMap[rkeys[i]];
        }
        return this;
    }


    toModifications() {
        let names = ["left", "top", "right", "bottom"];
        return this.getOrderedAttributes()
            .flatMap((bdef, i) => {
                if (bdef.width == 0)
                    return []

                return [
                    { key: `border-${names[i]}-width`, value: bdef._width + this._unit },
                    { key: `border-${names[i]}-color`, value: bdef._color },
                    { key: `border-${names[i]}-style`, value: bdef._style }
                ]
            })
    }
}


class BorderChain extends Border {
    constructor(modifier){
        super();
        this._modifier = modifier;
    }

    /**
     * 
     * @returns {Modifier|ChainableModifier}
     */
    toModifier() {
        return this._modifier
            .border(this);
    }

    /**
     * 
     * @returns {Modifier|ChainableModifier}
     */
    ensureModifier() {
        return this.toModifier()
    }

    /**
     * Applies the border modification on the modifier
     * and returns (through the modifier) to the corresponding component. 
     * @returns {Component}
     */
    toComponent() {
        return this._modifier
            .border(this)
            .toComponent();
    }

    /**
     * 
     * @param {Component} innerComponent will be set to the corresponding component
     * @returns {Component} the corr. Component after the childContext was applied. 
     */
    childContext(innerComponent) {
        return this._modifier
            .border(this)
            .toComponent()
            .childContext(innerComponent);
    }
}
/* ## dimensions.js ## */
/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * COPYRIGHT and LICENCE are owned by its creator Christian Martin 
 * Copy, altering or distribution without the allowance of the owner are prohibited
 */

/**
 * Simple Dimensions container for the height and width in pixels.
 */
class Dimensions extends DirectionUnitDependentAttribute {
    constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
        super();
        this._unit = defaultUnit;
        this._fFirst = defaultValue;
        this._fSecond = defaultValue;
    }

    /**
     * Sets width (x) value of amount
     * @param {number} amount 
     * @returns {Dimensions} this Dimensions Modifier
     */
    width(amount) {
        this._fFirst = amount;
        return this;
    }

    /**
     * Sets height (y) value of amount
     * @param {number} amount 
     * @returns {Dimensions} this Dimensions Modifier
     */
    height(amount) {
        this._fSecond = amount;
        return this;
    }

    all(size) {
        return this.width(size).height(size);
    }


    getOrderedValues() {
        return this.getOrderedValues().slice(2)
    }

    toModifications() {
        let w = { key: "width", value: this._fFirst + this._unit }
        let h = { key: "height", value: this._fSecond + this._unit }
        let is_w = this._fFirst > 0;
        let is_h = this._fSecond > 0;
        if (is_h && is_w) {
            return [w, h]
        } else if (is_w) {
            return [w]
        } else if (is_h) {
            return [h]
        } else {
            return []
        }
    }
}


class DimensionsChain extends Dimensions {
    _modifier;
    constructor(modifier) {
        super();
        this._modifier = modifier;
    }

    /**
     * 
     * @returns {Modifier|ChainableModifier}
     */
    toModifier() {
        return this._modifier
            .dimensions(this);
    }

    /**
     * 
     * @returns {Modifier|ChainableModifier}
     */
    ensureModifier() {
        return this.toModifier()
    }

    /**
     * 
     * @returns {Component} the Component that was (supposed to be) modified by this obj.
     */
    toComponent() {
        return this._modifier
            .dimensions(this)
            .toComponent();
    }

    /**
     * 
     * @param {Component|Array<Component>} innerComponent children of the Component under modification.
     * @returns {Component}
     */
    childContext(innerComponent) {
        return this._modifier
            .dimensions(this)
            .toComponent()
            .childContext(innerComponent);
    }
}

/* # MODIFIERS_LIST # */
/* ## alignment.js ## */
/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * COPYRIGHT and LICENCE are owned by its creator Christian Martin 
 * Copy, altering or distribution without the allowance of the owner are prohibited
 */

/**
 * Enum providing common alignment rules
 */
const Alignment = Object.freeze({
    /* Normal alignment */
    NORMAL: "normal",

    /* Basic positional alignment */
    /* align-content does not take left and right values */
    START: "start",
    CENTER: "center",
    END: "end",
    FLEX_START: "flex-start",
    FLEX_END: "flex-end",

    /* Baseline alignment */
    BASELINE: "baseline",
    FIRST_BASELINE: "first baseline",
    LAST_BASELINE: "last baseline",

    /* Distributed alignment */
    SPACE_BETWEEN: "space-between",
    SPACE_AROUND: "space-around",
    SPACE_EVENLY: "space-evenly",
    STRETCH: "stretch",

    /* Overflow alignment */
    SAFE_CENTER: "safe center",
    UNSAFE_CENTER: "unsafe center",

    /* Global values */
    INHERIT: "inherit",
    INITIAL: "initial",
    REVERT: "revert",
    REVERT_LAYER: "revert-layer",
    UNSET: "unset"
})
/* ## arrangement.js ## */
/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * COPYRIGHT and LICENCE are owned by its creator Christian Martin 
 * Copy, altering or distribution without the allowance of the owner are prohibited
 */

/**
 * Enum providing common alignment rules
 */
const Arrangement = Object.freeze({
    START: "start",
    END: "end",
    CENTER: "center",
    SPACE_BETWEEN: "space-between",
    SPACE_EVENLY: "space-evenly",
    SPACE_AROUND: "space-around",

})
/* ## modifier.js ## */
/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * COPYRIGHT and LICENCE are owned by its creator Christian Martin 
 * Copy, altering or distribution without the allowance of the owner are prohibited
 */

/**
 * A chained class that sets most of the stylings of an element
 * Attributes:
 *  _modifications: {Object}
 */
class Modifier {
    /**
     * @property {Map<string,string>} _modifications
     */
    _modifications;
    _shape;

    constructor() {
        this._modifications = new Object();
    }

    /**
     * Sets the modifications for widht and height to 100%. 
     * @returns {Modifier} this modifier object
     */
    fillMaxSize(widthFraction = 1, heightFraction = 1) {
        return this.fillMaxWidth(widthFraction)
            .fillMaxHeight(heightFraction);
    }

    /**
     * Sets the modification for width to the given fraction of 1 (default 1 := 100%).
     * @param {number} fraction 
     * @returns {Modifier} this modifier object
    */
    fillMaxWidth(fraction = 1) {
        this._modifications["width"] = (100 * fraction) + "%";
        return this;
    }

    /**
     * Sets the modification for height to the given fraction of 1 (default 1 := 100%).
     * @param {number} fraction 
     * @returns {Modifier} this modifier object
     */
    fillMaxHeight(fraction = 1) {
        this._modifications["height"] = (100 * fraction) + "%";
        return this;
    }

    /**
     * Sets modifications according to the dimensions object.
     * @param {Dimensions} dimensions 
     * @returns {Modifier} this modifier object
     */
    dimensions(dimensions) {
        dimensions.toModifications()
            .forEach(kvpair => {
                this._modifications[kvpair.key] = kvpair.value;
            })
        return this;
    }

    /**
     * Sets the padding on all sides according to the given padding object. 
     * Currently the padding will always be set 
     * to the most recent padding/padding. 
     * @param {Sides} siding
     * @returns {Modifier} this modifier object
     */
    padding(siding) {
        let keyToAdd = "";
        if (siding instanceof PaddingChain) {

        } else if (siding instanceof Sides) {
            keyToAdd = "padding-"
        }
        siding.toModifications()
            .forEach(kvpair => {
                this._modifications[keyToAdd + kvpair.key] = kvpair.value;
            })
        return this;
    }

    /**
     * Sets the margin on all sides according to the given siding object. 
     * Currently the margin will always be set 
     * to the most recent margin/siding. 
     * @param {Sides} siding 
     * @returns {Modifier} this modifier object
     */
    margin(siding) {
        let keyToAdd = "";
        if (siding instanceof Sides) {
            keyToAdd = "margin-"
        }

        siding.toModifications()
            .forEach(kvpair => {
                this._modifications[keyToAdd + kvpair.key] = kvpair.value;
            });
        return this;
    }

    /**
     * Sets the background-color as a rgb color.
     * @param {Color} color 
     * @returns {Modifier} this modifier object
     */
    background(color) {
        this._modifications["background-color"] = color.cssRGBString();
        return this;
    }

    /**
     * Sets the color as a rgb color.
     * @param {Color} color 
     * @returns {Modifier} this modifier object
     */
    color(color) {
        this._modifications["color"] = color.cssRGBString();
        return this;
    }

    /**
     * Adds the modifications of the given Modifier to current Modifier.
     * This is especailly used in the cases of extending existing/pre defined 
     * Components.
     * CAUTION matching existing modifications will be overwritten. 
     * @param modifier The "new" Modifier
     * @returns {Modifier} The "old/current" Modifier, 
     * extended with the modifications of the given Modifier.
     */
    join(modifier, modifications = {}) {
        var keys = Object.keys(modifier.ensureModifier()._modifications);
        for (let i = 0; i < keys.length; i++) {
            /* if (!this._modifications.hasOwnProperty(keys[i])) */
            this._modifications[keys[i]] = modifier.ensureModifier()._modifications[keys[i]];
        }
        return this;
    }

    /**
     * 
     * @param {string} key a css style rule
     * @param {string} value the corresponding value to the css style rule
     * @returns {Modifier} this modifier object
     */
    setStyleRule(key, value) {
        this._modifications[key] = value;
        return this;
    }

    /**
     * Sets a border line (with given linestyle) to all sides. 
     * If lineStyle is an array, the containing LineStyles, 
     * are applied in the order: [top, right, bottom, left].
     * If the border has a shape defined, 
     * this shape will override earlier shape definitions.
     * Otherwise existing shape definitions will be applied.
     * @param {Border} border the style of the border line
     * @returns {Modifier} this modifier object
     */
    border(border) {
        if (border._shape){
            this.clip(border._shape);
        }else if(this._shape){
            border._shape = this._shape;
        }
        border.toModifications()
            .forEach(e => this._modifications[e.key] = e.value);
        return this;
    }

    /**
     * 
     * @param {Shape} shape 
     * @returns {Modifier} 
     */
    clip(shape) {
        this._shape = shape;
        this._modifications["border-radius"] = shape.getOrderedValues().join(' ');
        return this;
    }

    /**
     * 
     * @param {number} size of width and height in pixels
     * @returns {DimensionsChain} 
     */
    linkDimensions(size = -1) {
        if (size === -1) {
            return new DimensionsChain(this);
        } else {
            return new DimensionsChain(this).all(size).ensureModifier()
        }
    }

    /**
     * 
     * @param {number} amount the padding for all four sides
     * @returns {PaddingChain} 
     */
    linkPadding(amount = -1) {
        if (amount === -1) {
            return new PaddingChain(this);
        } else {
            return new PaddingChain(this).all(amount);
        }
    }

    /**
     * 
     * @param {number} cornerRadius will create a rounded rectangle with the given cornerRadius
     * @returns {ShapeChain}
     */
    linkClip(cornerRadius = -1) {
        if (cornerRadius === -1) {
            return new ShapeChain(this);
        } else {
            return new ShapeChain(this).all(cornerRadius);
        }
    }

    /**
     * 
     * @param {number} borderWidth sets the width of all four border sides
     * @returns {BorderChain}
     */
    linkBorder(borderWidth = -1) {
        if (borderWidth === -1) {
            return new BorderChain(this);
        } else {
            return new BorderChain(this).width(borderWidth);
        }
    }

    /**
     * 
     * @returns {Modifier}
     */
    ensureModifier() {
        return this;
    }

}

class ChainableModifier extends Modifier {
    _component;

    constructor(component) {
        super();
        this._component = component;
    }

    /**
     * 
     * @returns {Component}
     */
    toComponent() {
        return this._component.modifier(this);
    }

    /**
     * 
     * @param {Component|Array<Component>} innerComponent 
     * @returns {Component} the parent Component
     */
    childContext(innerComponent) {
        return this._component
            .modifier(this)
            .childContext(innerComponent);
    }
}
/* # HIGHER_LIST # */
/* ## commonEvents.js ## */
/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * COPYRIGHT and LICENCE are owned by its creator Christian Martin 
 * Copy, altering or distribution without the allowance of the owner are prohibited
 */

/**
 * Enum to access common events
 */
const CommonEvents = Object.freeze({
    ONCLICK: "onclick",
    ONCHANGE: "onchange"
})

/* ## context.js ## */
/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * COPYRIGHT and LICENCE are owned by its creator Christian Martin 
 * Copy, altering or distribution without the allowance of the owner are prohibited
 */

/**
 * The class provides overreaching options for building the website.
 */
class PageBuilder {
    #cssClasses;
    #functions;
    #delayedFunctions;
    #repeatingFunctions;
    #functionNames;
    #cssElementIdentifiers;

    constructor() {
        this.#cssClasses = document.createElement("style");
        this.#functions = document.createElement("script");
        this.#functionNames = [];
        this.#cssElementIdentifiers = [];
    }

    /**
     * Registers a function to be added later in a script tag in the head of the document.
     * @ATTENTION Be careful with intended empty strings (e.g. in variable values), 
     *              empty strings within the function code will be shrunk.
     * @param {string} name 
     * @param {function} fun 
     */
    registerFunction(name, fun) {
        /**
         * Is supposed to shrink all empty strings to length 1
         * @param {string} text 
         * @returns {string}
         */
        function shrinkEmptyStrings(text){
            for (let i = 1; i < 10; i++) {
                text = text.replaceAll("          ".slice(i), ' ');
            }
            return text;
        }
        if (!this.#functionNames.includes(name)) {
            let clearedFuncText = shrinkEmptyStrings(
                fun.toString()
                    .replaceAll('\n', ' ')
                    .replaceAll('\r\n', ' ')
                    .replaceAll('\n\r', ' ')
            );
            let isFuncWritten = clearedFuncText.startsWith('function'); 
            let funcHasName = fun.name && fun.name.trim() !== '';
            if(isFuncWritten){
                let isNameInFuncText = clearedFuncText.startsWith(`function ${name}`);
                this.#functions.innerText += (funcHasName && isNameInFuncText
                    ? clearedFuncText
                    : clearedFuncText.replace('function ', 'function '+name)
                )+'; ';
            }else{
                this.#functions.innerText += `const ${name} = ${clearedFuncText}; `
            }
            this.#functionNames.push(name);
        }
        return this;
    }


    registerNamedFunction(namedFunction) {
        return this.registerFunction(namedFunction.name, namedFunction)
    }

    /**
     * @experimental Attention is adviced, registration mechanism doesn't work yet
     * @param {string} name The name the interval will be tied to
     * @param {Function} fun the function that is supposed to be executed repeatedly
     * @param {number} interval the time in ms between executions
     */
    registerRepeatingFunction(name, fun, interval) {
        if (!Object.keys(this.#repeatingFunctions).includes(name)) {
            this.#repeatingFunctions[name] = {
                name: name,
                fun: fun,
                interval: interval
            };
        }
    }

    /**
     * Adds the styling rules to the element identifiers into the style tag.
     * An elementDefinition can only be used once, repeated use will be ignored.
     * @param {string} elementDefinition The element identifier
     * @param {Map<string, string>} styleRuleMap The Styling rules/values
     */
    registerStyling(elementDefinition, styleRuleMap) {
        if (!this.#cssElementIdentifiers.includes(elementDefinition)) {
            this.#cssClasses.innerText += `${elementDefinition
                } {${Object.keys(styleRuleMap)
                    .map(e => e + ": " + styleRuleMap[e] + "; ")
                    .join(" ")
                }} `
            this.#cssElementIdentifiers.push(elementDefinition)
        }
    }

    /**
     * Adds into the (head) document. 
     * - script tag
     * - function tag
     * - sets and registers repeatedly executed functions
     * - sets (timeout and) functions that are supposed to be executed after load
     */
    generate() {
        let head = document.querySelector("head");
        head.appendChild(this.#functions)
        head.appendChild(this.#cssClasses)

        /* set repeating functions  */
        if (this.#repeatingFunctions) {
            let repeatedFun = Object.values(this.#repeatingFunctions)
                .reduce((a, c, i, arr) => Object.assign(a, {
                    [c.name]: setInterval(c.fun, c.interval)
                }), {});
        }

        /* set timeouts for funcitons executed after load */
        if (this.#delayedFunctions) {
            for (let i = 0; i < this.#delayedFunctions.length; i++) {
                let func = this.#delayedFunctions[i];
                if (func.repeat) {
                    setTimeout(setInterval(func.func, func.interval), func.dl, func.args);
                } else {
                    setTimeout(func.func, func.dl, func.args);
                }
            }
        }
        console.log(this.#functionNames);
    }

    /**
     * Registeres a function to be executed after page-load
     * @param {Function} func the function that will be executed
     * @param {number} delay the time in ms the execution is delayed after load
     * @param {string} name if provided the function will be registered as well
     * @param {Array<any>} args arguments for the function
     * @param {boolean} repeat defines if the function is supposed to be repeated as well
     * @param {number} interval if the function is supposed to repeat, this defines the interval of repetition
     */
    executeAfterLoad(func, delay = 1000, name = '', args = [], repeat = false, interval = 5000) {
        if (name !== '') {
            this.registerFunction(name, func);
        }
        if (!this.#delayedFunctions) {
            this.#delayedFunctions = [];
        }
        this.#delayedFunctions.push({ dl: delay, func: func, args: args, repeat: repeat, interval: interval });
    }

    /**
     * 
     * @param {number} relaunchSeconds timeinterval for page to reload (changes)
     */
    inDev(relaunchSeconds = 20) {
        let head = document.querySelector("head");
        let meta = document.createElement("meta");
        meta.setAttribute("http-equiv", "refresh");
        meta.setAttribute("content", `${relaunchSeconds}`);

        head.insertAdjacentElement("beforeend", meta);
        this.#functions.innerText = `
            let ts = new Date();
            console.log("Refreshed at: ", ts.getHours()+':'+ts.getMinutes()+':'+ts.getSeconds(), "Intervall ${relaunchSeconds}s");
            `;
    }
}

const Page = new PageBuilder();
/* ## component.js ## */
/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * COPYRIGHT and LICENCE are owned by its creator Christian Martin 
 * Copy, altering or distribution without the allowance of the owner are prohibited
 */


/**
 * A chainable HTMLElement builder. 
 */
class Component {
    _element;
    _modifier
    _alignment;
    _arrangement;
    _toRegister;

    constructor(element, attr = {}) {
        this._modifier = new Modifier().margin(new Sides().all(0));
        var akeys = Object.keys(attr);
        for (let i = 0; i < akeys.length; i++) {
            element.setAttribute(akeys[i], attr[akeys[i]]);
        }
        this._element = element;
        this._toRegister = [];
    }

    /**
     * Sets the alignment (modifications) for this element or more specific for its children. 
     * @param {Alignment} alignment 
     * @returns {Component} this component object
     */
    alignment(alignment) {
        this._alignment = alignment;

        this._modifier._modifications["display"] = "flex";
        this._modifier._modifications["align-content"] = alignment;
        this._modifier._modifications["align-items"] = alignment;
        this._modifier._modifications["text-align"] = alignment;
        //this._modifier._modifications["justify-content"] = alignment;

        return this;
    }

    /**
     * Sets the arrangement (modifications) for this element or more specific for its children. 
     * @param {Arrangement} arrangement 
     * @returns {Component} this component object
     */
    arrangement(arrangement) {
        this._arrangement = arrangement;
        switch (arrangement) {
            case Arrangement.START:
                this._modifier._modifications["justify-content"] = "start";
                break;
            case Arrangement.END:
                this._modifier._modifications["justify-content"] = "end";
                break;
            case Arrangement.CENTER:
                this._modifier._modifications["justify-content"] = "center";
                break;
            case Arrangement.SPACE_AROUND:
                this._modifier._modifications["justify-content"] = "space-around";
                break;
            case Arrangement.SPACE_BETWEEN:
                this._modifier._modifications["justify-content"] = "space-between";
                break;
            case Arrangement.SPACE_EVENLY:
                this._modifier._modifications["justify-content"] = "space-evenly";
                break;
        }
        return this;
    }

    /**
     * 
     * @param {Modifier} modifier 
     * @returns {Component} this component object
     */
    modifier(modifier) {
        this._modifier = this._modifier.join(modifier.ensureModifier())
        return this;
    }

    /**
     * Sets the innerText of the element
     * @param {string} text 
     * @returns {Component} this component object
     */
    text(text) {
        this._element.innerText = text;
        return this;
    }

    title(text) {
        this._element.title = text;
        return this;
    }
    /**
     * 
     * @param {string} styleClass 
     * @param {Modifier} modifier 
     * @returns {Component} this component object
     */
    addStyleClass(styleClass, modifier = null) {
        if (modifier) {
            Page.registerStyling(styleClass, modifier._modifications);
        }
        this._element.classList.add(styleClass);
        return this;
    }

    registerStyleClass(styleClass, styleRuleMap) {
        Page.registerStyling('.' + styleClass, styleRuleMap);
        return this.addStyleClass(styleClass);
    }

    /**
     * 
     * @param {string} key 
     * @param {string} value 
     * @returns {Component} this component object
     */
    setAttribute(key, value) {
        this._element.setAttribute(key, value);
        return this;
    }


    /**
     * Ends chain. 
     * Applies all modifications on the element.
     * @returns {HTMLElemment} the html element
     */
    generate() {
        /* apply styling to element */
        var mkeys = Object.keys(this._modifier._modifications);
        for (let i = 0; i < mkeys.length; i++) {
            this._element.style[mkeys[i]] = this._modifier._modifications[mkeys[i]];
        }
        /* subscribe/register to lists */
        for (let i = 0; i < this._toRegister.length; i++) {
            this._toRegister[i].push(this._element);
        }
        return this._element;
    }


    /**
     * Opens a context to create element children. 
     * Either as one component or a list/array of components.
     * @param {Component|Array<Component>} component 
     * @returns {Component} this component object
     */
    childContext(component) {
        if (arguments.length > 1) {
            for (let i = 0; i < arguments.length; i++) {
                this.childContext(arguments[i]);
            }
        } else if (component instanceof Array) {
            for (let i = 0; i < component.length; i++) {
                this.childContext(component[i]);
            }
        } else {
            this._element.append(
                (component instanceof Component
                    ? component
                    : component.toComponent()
                )
                    .generate()
            );
        }
        return this;
    }

    /**
     * @deprecated
     * @param {Array<Component>} innerComponent 
     * @returns {Component} this component object
     */
    componentChildren(innerComponent) {
        for (let i = 0; i < innerComponent.length; i++) {
            this.childContext(innerComponent[i]);
        }
        return this;
    }

    /**
     * 
     * @param {CommonEvent} commonEvent 
     * @param {string} functionName 
     * @returns {Component} this component object
     */
    setEvent(commonEvent, functionName) {
        return this.setAttribute(commonEvent, `${functionName}(this)`);
    }

    /**
     * 
     * @returns {ChainableModifier} 
     */
    chainModifier() {
        return new ChainableModifier(this);
    }

    /**
     * Collects the given List in the _toRegister attribute.
     * When generate() is called, 
     * the created Element will be registered (added) in every list 
     * within the list. 
     * @param {Array} listName 
     */
    subscribeOnGenerate(listName) {
        this._toRegister.push(listName);
        return this;
    }

    /*
    clickable(eventName) {
        let cssClass = "button-like"
        this.addStyleClass(cssClass)
        this._modifier._modifications["box-shadow"] = "4px 6px #999";

        let bckk = "background-color";
        if (this._modifier._modifications.hasOwnProperty(bckk)) {
            let bckc = this._modifier._modifications[bckk];
            delete this._modifier._modifications[bckk];
            Page.registerStyling(`.${cssClass}`, {
                [bckk]: bckc
            })
        }

        Page.registerStyling(`.${cssClass}:hover`, {
            "background-color": Colors.greenyellow.cssRGBString(),
        })
        Page.registerStyling(`.${cssClass}:active`, {
            "background-color": Colors.greenyellow.cssRGBString(),
            "box-shadow": "1px 2px #666",
            "transform": "translateY(4px)"
        })

        return this.setEvent(CommonEvents.ONCLICK, eventName);
    }
        */
}
/* ## baseComponents.js ## */
/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * COPYRIGHT and LICENCE are owned by its creator Christian Martin 
 * Copy, altering or distribution without the allowance of the owner are prohibited
 */

/**
 * Represents container Components.
 * Some predefined modifications are applied on the child components.
 */
class FlexContainerComponent extends Component {
    constructor(attr = {}) {
        super(document.createElement("div"), attr)
            .addStyleClass("flex-container-component")
    }

    /**
     * 
     * @param {Component|Array<Component>} innerComponent 
     * @returns {FlexContainerComponent} this component object
     */
    childContext(innerComponent) {
        if (innerComponent instanceof Array) {
            innerComponent
                .map(cl => {
                    if (cl instanceof Component) {
                        return cl
                    } else {
                        return cl.ensureModifier().toComponent()
                    }
                })
                .forEach(icomp => {
                    icomp._modifier = new Modifier()
                        .setStyleRule("flex", "none")
                        .join(icomp._modifier)

                })
        }
        return super.childContext(innerComponent);
    }
}

/**
 * A FlexContainerComponent, which organizes the children in a column like manner.
 */
class Column extends FlexContainerComponent {
    constructor(attr = {}) {
        super(attr)
            .addStyleClass("column-component")
            .modifier(
                new Modifier()
                    .setStyleRule("flex-direction", "column")
            );
    }
}

/**
 * A FlexContainerComponent, which organizes the children in a row like manner.
*/
class Row extends FlexContainerComponent {
    constructor(attr = {}) {
        super(attr)
            .addStyleClass("row-component")
            .modifier(
                new Modifier()
                    .fillMaxWidth()
                    .setStyleRule("flex-direction", "row")
            )
    }

    /**
     * 
     * @param {*} innerComponent 
     * @returns {Row}
     */
    childContext(innerComponent) {
        if (innerComponent instanceof Array) {
            innerComponent
                .map(cl => (cl instanceof Component ? cl : cl.ensureModifier().toComponent()))
                .forEach((icomp, i) => {
                    /* sets the width for all elements, 
                        to avoid overlapping or line break because of lacking width,
                        a percent is subtracted for every child element  */
                    /* To enable "override" a new Modifier is generated and joined 
                    with the modifier of the component */
                    icomp._modifier = new Modifier()
                        .setStyleRule("float", (i === 0 ? "left" : "right"))
                        .join(icomp._modifier)
                })
        }
        return super.childContext(innerComponent)
    }

    /**
     * 
     * @returns {Row}
     */
    distibuteSpacingEvenly() {
        this._element.children.forEach(child => {
            child.style["width"] = (100 / innerComponent.length);
        })
        return this;
    }
}

/* ## builder.js ## */
/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * COPYRIGHT and LICENCE are owned by its creator Christian Martin 
 * Copy, altering or distribution without the allowance of the owner are prohibited
 */

/**
 * Method Collection with predefined HTMLElements
 */
const builder = {
     components: {
          parent: {},
          current: {},
          previous: {},
          next: {},
          openedChain: {}
     },

     /**
      * 
      * @param {string} tag 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     genTag: function (tag, attr = {}) { return new Component(document.createElement(tag), attr).addStyleClass(`el-${tag}`); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     anchor: function (attr = {}) { return builder.genTag("a", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     label: function (attr = {}) { return builder.genTag("label", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     button: function (attr = {}) { return builder.genTag("button", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     input: function (attr = {}) { return builder.genTag("input", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     div: function (attr = {}) { return builder.genTag("div", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     span: function (attr = {}) { return builder.genTag("span", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     paragraph: function (attr = {}) { return builder.genTag("p", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     header: function (sizeGroup, attr = {}) { return builder.genTag(`h${sizeGroup}`, attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     checkbox: function (attr = {}) { return builder.input({ "type": "checkbox" }) },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     select: function (attr = {}) { return builder.genTag("select", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     option: function (attr = {}) { return builder.genTag("option", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     select: function (attr = {}) { return builder.genTag("select", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     radioBtn: function (attr = {}) { return builder.genTag("radioBtn", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     icon: function (attr = {}) { return builder.genTag("icon", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     img: function (attr = {}) { return builder.genTag("img", attr); },
     
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     textarea: function (attr = {}) { return builder.genTag("textarea", attr); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     table: function (attr = {}) { return builder.genTag("table", attr) },
     
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableRow: function (attr = {}) { return builder.genTag("tr", attr) },
     
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableCell: function (attr = {}) { return builder.genTag("td", attr) },
     
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableCaption: function (attr = {}) { return builder.genTag("caption", attr) },
     
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableHeadCell: function (attr = {}) { return builder.genTag("th", attr) },
     
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableBody: function (attr = {}) { return builder.genTag("tbody", attr) },
     
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableHead: function (attr = {}) { return builder.genTag("thead", attr) },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableFooter: function (attr = {}) { return builder.genTag("tfoot", attr) },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     form: function (attr = {}) { 
          return builder.genTag("form", attr)
          .addStyleClass("flex-container-component") 
          .chainModifier()
          .setStyleRule("flex-direction", "column")
          .ensureModifier()
          .toComponent()
     },

     /**
      * 
      * @param {*} attr 
      * @returns {Row}
      */
     row: function (attr = {}) { return new Row(attr) },

     /**
      * 
      * @param {*} attr 
      * @returns {Column}
      */
     column: function (attr = {}) { return new Column(attr) },

     /**
      * 
      * @param {*} innerComponents 
      */
     page: function (innerComponents) {
          let main = document.querySelector('main')
          
          main.parentElement.insertAdjacentElement(
               "afterbegin",
               builder.genTag("main")
               .alignment(Alignment.CENTER)
               .arrangement(Arrangement.CENTER)
               .childContext(innerComponents)
               .generate()
          )
          Page.generate();
          main.remove();
     }
}