{"id":17830371,"url":"https://github.com/lemaiwo/ui5-space-webcomponent-package","last_synced_at":"2026-04-24T20:05:38.643Z","repository":{"id":179212046,"uuid":"622014277","full_name":"lemaiwo/ui5-space-webcomponent-package","owner":"lemaiwo","description":"package with ui5 space webcomponent","archived":false,"fork":false,"pushed_at":"2023-09-01T14:28:31.000Z","size":772,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-01T00:07:22.487Z","etag":null,"topics":["ui5-webcomponents","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lemaiwo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-31T22:26:15.000Z","updated_at":"2023-07-06T15:33:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"18fce297-4b71-4c81-bb50-347a50adcc29","html_url":"https://github.com/lemaiwo/ui5-space-webcomponent-package","commit_stats":null,"previous_names":["lemaiwo/ui5-space-webcomponent-package"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lemaiwo/ui5-space-webcomponent-package","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemaiwo%2Fui5-space-webcomponent-package","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemaiwo%2Fui5-space-webcomponent-package/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemaiwo%2Fui5-space-webcomponent-package/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemaiwo%2Fui5-space-webcomponent-package/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lemaiwo","download_url":"https://codeload.github.com/lemaiwo/ui5-space-webcomponent-package/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemaiwo%2Fui5-space-webcomponent-package/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32238778,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ui5-webcomponents","webcomponents"],"created_at":"2024-10-27T19:30:15.088Z","updated_at":"2026-04-24T20:05:38.627Z","avatar_url":"https://github.com/lemaiwo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# UI5con2023\n## UI5WebComponent\n### Project setup\n- Generate UI5 WebComponent Package\n```\nnpm init @ui5/webcomponents-package@latest\n```\n- Provide the name for the package, eg.: spacepackage\n- Select TypeScript\n- Provide the name for the first UI5 WebComponent, eg.: SpaceComponent (space-component)\n- Open Package in Code:\n```\ncode spacepackage\n```\n- Open bash terminal\n- Install dependencies\n```\nnpm i\n```\n- Run the generated Package with UI5WebComponent\n```\nnpm start\n```\n### SpaceComponent\n- Provide the template\n```\n\u003cdiv class=\"star-wars-intro\"\u003e\n    \u003cp class=\"intro-text\"\u003e{{intro}}\u003c/p\u003e\n\n    \u003ch2 class=\"main-logo\"\u003e\n        \u003cimg src=\"{{logo}}\"/\u003e\n    \u003c/h2\u003e\n\n    \u003cdiv class=\"main-content\"\u003e\n        \u003cdiv class=\"title-content\"\u003e\n            \u003cslot\u003e\u003c/slot\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n- Change the alias, this needs to be the same as the library that consumes this UI5WebComponent\n```\n * @alias demo.components.SpaceComponent\n //becomes\n * @alias be.wl.SpaceLibrary.SpaceComponent\n```\n- Include properties \u0026 slots\n```\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\n```\n- Define properties\n```\n/**\n\t * Defines the intro of the space component.\n\t *\n\t * @type {string}\n\t * @name demo.components.SpaceComponent.prototype.intro\n\t * @defaultvalue \"\"\n\t * @public\n\t */\n\t@property()\n\tintro!: string;\n\n\t/**\n\t * Defines the logo of the space component.\n\t *\n\t * @type {string}\n\t * @name demo.components.SpaceComponent.prototype.logo\n\t * @defaultvalue \"\"\n\t * @public\n\t */\n\t@property()\n\tlogo!: string;\n```\n- Define slot\n```\n\t/**\n\t * Defines the articles of the component.\n\t *\n\t * @type {demo.components.SpaceItemComponent[]}\n\t * @name demo.components.SpaceComponent.prototype.default\n\t * @slot items\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\titems!: Array\u003cSpaceItemComponent\u003e;\n```\n- Implement generation of stars using onAfterRendering function\n```\n    onAfterRendering() {\n\t\tconst numStars = 100;\n\t\tconst mainDiv = this.shadowRoot!.querySelector(\".star-wars-intro\") as HTMLElement;\n\n\t\t// For every star we want to display\n\t\tfor (let i = 0; i \u003c numStars; i++) {\n\t\t\tconst { top, left } = this.getRandomPosition(mainDiv);\n\t\t\tmainDiv.append(this.getRandomStar(top, left));\n\t\t}\n\t}\n\tgetRandomStar(top: string, left: string) {\n\t\tconst star = document.createElement(\"div\");\n\t\tstar.className = \"star\";\n\t\tstar.style.top = top;\n\t\tstar.style.left = left;\n\t\treturn star;\n\t}\n\tgetRandomPosition(element: HTMLElement) {\n\t\treturn {\n\t\t\ttop: `${this.getRandomNumber(element.offsetHeight)}px`,\n\t\t\tleft: `${this.getRandomNumber(element.offsetWidth)}px`,\n\t\t};\n\t}\n\tgetRandomNumber(value: number) {\n\t\treturn Math.floor(Math.random() * value);\n\t}\n```\n- Apply css \n\u003cdetails\u003e\n\t\u003csummary\u003eShow css\u003c/summary\u003e\n\t\n```\n:host {\n    border: 2px solid var(--my-component-border-color);\n    background-color: var(--sapBackgroundColor);\n    color: var(--sapTextColor);\n    display: block;\n    /* width: 24rem; */\n    /* height: 3rem; */\n    text-align: center;\n    vertical-align: middle;\n    line-height: 3rem;\n}\n.star {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    background-color: white;\n}\n\n.star-wars-intro {\n    /* background: url(\"img/stars-bg.jpg\") center center; */\n    width: 100%;\n    height: 100%;\n    font-family: \"Droid Sans\", arial, verdana, sans-serif;\n    font-weight: 700;\n    color: #EBD71C;\n    background-color: #000;\n    overflow: hidden;\n    position: relative;\n}\n\n.star-wars-intro p.intro-text {\n    position: relative;\n    max-width: 16em;\n    font-size: 200%;\n    font-weight: 400;\n    margin: 20% auto;\n    color: #4ee;\n    opacity: 0;\n    z-index: 1;\n    text-align: center;\n    -webkit-animation: intro 2s ease-out;\n    -moz-animation: intro 2s ease-out;\n    -ms-animation: intro 2s ease-out;\n    -o-animation: intro 2s ease-out;\n    animation: intro 2s ease-out;\n}\n\n.star-wars-intro .main-content {\n    margin-left: auto;\n    margin-right: auto;\n    position: absolute;\n    z-index: 3;\n    width: 98%;\n    height: 50em;\n    bottom: 0;\n    font-size: 80px;\n    font-weight: bold;\n    text-align: justify;\n    overflow: hidden;\n    transform-origin: 50% 100%;\n    transform: perspective(350px) rotateX(25deg);\n}\n\n.star-wars-intro .main-content:after {\n    position: absolute;\n    content: ' ';\n    top: 0;\n    bottom: 60%;\n    background-image: linear-gradient(top, rgba(0, 0, 0, 1) 0%, transparent 100%);\n    pointer-events: none;\n}\n\n/* Main Image Styles */\n.star-wars-intro .main-logo {\n    position: absolute;\n    width: 2.6em;\n    left: 50%;\n    top: 20vh;\n    font-size: 10em;\n    text-align: center;\n    margin-left: -1.3em;\n    line-height: 0.8em;\n    letter-spacing: -0.05em;\n    color: #000;\n    text-shadow: -2px -2px 0 #EBD71C, 2px -2px 0 #EBD71C, -2px 2px 0 #EBD71C, 2px 2px 0 #EBD71C;\n    opacity: 0;\n    z-index: 1;\n    -webkit-animation: logo 5s ease-out 2.5s;\n    -moz-animation: logo 5s ease-out 2.5s;\n    -ms-animation: logo 5s ease-out 2.5s;\n    -o-animation: logo 5s ease-out 2.5s;\n    animation: logo 5s ease-out 2.5s;\n}\n\n.star-wars-intro .main-logo\u003eimg {\n    max-width: 100%;\n}\n\n@-webkit-keyframes intro {\n    0% {\n        opacity: 1;\n    }\n\n    90% {\n        opacity: 1;\n    }\n\n    100% {\n        opacity: 0;\n    }\n}\n\n@-moz-keyframes intro {\n    0% {\n        opacity: 1;\n    }\n\n    90% {\n        opacity: 1;\n    }\n\n    100% {\n        opacity: 0;\n    }\n}\n\n@-ms-keyframes intro {\n    0% {\n        opacity: 1;\n    }\n\n    90% {\n        opacity: 1;\n    }\n\n    100% {\n        opacity: 0;\n    }\n}\n\n@-o-keyframes intro {\n    0% {\n        opacity: 1;\n    }\n\n    90% {\n        opacity: 1;\n    }\n\n    100% {\n        opacity: 0;\n    }\n}\n\n@keyframes intro {\n    0% {\n        opacity: 1;\n    }\n\n    90% {\n        opacity: 1;\n    }\n\n    100% {\n        opacity: 0;\n    }\n}\n\n@-webkit-keyframes logo {\n    0% {\n        -webkit-transform: scale(1);\n        opacity: 1;\n    }\n\n    50% {\n        opacity: 1;\n    }\n\n    100% {\n        -webkit-transform: scale(0.1);\n        opacity: 0;\n    }\n}\n\n@-moz-keyframes logo {\n    0% {\n        -moz-transform: scale(1);\n        opacity: 1;\n    }\n\n    50% {\n        opacity: 1;\n    }\n\n    100% {\n        -moz-transform: scale(0.1);\n        opacity: 0;\n    }\n}\n\n@-ms-keyframes logo {\n    0% {\n        -ms-transform: scale(1);\n        opacity: 1;\n    }\n\n    50% {\n        opacity: 1;\n    }\n\n    100% {\n        -ms-transform: scale(0.1);\n        opacity: 0;\n    }\n}\n\n@-o-keyframes logo {\n    0% {\n        -o-transform: scale(1);\n        opacity: 1;\n    }\n\n    50% {\n        opacity: 1;\n    }\n\n    100% {\n        -o-transform: scale(0.1);\n        opacity: 0;\n    }\n}\n\n@keyframes logo {\n    0% {\n        transform: scale(1);\n        opacity: 1;\n    }\n\n    50% {\n        opacity: 1;\n    }\n\n    100% {\n        transform: scale(0.1);\n        opacity: 0;\n    }\n}\n\n@keyframes scroll {\n    0% {\n        top: 100%;\n    }\n\n    100% {\n        top: -170%;\n    }\n}\n\n/* @media screen and (max-width: 720px) { */\n    .star-wars-intro .main-content {\n        font-size: 35px;\n    }\n\n    .star-wars-intro .title-content {\n        position: absolute;\n        top: 100%;\n        animation: scroll 100s linear 4s forwards;\n    }\n/* } */\n```\n\u003c/details\u003e\n\n### Space Item Component\n- Create a new component for the items: SpaceItemComponent\n```\nnpm run create-ui5-element\n```\n- Include it in the bundle.esm.js\n```\nimport \"./dist/SpaceItemComponent.js\";\n```\n- Provide the template\n```\n\u003carticle class=\"space-article\"\u003e\n    \u003ch2\u003e{{title}}\u003c/h2\u003e\n    \u003cp\u003e{{description}}\u003c/p\u003e\n\u003c/article\u003e\n```\n- Provide the class\n```\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\n\n// Template\nimport SpaceItemComponentTemplate from \"./generated/templates/SpaceItemComponentTemplate.lit.js\";\n\n// Styles\nimport SpaceItemComponentCss from \"./generated/themes/SpaceItemComponent.css.js\";\n\n/**\n * @class\n *\n * \u003ch3 class=\"comment-api-title\"\u003eOverview\u003c/h3\u003e\n *\n *\n * \u003ch3\u003eUsage\u003c/h3\u003e\n *\n * For the \u003ccode\u003eui5-space-item-component\u003c/code\u003e\n * \u003ch3\u003eES6 Module Import\u003c/h3\u003e\n *\n * \u003ccode\u003eimport SpacePackage/dist/SpaceItemComponent.js\";\u003c/code\u003e\n *\n * @constructor\n * @alias demo.components.SpaceItemComponent\n * @extends sap.ui.webc.base.UI5Element\n * @tagname space-item-component\n * @public\n */\n@customElement({\n\ttag: \"space-item-component\",\n\trenderer: litRender,\n\tstyles: SpaceItemComponentCss,\n\ttemplate: SpaceItemComponentTemplate,\n})\nclass SpaceItemComponent extends UI5Element {\n\t/**\n\t * Defines the title of the space item component.\n\t *\n\t * @type {string}\n\t * @name demo.components.SpaceItemComponent.prototype.title\n\t * @defaultvalue \"\"\n\t * @public\n\t */\n\t@property()\n\ttitle!: string;\n\n\t/**\n\t * Defines the description of the space item component.\n\t *\n\t * @type {string}\n\t * @name demo.components.SpaceItemComponent.prototype.description\n\t * @defaultvalue \"\"\n\t * @public\n\t */\n\t@property()\n\tdescription!: string;\n}\n\nSpaceItemComponent.define();\n\nexport default SpaceItemComponent;\n\n```\n- Provide css\n```\n.space-article\u003eh2 {\n    text-align: center;\n}\n```\n\n- Resolve dependency in SpaceComponent for SpaceItemComponent\n```\nimport SpaceItemComponent from \"./SpaceItemComponent.js\";\n```\n\n### Test page\n- Provide test page\n```\n\u003cspace-component id=\"myFirstComponent\" intro=\"Hello UI5con!\" logo=\"./img/star-wars-intro.png\"\u003e\n    \u003cspace-item-component title=\"EPISODES IV-VI\" description=\"After years of galactic silence, civilization is on the brink of a new Star Wars release. Now, with the Force preparing to awaken, the people of Earth seek solace in films of old. With nowhere to turn, they gather in great numbers and watch the original trilogy without rest. Three films. 6 hours. 24 minutes. Popcorn. Slushies. Total elation.\"\u003e\u003c/space-item-component\u003e\n    \u003cspace-item-component title=\"Episode V: The Empire Strikes Back Opener\" description=\"It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space\"\u003e\u003c/space-item-component\u003e\n\u003c/space-component\u003e\n```\n- Copy logo image\n- Start test page\n```\nnpm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemaiwo%2Fui5-space-webcomponent-package","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flemaiwo%2Fui5-space-webcomponent-package","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemaiwo%2Fui5-space-webcomponent-package/lists"}